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
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:
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
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.
import statements at the top of the file may look strange.
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 the
root element in the web page:
ReactDOM.render( <App />, document.getElementById('root') );
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/index.js has a
React.createElement , and the code would crash if the
React object wasn't present to reference.