ReactJS Tutorial 4 : How React App Works

🔧 Building a React app and need a backend?
Learn FastAPI — the modern Python backend that pairs perfectly with React.
✅ JWT Authentication, OAuth, REST APIs — everything your React app needs.
👉 FastAPI Complete Course (limited discount): https://www.udemy.com/course/fastapi-course-python/?couponCode=YOUTUBE2026

📦 Also check out:
• Django Masterclass (44hrs, 9 real projects): https://www.udemy.com/course/django-course/?couponCode=YOUTUBE2026
• Python Masterclass 2026 (80hrs):https://www.udemy.com/course/python-masterclass-course/?couponCode=YOUITUBE2026

───────────────────────── Let’s now understand how our react project is laid out and how it works.

As earlier mentioned, a react app does not contain multiple webpages but a single webpage.

We can find this single webpage in our app called as index.html

Usually the index.html is the main homepage of any website or a web application.

But if you take a look at the index.html page, right now in the body of that page we only have one div and a script tag and you do not have anything else.

But if you take a look at the page rendered on the browser, it contains elements.

If you are familiar with HTML you will understand that to create this, HTML page you need to add a lot of HTML tags but there are only two tags present in the HTML body of index.html.

This is because React works in a different way, we do not write or create HTML elements but React does that for us.

How does React do it ?

If you take a look at the body tag, we have a div with an id root.

What React does is that it selects this root and renders HTML elements into it.

You will also notice that there is a JS script tag as well which points to src/main, hence let’s now go to that folder.

In main.jsx you will find that we have selected that root div element, and inside of it we are rendering a React component called App.

Now let’s learn the significance of rest of the files:

Node modules: Contains all the node packages to run your application.

Public folder: Could store any assets like images

Assets: Could store images

package-json: Contains the scripts required to run your apps as well as dependencies.

Show the npm start script and the React version.

In the next lecture, let’s learn what is a component and how to create our first component in React.

This app component is already present in the App.jsx file.
How does a React application work and how project structure of a React app works.
Entire React Playlist: https://www.youtube.com/watch?v=MHn66JJH5zs&list=PLSsAz5wf2lkKm0BG9wUWWSgYWBzDa-dFs&pp=gAQBiAQB