Folder Structure in React

Today I learned about the folder/directory/file structure in a React JS project by jotting down the differences in creating a react app by using CRA & Vite.

#Note: I have only refered to npm as the package manager

To create a react app by CRA using npm:

npm create-react-app my-react-app

The file structure in CRA is:

my-react-app/
│
├── node_modules/         // Contains all the project dependencies
│
├── public/                // Static files
│   ├── index.html         // HTML entry point
│   └── favicon.ico        // Favicon
│
├── src/                   // Source code
│   ├── components/        // React components
│   ├── App.css            // Global styles
│   ├── App.js             // Main component
│   └── index.js           // Entry point
│
├── package.json           // Project configuration and dependencies
├── package-lock.json      // Version information for all the installed packages
├── README.md              // Project documentation
└── .gitignore             // Specifies intentionally untracked files to ignore in Git

To create a react app by Vite using npm:

npm create-vite@latest

then, choose React from the options list, following which you can choose JS or TS and then type in all the details about your app.

The file structure in Vite is:

my-react-app/
│
├── node_modules/         // Contains all the project dependencies
│
├── public/                // Static files
│   ├── index.html         // HTML entry point
│   └── favicon.ico        // Favicon
│
├── src/                   // Source code
│   ├── components/        // React components
│   ├── App.css            // Global styles
│   ├── App.jsx            // Main component
│   └── index.jsx          // Entry point
│
├── package.json           // Project configuration and dependencies
├── package-lock.lock      // Version information for all the installed packages (Yarn)
├── README.md              // Project documentation
└── .gitignore             // Specifies intentionally untracked files to ignore in Git

The following are my learnings that are applicable to both tools:

1. package.json :- this JSON(JavaScript Object Notation) file is a configuration file used in Node.js projects to manage various aspects of the project, such as specifying project dependencies, scripts to run tasks, and metadata about the project.
   In simple terms, you can think of package.json as a blueprint or a recipe book for your Node.js project. It contains information about what your project needs to run, including the packages it depends on, as well as instructions for running tasks like starting the project, building it for production, or running tests.
   Here are some key components of package.json:

   • Name and Version: Specifies the name and version of your project.

   • Dependencies: Lists the packages (libraries or modules) that your project depends on. These packages are required for your project to work correctly.

   • DevDependencies: Similar to dependencies but contains packages that are only needed during development, such as testing frameworks or build tools.

   • Scripts: Defines custom scripts that can be run using npm or yarn commands. These scripts can perform various tasks like starting the project, building assets, running tests, etc.

   • Metadata: Contains additional metadata about the project, such as author, license, description, keywords, etc.

2. node_modules :- this is a directory that holds all the dependencies that are essential to the project and are mentioned in the package.jsonfile. These dependecies are automatically added in here after they are installed using a package manager.
   For example: react, call, bind, etc.

3. .gitignore :- this file is like a guide for git to mark which files are to be ignored or not to be added for pushing to the remote repo. We can simply specify the name alongwith its path relative to the project folder.

4. package-lock.json :- it is similar to package.json but it contains the locked version of the dependencies that are stable for the app to run. If yarn was used then yarn.lock would have played a similar role.

5. public :- this folder in a react project typically contains static assets that are served directly to the client without any processing. These assets are accessible to users and can include files such as HTML, CSS, images, fonts, and other media files.
   While mentioning any source link in the code we can simply just refer to the file residing in the public folder by using /{filename.type}
   For illustration: <img src="/planets.png" alt=""/>

6. src :- it typically contains the source code files of the application, including JavaScript or TypeScript files, CSS or SCSS files, and other assets that need to be compiled or processed before deployment.

Now, it was time for me to understand which files are the entry point to the react app.

1. index.html :- In a React application, the index.html file serves as the main HTML file that is loaded by the browser when a user visits your application. It acts as the entry point for the React application and typically resides in the "public" directory if CRA is used or it can reside in the main folder space of the project if Vite is used.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My React App</title>
    </head>
    <body>
        <div id="root">
        <!-- This is where the React application will be rendered -->
        </div>
    </body>
    </html>
   

2. index.js or main.jsx :- we know that React uses its virtual DOM and looks up to the actual DOM for any changes and accordingly renders only that specific change. In that context, at first to create th root of the virtual DOM this index.js (if CRA is used) or main.jsx (if Vite is used) gives us the functionality.

   index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
   
    const root=document.getElementById('root');
    root.ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    );
   

   main.jsx

    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import App from './App.jsx'
   
    ReactDOM.createRoot(document.getElementById('root')).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    )
   

   Here, StrictMode is optional but is a good practice since it wraps everything in a safe mode.

3. App.jsx :- It is a commonly used filename for the main component of your application. It represents the top-level component that encapsulates the entire application's structure and functionality.

Social handles:
LinkedIn
Github
Twitter