Okay.


Now let's understand the folder structure of a reactor project.



So as you can see that there are a lot of folders you will be seeing here.


So first, let's start with the node modules.


So basically the node modules is the combination of all the dependencies and the sub dependencies that


are required to run your reactor but used to be very careful, is that you should not quantify anything


inside these node modules.



Now let's go to these packages.


And so this package packages and basically tracks all the dependencies that are required for your application.


As you can see that create, React have already installed some of the dependencies like the testing


library.


Just react react domain, also react scripts.


You can add as many dependencies as you want here.


Now let's go to the main important folder.


One is the third and the public.


And here you can see that there is a file and this is the index that is the single page that is basically


getting rendered in our browser.



So as we all know that React is a single page application and this is a single page that is getting


into it.


Now to understand this some better there's open or terminal and when you start.


Okay.


Now.


We can see that our application is running on this localhost.


Now let's go there and just open the source of this page and then see that this is a single page that


is getting rendered.


And if I go to the body and see that there is a big idea.


And I do understand this one much better.


Let's see how we are getting the content.


So if I go to a folder, you'll see that that is very important.


Flight one is not just an index.


Just now, if I go to this index chart and see that there is some import we are doing from React like


we are importing from here and that we have done and this React is basically rendering all the components.


Now here you can see that we are rendering the app component and if we go to our app component, you'll


see that whatever content we are currently senior.


This is coming from the app component.


So to understand this, remove something and just easier handle word.


If I said this and let's go there and I just reprint this and see that we are getting helloworld that


means this app component is basically your root component where you can combine all the subcomponents


or components in Europe.


And then at the end this app, this content is getting rendered by we are done inside this index strategy


and you can see that when we are rendering this, we are entering this inside the root of that index


page, you can see that what we are doing and just getting the idea by get element by it.


And then if we go to our index disclaimer, this is the content of where we are rendering of the content


and this is all about the basic process, how React application works.