The easiest way to learn React
and the way you should structure a React
project ( this includes everything, from css
, to multiple js
files, etc ) is to use create-react-app
Let me try to elaborate a bit.
React
is a javascript library. You could, for example, get the library from a cdn
and include it in your index.html
file much in the same way you would get jquery
for example. And, with the library included, you could do things like this:
const element = React.createElement(
'h1',
null,
'Hello, world!'
);
const container = document.getElementById('root');
ReactDOM.render(element, container);
Since you have the library from a cdn
, you have access to it's methods, for example createElement
and the library will look for a node in the dom
with id
called root
and insert there a h1
node containing Hello, world!
. You could then apply to the newly created node a style of your choice.
This example was taken from here
While it is certainly possible to use React
this way, you shouldn't, in my opinion.
What you should do is follow the steps outlined in the create-react-app
link and bootstrap a project using create-react-app
. This will give you a pre configured project, that will allow you to use the library in a modern way.
The project that create-react-app
offers you is set up to use a tool called webpack
and a tool called babel
. Webpack
is a module bundler
. Using a set of rules, it will take several files and bundle them together. How and why it works is beyond the scope of this question. Babel
is a javascript compiler or syntax transformer. Also using a set of rules, it turns ES6
into regular javascript. Again, the how and the way are out of scope. What you should know is, because of webpack
and babel
, you will be able to write code like this.
import styles from 'style.module.css'
This is done with no effort on your part, because everything is already configured by create-react-app
.
This is why I recommend you start with this. Just install it, bootstrap a project and take a quick look at how App.js
is set up. You will see there css
imports, component
imports and will give you a good if shallow overview of how a modern React
project works.