Folder structure

The new react project folder structure would have below list of folder and files, this project is generated in September 2023, this may change in future.

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── images/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── imageHighlighter.jsx
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── package-lock.json
└── README.md

Here is the simple explaination of each file in the project folder

Sr No	File Name	Description
1	`node_modules/`	Contains all npm packages and libraries that are dependencies for the react project.
2	`public/`	The `public` folder is the base directory for all publicly accessible assets and files that don't need to go through the build process. This folder usually contains static files that are not managed by Webpack, the build tool used by Create React App (CRA).
3	`public/index.html`	Main HTML file; React injects components into the `div` tag with `id="root"` in `body`. Learn more about it below
4	`public/favicon.ico`	Browser tab icon.
5	`public/logo192.png`	Icon used for Progressive Web Apps (smaller version).
6	`public/logo512.png`	Icon used for Progressive Web Apps (larger version).
7	`public/manifest.json`	Configuration for PWA settings. Find more detailed explaination below about PWA settings.
8	`public/robots.txt`	Provides instructions for web crawlers, search engine bots, learn more about this below
9	`src/`	This folder contains all the React components, styles, tests, and JavaScript files that make up the application. Unlike the public folder, the src folder contains files that go through a build process managed by Webpack.
10	`src/images/`	Folder to store image assets.
11	`src/App.js`	Main React component file.
12	`src/App.css`	CSS file for `App.js`.
13	`src/App.test.js`	Unit tests for `App.js`.
14	`src/imageHighlighter.jsx`	Custom React component for highlighting images.
15	`src/index.js`	JavaScript entry point; renders the App component. Learn more about how it would be included in index.html below
16	`src/index.css`	Global styles.
17	`src/logo.svg`	SVG logo.
18	`src/reportWebVitals.js`	An optional utility that's included by default. This file is used for measuring and reporting on various web vitals, which are metrics related to the performance, reliability, and user experience of your application. Learn more about Web Vitals below.
19	`src/setupTests.js`	Jest test setup file.
20	`.gitignore`	Specifies files and folders to ignore in git.
21	`package.json`	Project metadata for node.js technology, all dependencies and commands/scripts to handle your project would be maintianed here.
22	`package-lock.json`	Locks the versions of npm dependencies. Locks the versions of your dependencies to avoid conflict and make sure the project is stable by not allowing to swith to different version of a perticular dependency.
23	`README.md`	The document to express more about your project especially for develoeprs or other technical people.

Starting point of React

In a React application, like any other frontend application, there is a foundational HTML file. However, in the context of a Single Page Application (SPA), it differs from traditional HTML-based websites where multiple pages are common. In an SPA, typically, there is only one HTML page, often named "index.html."

This "index.html" serves as the base structure for the entire application. It contains a minimal HTML structure, consisting of a single <div> element with the id attribute set to "root," as shown below:

<!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" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

This <div> element with the "root" id serves as the entry point for the React application. React components are dynamically rendered into this div, allowing the application to manage and update its content without requiring full page reloads, it will provide a smoother and more interactive user experience in single-page applications.

Including index.js into index.html

In a React application, the src/index.js and public/index.html files are linked through the build process managed by Webpack, which is the module bundler used by Create React App (CRA) and many other React setups. Here's how they are connected:

public/index.html

The public/index.html file serves as the template for your React application. It contains a div element with an id of "root":

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

This div is the entry point where your React components will be rendered.

src/index.js

The src/index.js file is the JavaScript entry point for your React application. It imports the React library and your root component (usually App.js). The ReactDOM.render() function is then used to render this root component into the div with id="root" in public/index.html.

Here's a example:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

The Build Process

When you run npm start or yarn start, Webpack starts a development server and performs the following steps:

It starts by looking at src/index.js as the entry point.
It then traverses through all the imported files and dependencies, bundling them together.
Webpack injects the bundled JavaScript into public/index.html, specifically into the div with id="root".

Result

The final output is a dynamically generated HTML file that includes your React components. This file is served to the browser, and because the bundled JavaScript is linked to the div with id="root", your React components appear as expected.

PWA settings

