Building Web Applications with React and ASP.NET Core/

...

/

Understanding How Components Fit Together

Understanding How Components Fit Together

Learn how components are implemented in React app.

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:

Press + to interact
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 ...