File Structure

1. Default React Project Structure

After running npx create-react-app my-app, the generated project will have the following structure:

my-app/
│── node_modules/
│── public/
│── src/
│── .gitignore
│── package.json
│── README.md

2. Understanding the Key Folders & Files

a) `node_modules/` Folder

Contains all the installed dependencies and libraries for the React app.
Automatically generated when you run npm install.
Should not be modified manually.

b) `public/` Folder

Stores static assets like images, icons, and the main index.html file.
The key files inside public/ are:
- index.html: The main HTML file where the React app is injected.
- favicon.ico: The site’s favicon (icon in the browser tab).
- manifest.json: Metadata for Progressive Web Apps (PWA).

📌 Example: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div> <!-- React app gets injected here -->
</body>
</html>

c) `src/` Folder (Main Codebase)

This is where the React components, styles, and logic are written. The key files include:

1. `index.js`

The entry point of the application.
Renders the main component (App.js) into the root div in index.html.

📌 Example: index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

2. `App.js`

The main component of the application.
Typically contains the initial UI structure.

📌 Example: App.js

import React from "react";

function App() {
  return (
    <div>
      <h1>Welcome to My React App</h1>
    </div>
  );
}

export default App;

3. `App.css`

Contains styling for the App.js component.

4. `components/` Folder (Best Practice)

It’s a good practice to create a components/ folder inside src/ for reusable UI components.

📌 Example: src/components/Header.js

import React from "react";

function Header() {
  return <h2>This is the Header Component</h2>;
}

export default Header;

📌 Now import it inside App.js:

import Header from "./components/Header";

function App() {
  return (
    <div>
      <Header />
      <h1>Welcome to My React App</h1>
    </div>
  );
}

d) `.gitignore` File

Tells Git which files and folders to ignore when pushing code to a repository.
Example of ignored files:

node_modules/
.env
build/

e) `package.json` File

Contains metadata about the project, including dependencies.
Lists all installed npm packages for the React app.

📌 Example snippet from package.json:

{
  "name": "my-app",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "scripts": {
    "start": "react-scripts start"
  }
}

3. Best Practices for Organizing Files

To keep the project clean and maintainable, follow these best practices:

✅ Create a components/ folder to store reusable components.
✅ Use a pages/ folder if the app has multiple pages (e.g., Home, About, Contact).
✅ Keep assets (images, fonts, etc.) inside src/assets/ for better organization.
✅ Use separate CSS files for styling each component.

4. Conclusion

The default React file structure organizes code, dependencies, and assets efficiently.
The src/ folder contains the main application logic with components and styles.
Following a structured folder approach makes the project scalable and easy to maintain.

REACT

1. Default React Project Structure

2. Understanding the Key Folders & Files

a) node_modules/ Folder

b) public/ Folder

c) src/ Folder (Main Codebase)

1. index.js

2. App.js

3. App.css

4. components/ Folder (Best Practice)

d) .gitignore File

e) package.json File