In this article, we will understand the control flow of the Reactjs create-react app folder structure.

 in the last article, we understand that how simple it is to create and run a basic react application using create-react-app. Now at the same time, it is also really important to understand the files and folders involved and how the control flows when you run the application.

Let's understand react folder structure in this article, 

I have opened the hello world project in VS code and you can see that at the root level we have three folders and four files.

firstly, we will start with the package.json, 

Package.json

This file contains the dependencies and the scripts required for the project. You can see that we are using react version seventeen and that is listed as a dependency. We also have a few scripts to run the application, build the application and even run tests. Now, based on whether you have just NPM or yarn as a package manager you are going to see the yarn.lock, or package.lock files. 

react package.json

These package managers simply ensure the consistent installation of your dependencies and you don't really have to worry about them. We also have a git ignore and a readme file.

node_modules 

node_modules is the folder in which all the dependencies are installed. It is generated when you run the create-react-app command or when you run NPM install. 



public

The public folder, this folder contains three files, out of the three, manifest.JSON is concerned with progressive web apps, we have the favicon which you see in the browser tab and this is not specific to react. So as a beginner, you only have to concentrate on the index.html file.

The index.html is the only HTML file you are going to have in your application.

We are building single-page applications and this is said the view might dynamically change in the browser, but it is this HTML file that gets served up typically.

You are not going to add any code in this file may be some changes in the head tag but definitely not in the body tag.  To control the UI and for that purpose, we have one div tag with ID is equal to root.  At runtime the react application takes over this div tag and is ultimately responsible for the UI.

please make a note of this div tag and we will come back to it shortly 


src

The next folder we have is the source folder which is the folder you will be working with the most during development. The starting point for a react application is index.js

In index.js, we specify the root component which is the app component and the DOM element which will be controlled by reactjs.  The Dom element in our example is an element with an ID of root.  If you can recollect this is the element in our index.html file. 

We call this div element as the root DOM node because everything inside it will be controlled by reactjs. For the hello world application, the app component is rendered inside the root DOM node, which brings us to the app component which is present in app.js. This is also the file we edited in the last article and is responsible for the HTML displayed in the browser. 



In other words, the app component represents the view which we see in the browser. 

Along with app.js create-react-app also generates the CSS file for styling and a test.js  file for unit tests.  The CSS file contains classes that are applied in the app component and the test file contains a simple test case. We also have an index.css file that applies styles to the body tag and the logo SVG which is referenced in the app component. 

Finally, we have a service worker which is again concerned with progressive web apps and can be ignored as a beginner. So, that is the folder structure of a react application created using create-react-app. When you run the command NPM start, the index.html file is served in the browser. The index.html contains the root DOM node. Next, the control enters index.js, when there's the app component on to the root DOM node. The app component contains the HTML which is ultimately displayed in the browser. now then I have mentioned the word component several times already, but what exactly is the component.  let's understand that in the next article. 

Thank you for reading this article.  I'll see you guys in the next one.