Having the proper structure in a react project helps you organize the codebase, allow scalability, code readability and it’s a general good practice to have a good structure not just dumping all your code in one folder.
Now when we first create our react app with npx command, the following structure is what we see:
 |
We’re going to edit the structure into this by deleting some files and cleaning the app.js:
 |
Now that is the base structure of our code, throughout this the structure would change but this our starting point. Today, we are going to be adding one folder to our structure which is components.
Components are one of the essential key parts/features of a react project, they are the building blocks of react applications which are created to allow modularity and reusability in a react project.
State is another feature of react, it is react’s special way of managing data across components.
Now back to our project we’re going to create our first component and place it in the right place:
 |
From the above we’ve created a component directory where all subsequent components will be placed for now and later on some abstractions will be made.
Now inside our Example.js we have the following:
 |
This display the text but we will have to import this into App.js so it can be seen it in our application:
 |
run yarn start in the terminal to open the application in the browser:
 |
 |
And with that you’ve created your first component. Next time we will be talking about react and state
