When we create a React application using either Create React App or Vite, it initializes several default folders, including src, public, node_modules, and build/dist. Our primary focus is on the src directory, where we will explain its contents and the architecture of the files and folders within it.
The /src directory includes some of the directories which we explore in one by one.
/src
/common/components/hooks/layout/pages/reducers/store/utils/assets/commonPurpose: This directory is often used to store shared components that can be reused throughout the application.
Typical Files:
/FormFields/Formbuilder/Loader/componentsPurpose: This directory contains reusable UI components that can be utilized throughout the application.
Typical Files:
Button.jsx: A reusable button component with props for styling and behavior.Modal.jsx: A modal dialog component used for displaying information or forms./hooksPurpose: This directory is for custom React hooks that encapsulate reusable logic.
Typical Files:
useGetDataFromServer.js: A custom hook for fetching data from an API.useLogout.js: A hook for handling logout logic./layoutPurpose: This directory is used to define the overall layout components of the application, which can include shared layouts across different pages.
Typical Files:
MainLayout.jsx: A component that defines the main layout structure, including header, footer, and content area.SidebarLayout.jsx: A layout that includes a sidebar navigation menu./pagesPurpose: This directory contains components that represent different pages of the application, often mapped to routes in a router.
Typical Files:
HomePage.jsx: The main landing page of the application.LoginPage.jsx: A page for user login functionality.DashboardPage.jsx: A page for displaying user-specific information./reducersPurpose: This directory is for Redux reducers if the application uses Redux for state management. Reducers handle state changes based on dispatched actions.
Typical Files:
authReducer.js: A reducer for handling authentication state.errorReducer.js: A reducer for managing product-related data./storePurpose: This directory usually contains files related to the Redux store configuration.
Typical Files:
store.js: The main store configuration file, where you create and configure the Redux store./utilsPurpose: This directory is for utility functions that provide common functionalities and can be used throughout the application. utils can have many directories inside it like CommonFunctions , Settings , Constants and ValidatonSchema.
Typical Files:
/CommonFunctions : Functions that will be used throughout entire application./ValidatonSchema: Schema for validating user input./Settings: Settings of our application like theme settings , react query settings./Constants : Constants that will be used throughout application./assetsThe /assets directory in a React application is typically used to store static files that are not code but are needed for the application to function or for enhancing the user interface. Here’s an overview of what can be included in the /assets directory:
logo.png: The logo of the application.background.jpg: Background images used in the app.icons.svg: Icon files for various UI elements.Roboto-Regular.ttf: A font file used in the application.FontAwesome.woff: Font Awesome icons font file.Table of Contents