I tried learning React so many times before and got scared by the various folders and files it has. But this time it's different. If u are struggling to understand and learn React as I did, I hope this blog helps you a little.

Just remember, it starts with index.html. It is in the public folder of your React project if it is set up right. Refer here to set up your React app.

If your React App is set up right, the file structure will look like this,

• Inside the body tag of the HTML page, u can see a div with an id root. This is a key point to note.

  

• Well, now open the index.js file inside the src folder. Don’t worry much about all the details in there but just look at the following lines,

  

  As u can see, the root div element in the HTML file is selected here using the document object i.e document.getElementById('root') and asked to create something called Root using it and is being accessed through the root variable.

  This root is the root component of React inside which all the other components are rendered.

  

• Now this root has an inbuilt method called render which displays the components in the browser, but here it is only rendering one component called <App /> which has been imported from App.js file.

  

• So, let's go there and check out what's in there. Shall we?

  

  Yup, I think we finally reached the destination😅 you know why?

• Open your terminal and navigate to your project folder, i.e my-react-app in this case.

  

  and run the command npm start and see what you'll get in the browser.

  

  yup, this is what you'll get. If we observe the app.js file, you can understand that this is all written in the return statement of the App function. The React logo, the simple text, and the hyperlink that u can see, it's all written inside the header tag inside the return statement.

  So, this concludes our journey of understanding React file structure.

  In the end, we can understand that, App.js is a React component that is being rendered through index.js file.

We can write our own components and make them display in the browser. So, stay tuned for the next blog, where we'll discuss what these components are and how to create our own components.

Until then,