I am trying to consolidate my REACT knowledge by looking at sources outside of FCC before I continue on with FCC’s front-end curriculum.
My question is about using REACT in local development environment (option 2 here). The install package created a
my-app folder. But the
index.html file is in
my-app/public while the
CSS files are in
I wanted to move the
HTML file to be in the
src folder with the rest of the files…since all the solutions (from outside tutorial) seem to have all files in one spot. But I obviously break everything when I do that. Error msg:
Failed to compile.
@sabbyiqbal, I think the
index.html file needs to be in the
public folder the way
create-react-app is setup by default. There may be a way to change it, but it’s not necessary. The React code on fCC and most places only use that
index.html file for the
You should have an
index.js file in the
src folder, according to the instructions at the link you shared.
Indeed…your src/ folder is for all your source files and contains index.js, while your public/ folder is where the files are rendered and where your index.html is. The index.html contains the root element where your react files all render into.
Your src files are all React files… .html is not a react file so they are not read by react and have no purpose there. Hope that kind of explains why the file structure is the way it is and why your app breaks when you move the files around.
Index.html needs to be in the public folder. Think of public folder as fixed code (template) , and src/ is the folder the module bundler converts into complex one-line js code (for browser support) and injects into the template
Thanks to everyone who replied. I have a follow-up question:
The reason I posed my initial question was because I was confused about how CSS file gets read by REACT. See all files and file structure in pic below:
App.js imports all component files.
Where/how do I link the CSS file so that style shows up on webpage? (via index.HTML file that is in my-app/public folder as noted before).
I’m learning, like you, but the answer is, I believe, that you will have multiple CSS files, one for each component, and one for App.css that defines general styling for the page (since this is a single-page application). Inside
/src, I have subfolders such as
/src/components/Checkbox inside of which you’d find two files:
At your component, import the css file.
import React from 'react';
In theory you could import one big css file, but I tend to put them in their own files and import them in their relative component files. But realize that these are global so you have to beware of name collisions. I often precede a classname with the name of the component to avoid that.
I might suggest finding some code-along youtube videos and see different ways to set up projects. Of course, create-react-app is a very popular boiler-plate that uses webpack to set up and manage your project.
You can have one or multiple css files, doesnt matter…the structure is up to you. But it needs to be done in src since that is where everything that gets rendered is pulled from.
Instead of html files, you are working with js files. So instead of using index.html, you need to use index.js… You’ll need to create a css file in src, and import it into your index.js file in order for your styles to apply to and render with your react files.
If you would like to use multiple files, good practice is to create a style.css in src/css, import any additional css files you create into that file, then only import the style.css into your index.js. That way, all your styles are organized in one place.
This applies if you are following along with the tutorial using create-react-app:
React doesn’t read CSS files. Under normal circumstances, the HTML file, the entry point for the app, has a link tag in the head referencing a CSS file, just like [I think] you’d be familiar with — nothing special. The thing is, create-react-app is built on top of a tool called Webpack (which does the magic bundling everything up so you can write the JS as modules but end up with just one output file). Webpack has many plugins, one of which allows you to use the JS
import syntax for non-JS files (images and fonts for example). And it then magically bundles those into the output as well. This means that what you can do is write a CSS file for every component if you want (so you can have for example
App.test.js all in the same place). It’s nice to have, it’s good for organisation as you can immediately find where things are. But be aware it’s hiding away from you how things actually work — it doesn’t work like this once you’re not using that specific tool.
Thanks everyone. Super-helpful !