Understanding the Flow in a React Project Created with Create React App - Lession 2

When you create a new React project using create-react-app, the tool sets up a well-organized structure with everything you need to start building a React application. Here’s a breakdown of the main folders and files you’ll see in your project and how they interact:

Project Structure Overview

After running npx create-react-app my-app, your project directory (my-app) will look something like this:

node_modules/: Contains all the npm packages and dependencies your project needs.

public/: Contains the static files like HTML, images, and icons.

src/: Contains your JavaScript code, CSS styles, and other assets like images or fonts specific to your application.

package.json: Manages the project’s scripts, dependencies, and other metadata.

package-lock.json or yarn.lock: Automatically generated files which ensure consistent installations for project dependencies.

Detailed Flow Explanation

1. public/index.html:

This is the single HTML file in your application. It includes a div element with an ID of 'root'. This div is the entry point where your React app will be mounted.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

2. src/index.js:

This is where React 18’s new rendering logic comes into play. Instead of using ReactDOM.render, React 18 uses createRoot to handle the app’s rendering process. This method prepares your app for concurrent features in React.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container); // Create a root.

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

createRoot creates a root DOM node, which is the foundational element where your React component tree begins. This setup helps in managing the lifecycle of your application’s render state more efficiently, especially with concurrent capabilities enabled.

3. src/App.js:

The App.js file defines your primary React component, App. This component acts as the root component for your application’s component tree.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

This component is where you define the structure of your main application. It includes some basic elements like an image, a paragraph, and a link to help you start with the UI.

Conclusion

The introduction of createRoot in React 18 changes how the application is mounted to the DOM, offering more efficient, flexible, and scalable rendering capabilities. This flow—starting from public/index.html, passing through src/index.js, and then rendering the App component from src/App.js—demonstrates a modular and maintainable approach suitable for both small and large-scale applications.