Getting more REACT help

Hello,

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 JS and CSS files are in my-app/src.

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.

Any ideas?

Thanks.

@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 id="root" element.

You should have an index.js file in the src folder, according to the instructions at the link you shared.

1 Like

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.

1 Like

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

1 Like

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:

Capture

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).

Thank you.

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: Checkbox.js and Checkbox.css

1 Like

At your component, import the css file.

// App.js
import React from 'react';

import './App.css'
2 Likes

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.

1 Like

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.

1 Like

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.js and App.css and 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.

2 Likes

Thanks everyone. Super-helpful !