The manifest.json file in a React project (or any web project) is used for configuring Progressive Web App (PWA) settings. A Progressive Web App is a web application that can be installed on a user's device and run offline, providing a more native-app-like experience. The manifest.json file allows you to define how your app appears when installed, including the icons, display mode, and background color.

Here's a breakdown of some common properties you might find in a manifest.json file:

Common Properties

name: The name of the application.
short_name: A shorter name for the application, used where space is limited.
description: A brief description of what the application does.
start_url: The URL that opens when the app is launched.
display: Specifies the browser UI to show when the app is launched (e.g., "standalone" to hide the browser UI).
background_color: The background color of the splash screen that shows when the app is launched.
theme_color: The color of the toolbars.
icons: An array of image files that can be used as icons for the app on the home screen, splash screen, etc.

Sample

Here's a simplified example of what a manifest.json file might look like:

{
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "description": "An awesome app that does awesome things.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Following best practices and new technologies, understanding the role of the manifest.json file in creating PWAs could be particularly useful. PWAs are becoming increasingly popular for delivering high-quality, offline-capable experiences on the web.

The src/reportWebVitals.js file is an optional utility that's included by default when you create a new React application using Create React App (CRA). This file is used for measuring and reporting on various web vitals, which are metrics related to the performance, reliability, and user experience of your application.

Robots configuration

The public/robots.txt file is a standard used by websites to communicate with web crawlers and other automated agents, like search engine bots. This file defines which parts of your website should be crawled or not, providing the crawlers with directives, "allow" or "disallow", to specify which paths can or cannot be retrieved. If you're familiar with the concept of web scraping or SEO (Search Engine Optimization), robots.txt plays a crucial role in these areas.

Structure

The structure of a robots.txt file is quite simple. Here's a basic example:

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow: /private/
Allow: /public/

User-agent: Specifies the web crawler to which the rule applies. The asterisk (*) means it applies to all web crawlers.
Disallow: Tells the web crawler not to crawl or access the specified URL path.
Allow: Tells the web crawler that it can access the specified URL path.

Location

The robots.txt file must be placed in the root directory of your website, which is why it's located in the public/ folder in a Create React App project. When the app is built, this file is moved to the root of the build/ folder, making it accessible at http://yourdomain.com/robots.txt.

Importance

While the robots.txt file is optional, it's a good practice to include it for the following reasons:

SEO: Properly configured, it can help search engine bots understand which parts of your site to index.
Performance: By preventing bots from crawling irrelevant or resource-intensive parts of your site, you can save server resources.
Privacy: You can prevent the crawling of sensitive parts of your website.

The robots.txt file can be beneficial, especially if you're involved in the architectural decisions for web applications or if you're keen on optimizing for search engines.

Web Vitals

Web Vitals are a set of performance metrics that Google recommends for a healthy website. They include:

Largest Contentful Paint (LCP): Measures the time it takes for the largest content element to be rendered on the screen.
First Input Delay (FID): Measures the time it takes for the browser to respond to the user's first interaction.
Cumulative Layout Shift (CLS): Measures the visual stability of your page.

How Does `reportWebVitals.js` Work?

The reportWebVitals.js file uses the web-vitals library to measure these metrics. By default, it logs them to the console in development mode, but you can easily send them to a backend or third-party service for further analysis.

Here's a simplified example of what the reportWebVitals.js file might look like:

const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

How to Use It?

In your src/index.js file, you'll find a line that imports and calls this function:

import reportWebVitals from './reportWebVitals';

// ... (ReactDOM.render and other code)

reportWebVitals();

You can customize the reportWebVitals function to send the metrics to a backend service for monitoring. This is particularly useful for understanding the real-world performance of your application.

Optional but Useful

While reportWebVitals.js is optional and you can remove it without affecting the core functionality of your React app, it can be a valuable tool for performance optimization.

Starting point of React​

Including index.js into index.html​

public/index.html​

src/index.js​

The Build Process​

Result​

PWA settings​

Common Properties​

Sample​

Robots configuration​

Structure​

Location​

Importance​

Web Vitals​

How Does reportWebVitals.js Work?​

How to Use It?​

Optional but Useful​