Create React app and "root"

How does the index.js in a create-react-app install know where document.getElementById(“root”) is?

My folder structure is:
My Project
–node modules
–public
–src
.gitignore
package.json
yarn.lock

The index.html is in public. The index.js is in src. So it seems the command jumps back from index.js in src (…/) and then goes into public/index.html, something like href="…/public/index.html"… but it accomplishes this with document.getElementById(“root”). How does this work?

It’s just a regular webpack config magic hidden behind react-scripts:

oh, how did I miss that line in three hundred files in node_modules! :slight_smile:

In a tutorial I took, we built it from scratch, so I saw what we were doing with the webpack.config file.

By the way, is that rule actually generating the index.html file that pops up in the public folder in a fresh creat-react-app install?

My guess is it comes from here: https://github.com/facebook/create-react-app/tree/master/packages/cra-template/template/public
Webpack HtmlWebpackPlugin just injects your scripts into it.

Btw, it’s a nice habit to periodically go through source code of popular packages :slight_smile:

1 Like