🌟 We are Open Source! Check out our repository on GitHub

React.js Project Structure

A scalable and maintainable folder structure for React.js applications

File Structure

  • src
    • index.js
    • App.js
    • components
      • Header.js
      • Footer.js
    • pages
      • Home.js
      • About.js
    • assets
      • logo.svg
      • styles
        • index.css
  • public
    • index.html
    • favicon.ico
  • package.json
  • README.md
  • .gitignore

Directory Structure Explanation

src/

This folder contains the main source code for the React application. It now includes additional directories for better organization as the project grows.

src/index.js

The entry point of the React application. This file renders the root component (usually App) and attaches it to the DOM.

src/App.js

The root component of the application. It typically includes the main layout and routing logic.

src/components/

This folder contains reusable React components. Components like Header.js and Footer.js can be used across different pages of the application.

src/pages/

This folder contains components that represent entire pages or views in your application. Each file typically corresponds to a route in your application.

src/assets/

This folder is used for storing static assets like images, fonts, or global styles that will be processed by the build tool.

src/assets/styles/

This subfolder in the assets directory is used for global styles. The index.css file can contain application-wide CSS rules.

public/

This folder contains static assets that are served directly. It includes the main HTML file and other assets like the favicon.