Search⌘ K
AI Features
Home
Courses
Quick Start Full Stack Web Development

A Look at Necessary Files

Explore the fundamental React files involved in setting up client-side pages, understanding index.html as a template, index.js as the script replacing the root div, and App.js as the core application component. Learn how JSX works and discover the roles of other important files and directories.

We'll cover the following...

What’s in index.html?

The file public/index.html is mainly known for being a ghost-town. In contrast to websites based on static pages, there’s nothing of substance in it. All of the content will be dynamically populated by the React framework.

HTML
<!DOCTYPE html>
<html lang="en"> 
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
      />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 
      <title>React App</title>
</head> 
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div> </body>
</html>

This file is a sort of template in two senses.

  • First, the tag %PUBLIC_URL% will be replaced with the right directory before it goes live. To see the effect of the pre-processor, we can run npm run build. This creates the directory and build, which will include the processed version of index.html. In that file, for example, %PUBLIC_URL% has been replaced by a path. More notably, two “minified” scripts have been added by the pre-processing done by React that is the webpack.

  • The second sense in which the file is a template is found in this snippet: ...