From the course: Building React and ASP.NET Core Applications

React architectural overview

From the course: Building React and ASP.NET Core Applications

Start my 1-month free trial

React architectural overview

“

- [Instructor] The .NET new React command also created some React related files. So let us go to visual code and have a look at the most important files. All the React related files can be found inside the ClientApp folder. In here we see two folders, the public and the src folder. Inside the public folder, we can see the index.html file. And when the application starts, this is the first page that is loaded. This will be the only html file in the entire application since React is generally written in JavaScript, which we are going to cover during this course. Inside here, in line 29, you can see the div which has an id='root'. This line is very important since all the application components are loaded into this div. Now, let us go to the src folder, inside here you can see the index.js file. This is the JavaScript file that corresponds to the index.html. This file has the following line of code. So here we have rootElement =document.getElementById('root') and inside this file we can see the React configuration to use the div with the ID of 'root'. Another important file in here is the App.js file. And this is the file for the app component. The app component is the main component in React which acts as a container for all the other components. You can find the other components inside the components folder, and here you can see components like Counter, FetchData, you can see the NavMenu.js and NavMenu.css which is the CSS file for the NavMenu.js. Another important file in here is the Layout.js which is used to define the layout of our app. So we see that we have the NavMenu at the top and then the container of our components.

Contents