ReactJS Masterclass: Beginner To Advanced – Build Real Projects (85+ Videos) - 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