📌 React.js Project Structure

This document provides an overview of the folder structure and organization of our React.js v19 project using Vite.

---

📂 Project Structure

/my-react-project
|-- README.md               # Project documentation
|-- eslint.config.js        # ESLint configuration
|-- index.html              # Main HTML file
|-- package-lock.json       # Dependency lock file
|-- package.json            # Project dependencies and scripts
|-- public/                 # Static assets
|   `-- vite.svg            # Vite logo
|-- src/                    # Main source code
|   |-- App.jsx             # Root component
|   |-- assets/             # Static assets (e.g., images, icons)
|   |   `-- react.svg       # React logo
|   |-- components/         # Reusable UI components
|   |   |-- common/         # Common UI elements
|   |   |   |-- Button.jsx  # Reusable button component
|   |   |   `-- index.js    # Exports for common components
|   |   `-- ui/             # UI components
|   |       `-- index.js    # UI component exports
|   |-- configs/            # Configuration files
|   |   |-- api.js          # API configuration
|   |   `-- env.js          # Environment variables
|   |-- constants/          # Global constants
|   |   |-- api.js          # API endpoint constants
|   |   |-- index.js        # General constants
|   |   `-- route.js        # Route constants
|   |-- hooks/              # Custom React hooks
|   |   `-- useToTop.js     # Hook for scrolling to top
|   |-- language/           # Localization files
|   |   |-- en/             # English translations
|   |   |   `-- en.json     # English translation file
|   |   `-- vi/             # Vietnamese translations
|   |       `-- vi.json     # Vietnamese translation file
|   |-- layouts/            # Layout components
|   |   `-- layout.jsx      # Main layout component
|   |-- main.jsx            # Application entry point
|   |-- pages/              # Page components
|   |   |-- home/           # Home page
|   |   |   `-- index.jsx   # Home page component
|   |   `-- index.js        # Exports for pages
|   |-- router/             # Routing configuration
|   |   |-- privateRoute.js # Private route handling
|   |   `-- publicRoute.js  # Public route handling
|   |-- services/           # API services
|   |   `-- product.js      # Product-related API calls
|   |-- styles/             # Global styles
|   |   `-- global.css      # Global CSS file
|   `-- utils/              # Utility functions
|       `-- utils.js        # Helper functions
`-- vite.config.js          # Vite configuration

---

📜 Folder Explanations

🎯 src/App.jsx

• The root component of the application.

🎨 src/assets/

• Stores static assets such as images and icons.

🏗 src/components/

• Contains reusable UI components.
• common/ includes commonly used elements like buttons.
• ui/ includes UI-related components.

🔧 src/configs/

• Stores configuration settings such as API URLs and environment variables.

🌍 src/constants/

• Holds global constants like API endpoints and route names.

🔄 src/hooks/

• Custom React hooks for shared functionalities.

🌎 src/language/

• Contains language-specific translation files for localization.

📐 src/layouts/

• Defines layout components for structuring pages.

📄 src/pages/

• Page components for the application, such as the home page.

🛤 src/router/

• Manages application routing and navigation.

🔗 src/services/

• Handles API calls and data fetching.

🎨 src/styles/

• Global CSS styles for the application.

⚙ src/utils/

• Contains utility functions and helper methods.

---

🎯 Summary

This structure ensures our project is well-organized, scalable, and maintainable by separating concerns and following best practices.

🚀 Happy coding!