Search⌘ K
AI Features
Home
Courses
Building Web Applications with React and ASP.NET Core

Understanding How Components Fit Together

Explore how React components are structured and rendered in a single page application. Understand the use of JSX, BrowserRouter, and component imports, and see how changes in code update the app instantly during development.

We'll cover the following...

Implementation of React components

Now, it’s time to start looking at the React app code and how components are implemented. Remember that the root JavaScript file is index.js in the ClientApp folder. Let’s open this file and look closely at the following block of code:

Node.js
const rootElement = document.getElementById('root');
ReactDOM.render(
  <BrowserRouter basename={baseUrl}>
    <App />
  </BrowserRouter>,
  rootElement);

The first statement selects the div element we discovered earlier, which contains the root ID and stores it in a variable called rootElement.

The next statement extends over multiple lines and calls the render function from the React DOM library. It is this function that injects the React app content into the root div element. The rootElement variable, which contains a reference to the root div element, is passed into this function as the second parameter.

The first parameter that is passed into the render function is more ...