ReactJs Tutorials
ReactJs Application Structure
open the project on Code editor. visual code editor.
In React application, there are several files and folders in the root directory. Some of them are as follows:
File name : index.php
node_modules: It contains the React library and any other third party libraries needed.
public: It holds the public assets of the application. It contains the index.html where React will mount the application by default on the element.
src: It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files. Here, the App.js file always responsible for displaying the output screen in React.
package-lock.json: It is generated automatically for any operations where npm package modifies either the node_modules tree or package.json. It cannot be published. It will be ignored if it finds any other place rather than the top-level package.
package.json: It holds various metadata required for the project. It gives information to npm, which allows to identify the project as well as handle the project?s dependencies.
README.md: It provides the documentation to read about React topics.
Directory Structure
Assets: it contains assets of our project. It consists of images and css files.
Layouts : it contains layouts to the whole project like header, footer, menu navigation etc. We can store the header, footer, or sidebar code here and call it.
Components :- Components are the building blocks of any react project. This folder consists of a collection of UI components like buttons, modals, inputs, loader, etc., that can be used across various files in the project.
Pages :- The files in the pages folder indicate the route of the react application. Each file in this folder contains its route. A page can contain its subfolder. Each page has its state and is usually used to call an async operation. It usually consists of various components grouped.
Middleware :- This folder consists of middleware that allows for side effects in the application. It is used when we are using redux with react. Here we keep all our custom middleware.
Routes :- This folder consists of all routes of the application. It consists of private, protected, and all types of routes. Here we can even call our sub-route.
Config :- This folder consists of a configuration file where we store environment variables in config.js. We will use this file to set up multi-environment configurations in your application.
Services :- This folder will be added if we use redux in your project. Inside it, there are 3 folders named actions, reducers, and constant subfolders to manage states. The actions and reducers will be called in almost all the pages, so create actions, reducers & constants according to pages name.
Utils :- Utils folder consists of some repeatedly used functions that are commonly used in the project. It should contain only common js functions & objects like dropdown options, regex condition, data formatting, etc.