Hello, in this tutorial, we'll go over the project/file structure of a React application.
First let's talk about the package.json file.
React Project Structure
Learn the file structure of a React App
The package.json File
The package.json file is a configuration file commonly found in Node.js projects. Since we used Node.js and the npx create-react-app command from npm to create our React project, it created one for us.
The purpose of it is to:
Indicate the dependencies that are needed for our project so it can easily install them. You can see this part in the dependencies property.
"dependencies": {
...
},
You can also use it to define scripts. When we ran npm run start, it is executing the command call "start" in the scripts property.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
The package.json file also contains other information such as the name of the project, the version, and other metadata that may be important to your project.
The public Folder
In the project, you can find a folder call public.
This folder contains assets and files that can be accessible in the project and also by anyone when the project is deployed.
To demonstrate this, when you launched the React application using npm run start, you can get display logo192.png by doing:
The src Folder
There is another important folder that you should know about. That is the src folder.
This folder contains all the source code and logic for the application.
One file in particular if you are new to React, is index.js. That is the starting point of the app besides the index.html file in the public folder.
If you look inside the index.html file, you can see a div element with id="root".
When the React app launches, it'll load the index.html page, and the index.js file will be executed.
From there, it'll use the root div and render React components to the screen.
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
In the above code snippet, <App /> is a component that is generated when we created the React application using a command. That is also located in the src folder.
We'll talk more about components later but basically, it is something that we can create and we can place it anywhere on the web page.
The node_modules Folder
The node_modules folder is also something that comes when we create a project with Node.js. It is used to store all the installed dependencies and the project will know to look into it to find what it needs.
