• 10 hours
  • Medium

Free online content available in this course.



Got it!

Last updated on 3/31/22

Mounting React inside the webpage

Log in or subscribe for free to enjoy all this course has to offer!

Before we get into JavaScript code, let's have a look at where the browser starts with your web page!

This is the static HTML file that is served from  ./public/index.html . Looking at this file tells you that it truly is a shell of a web page. There's basically nothing in here of interest to an end user. Mainly, there's a link to a favicon, and an empty div in the body with an id of root.

Looking more closely, this line in the <head>  tag contains a strange URL:

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

This wouldn't work if served to a browser as-is, and the generated comment below explains that this whole file is actually a target for the build script. Basically, the build process will generate a new version of this file that has the right URL here.

In fact, the slug  %PUBLIC_URL%  will be modified in place wherever it appears in this file, which allows you to place other resources in the public url here and link to them inside this file in plain HTML.

The other thing of interest in here is the line:

<div id="root"></div>

This defines the element in which your React app will be rendered. Note that this static HTML page doesn't have to be blank. You can add whatever static design frame and elements you prefer around the  root  element, and know that the app will appear inside that element when JavaScript executes.

Now let's look at the JavaScript file that is responsible for mounting your app inside the  root  element..


The naming of this file suggests its relationship to  ./public/index.html . Just as  ./index.html  is where the browser looks for the initial instructions to build your web page,  ./index.js  is where React looks for the initial instructions to build your user interface.

Since this is also the first Javascript file we've looked at, let's take a minute to understand what's going on here. 🔎

ES6 modules

If you haven't worked with JavaScript that's compiled on the server side, the  import  statements at the top of the file may look strange.  import  is an expression of the module pattern in JavaScript. It allows us to import units of JavaScript functionality from other JavaScript files.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

Path vs. Named-module imports

The first two lines import core functionality of the React library itself. The third and fourth lines import modules from inside our own app.

Note that the third and fourth lines above use file paths, whereas the first two lines just use module names. That's because lines 1 and 2 are invoking modules that were defined in  ./package.json  under dependencies. In fact, all the modules defined in that list can be imported by name here (once we've run  yarn to install them).

Modules that aren't named can still be loaded by specifying a path to the file where those modules are defined. The components and other modules defined in our app belong to this second group, and that's what is being imported in lines 3 and 4 above.

We'll take a look at those files in a minute, but first let's look at how the app is mounted!

Rendering React into the web page

Next, we have the code that invokes some of the imported modules to tell React to render the UI inside theroot  element in the web page:

<App />,

 First, let's look at the  render  function. It belongs to the ReactDOM module, which was imported on line 2 above.  render()  takes two arguments:

  • a React component to render

  • a DOM node to serve as the render container.

We've already been over how the  root  element was defined in./public/index.html , so the second argument is provided here via querying the DOM.

The first argument is where our app starts to take shape. This is a reference to the 'App' component, which we can find defined in ./src/app.js .


src/index.js  has a  .js  file extension, but actually isn't valid JavaScript, as you can see from this line:

<App />,

This would throw a syntax error if this were run in a JavaScript interpreter. This is an expression of the JSX templating language. It will be replaced by the JSX interpreter with the component named inside the angle brackets. Incidentally, you can also just write 'normal' HTML tags here!

You may notice that React is imported at the top of the file but not used anywhere in the code. In a Javascript file, it would be safe to delete an unused imported library like this. But in JSX, we have to include React because the JSX tags will be compiled into calls to  React.createElement , and the code would crash if the  React  object wasn't present to reference.

Example of certificate of achievement
Example of certificate of achievement