🌟 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
      • ui
        • Button.js
    • pages
      • Home.js
      • About.js
      • Dashboard.js
    • assets
      • logo.svg
      • styles
        • index.css
        • variables.css
    • hooks
      • useAuth.js
    • context
      • AuthContext.js
    • services
      • api.js
    • utils
      • helpers.js
  • public
    • index.html
    • favicon.ico
  • package.json
  • README.md
  • .gitignore
  • .env
  • jsconfig.json
  • .eslintrc.js

Directory Structure Explanation

src/

This folder contains the main source code for the React application. It now includes several additional directories for a more complex application structure.

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/components/ui/

This subfolder contains low-level UI components like buttons, inputs, etc., that are used across the application. These components form the building blocks for more complex components and pages.

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.

src/hooks/

This folder contains custom React hooks. These are reusable pieces of logic that can be shared across components.

src/context/

This folder contains React context providers. These are used for state management across the application.

src/services/

This folder contains service files, such as API calls or other external service integrations.

src/utils/

This folder contains utility functions and helper methods used throughout the application.

public/

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

.env

This file is used to store environment variables for the application. It's important for managing configuration across different environments.

jsconfig.json

This file is used to configure the JavaScript language service in your editor, providing better IntelliSense and module resolution.

.eslintrc.js

This file contains ESLint configuration for maintaining code quality and consistency across the project.