Understanding the Index Files

Yeo Yong Kiat

By Yeo Yong Kiat in ReactJS

20 min read
Let's begin breaking down a React app by understanding the index.html and index.js files. Remember my post about how modern JS essentially has you just downloading a bare bones html file and a JS script that renders your app in your browser? Today we're going to see how it works by tearing apart these two index files.

What's Index.html?

As I've mentioned, it's the minimal html file that your browser downloads when accessing a Single-Page Application (SPA). It has almost nothing, except for the most fundamental components of a basic HTML file. Let's take a look by opening the index.html file in a code editor, which should look something like this: 

<!--I've simplified the html by removing metadata-->
<!DOCTYPE html>
<html lang="en">
  
  <head>
    <!--misc metadata goes here-->
    <title>React App</title>
  </head>

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

</html>

Notice how minimal this html file is, with almost no elements at all. How did it render into the webpage you saw when you ran "npm start" in the terminal? We'll get to that in a minute. For now, just note that the index.html file is just like any other html file. Also, take a look at the <body> section, where there is a <div id="root"> element. This is the element within which your entire app will be rendered, hence its id name. If you remove this element, your entire app vanishes.

Try removing the <div> element. Or renaming the "id". See what happens.

It's a bit too early to talk about how React works, so let's move onto the index.js file.

What's Index.js?

Let's load index.js into a code editor, which should look something like: 

// Loading react libraries
import React from 'react';
import ReactDOM from 'react-dom/client';

// Loading styles
import './index.css';

// Loading app.js
import App from './App';

// Creating root of app within <div id="root">
const root = ReactDOM.createRoot(document.getElementById('root'));

// Rendering whatever App.js has into root
root.render(
  <React.StrictMode>
  <App />
  </React.StrictMode>
);

Not easy for someone uninitiated to React's syntax, so let's break it down:

  • In the first section of the code, you load up the react libraries, which includes React itself, and also ReactDOM. You might be wondering what the latter is. You already know that React itself enables a certain syntax, so ReactDOM is the package that renders each React component into your app.
  • Very quickly, the second section is where you load your styles. Notice how you no longer load the styles using a <link> element in the <head> section of your index.html file.
  • The third section has you loading your React components. For now, you only know of one component written in React, which is the App.js component. This is the parent component, which in turn contains other React components, as you will see. App.js is basically a container code that puts all other React components together to form your entire app. And yes, a React component is actually just a piece of JS code.
  • The fourth section is where you use ReactDOM. ReactDOM creates a "root" object where your <div id="root"> element is, for your app to render into.
  • The fifth section is React. Here's where you use the React syntax to give instructions to the "root" object, to render whatever it is you want your App to be. We know that the instructions for rendering are contained in App.js, so we reference it in this section.

But some things look strange, doesn't it? Let's pause for while and go through them one by one:

  • We loaded App.js, which is JS code, right? So shouldn't we be calling it as a function called App? Why are we calling it <App />? Yes, this is the first strange React syntax you'll have to get used to. It's true that a React component is just JS code, and is therefore a function (or JS class). But that's how we refer to React components, as if it were a HTML element to be used as a tag.
  • This is JS right? Why do I see HTML in the last section? Well, not quite. It looks like HTML, yet you know it isn't quite HTML because you're writing it alongside JS code. Indeed, it's a special syntax of React called JSX. It feels like HTML because, well that's the intent! More on this later.
  • What is StrictMode? This is us telling React that we want it to flag out all possible problems in our app. This activates additional checks like depreciation checks and warnings whenever we're not doing something right. Not essential, but good practice.

What's This JSX Thing?

Let's backtrack a little bit to the HTML-like syntax we saw above. That is the React syntax, known as JavaScript XML (or JSX for short). Remember how I said we want our entire webpage to be rendered via JS? Well, this is how we do it - we have a syntax that feels like HTML, which we can now use in a JS code to write out how the webpage will look like! That's the reason why the syntax chose for the function App to be called as <App />, so that you could place functions as if they were HTML elements and think HTML.

Do I Code My App Within Index.js?

Actually, no! You code your app within App.js instead, which means this entire index.js file can be left entirely untouched. To write our app, we focus on the App.js component and other components, which will be referenced within App.js. The purpose of index.js is just to render whatever App.js coded for into the <div id="root"> element of your index.html file.

In short, you don't need to touch anything in the index files for now. We'll come back to a more thorough explanation in future posts when you've grasped a little bit more about React. That's how learning React is like - you can't quite get everything first, you move onto other parts, and then you come back when you've learnt enough. Get used to it, React's a wild ride. And a fun one.

In the next post, we'll look into what the App.js file is.

Find more ReactJS stories on my blog. Have a suggestion? Contact me at [email protected].