Common Project Structor of React Project
2887
Common Project Structure of React Project
Creating a clear and organized file structure is crucial for maintaining a React.js project. Here’s a commonly used structure along with some naming conventions:
/my-react-app
/public
index.html
favicon.ico
/src
/assets
/images
/styles
App.css
index.css
/components
/Header
Header.js
Header.css
/Footer
Footer.js
Footer.css
/Sidebar
Sidebar.js
Sidebar.css
...
/pages
/Home
Home.js
Home.css
/About
About.js
About.css
/Contact
Contact.js
Contact.css
...
/services
api.js
App.js
index.js
package.json
README.md
âĒ public: This directory contains the public assets of the application, such as HTML files, images, and the favicon.
-
- src: This directory contains all the source code for the React application.
- assets: This directory holds static assets like images and stylesheets.
- components: This directory contains reusable React components. Each component typically has its own folder containing the component file (e.g., Header.js) and, if needed, its associated styles.
- pages: This directory contains top-level components representing different pages/routes of the application. Each page can have its own folder containing the component file and associated styles.
- services: This directory contains modules for interacting with external services such as APIs.
- App.js: The main component that acts as the entry point of the application.
- index.js: The file responsible for rendering the React application into the DOM.
- package.json: This file contains metadata about the project and its dependencies.
- README.md: This file contains information about the project, how to set it up, and other relevant details.
As for naming conventions:
- Components: Use PascalCase for component names (e.g., Header, Footer).
- Files: Use camelCase for file names (e.g., Header.js, Footer.css).
- Pages: Name page components according to the page they represent (e.g., Home.js, About.js).
- Stylesheets: Use camelCase for file names and include the .css extension (e.g., Header.css).
- Services: Use camelCase for file names (e.g., api.js).
Latest posts by Rajesh Tak (see all)
- Common Project Structor of React Project - March 9, 2024