Video Belajar
Tonton dan pelajari berbagai topik menarik melalui video pembelajaran eksklusif dari Channel Code Stoic.
Code Stoic
59222
ReactJS Tutorial 4 : How React App Works
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
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