React Project Structure Walkthrough

After setting up a React project using Vite or Create React App (CRA), understanding the project structure is essential. This helps you organize code, manage components, and maintain a scalable project.

Typical React Project Structure

Here’s a common React project layout:

my-app/
├── node_modules/        # Installed dependencies
├── public/              # Static files like index.html, images, icons
├── src/                 # Source code folder
│   ├── assets/          # Images, fonts, icons
│   ├── components/      # Reusable UI components
│   ├── pages/           # Page-level components
│   ├── App.jsx          # Main app component
│   ├── index.jsx        # Entry point of the React app
│   ├── styles/          # CSS or SCSS files
│   └── utils/           # Utility/helper functions
├── package.json         # Project metadata and dependencies
├── vite.config.js       # Vite configuration (if using Vite)
└── README.md            # Project documentation

Key Folders and Files Explained

1. public/

   Contains static files that won’t be processed by Webpack/Vite.

   Example: index.html, favicon, images.

2. src/

   The heart of your React project. All components, pages, styles, and logic go here.

3. components/

   Contains reusable UI components like buttons, headers, cards, and modals.

4. pages/

   Page-level components corresponding to routes in your app. Example: HomePage, AboutPage.

5. App.jsx

   The root component that acts as a container for all other components.

6. index.jsx

   The entry point where React is rendered into the DOM.

7. styles/

   Contains CSS or SCSS files for styling the application.

8. utils/

   Helper functions or utility scripts used across the app, such as API calls or data formatting.

Optional Folders

• hooks/ – Custom React hooks for reusable logic.
• context/ – For global state management using React Context API.
• services/ – For API requests and external service calls.

Example: index.jsx and App.jsx

index.jsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles/global.css';

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

App.jsx:

import React from 'react';
import Header from './components/Header';
import HomePage from './pages/HomePage';

function App() {
  return (
    <div>
      <Header />
      <HomePage />
    </div>
  );
}

export default App;