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

A Look at Necessary Files

Explore the core files and directories in a React project to understand their purpose. Learn how index.html serves as a template, how index.js boots the app, and how JSX in App.js structures the UI. This lesson helps you grasp the foundational setup needed to build and maintain React client pages effectively.

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 ...