Skip to main content

React Redux Application Structure, Architecture and React Folder Structure Best Practices

React Redux Application Structure, Architecture and  React Folder Structure Best Practices:

There some questions comes our mind when we are going to create a new react redux application structure from scratch.
  • What folder structure should be followed especially when we are implementing a large react redux application.
  • How to connect react with redux 
  • What should be the naming convention of folder and react js files.
  • What are the best practices of react redux project structure.
The structure might be different for each of us but I am sharing the standard react redux application structure which is followed by most of the UI developers in IT industry.

high level react redux application structure
High Level React Redux Application Architecture

There are many folders and files in above application screen shot, let discuss one by one. The application name is REACTWEBAPP and folders are config, public, script, server, src, reducers, sagas, store and package.json.

Config: react redux application configurations


react redux application configurations
React Redux Server Configurations

Config folder is used for application configurations. There are many files which can we create in this config folder i.e. env.js, jest.js, path.js, polyfills.js, webpack.config.dev.js, webpack.config.prod.js, and webpackDevserver.config.js.

env.js is used to environment setup, which port will be used, in which environment app will run development or production. This kind of configuration we can do in the env.js file.

path.js is used to mentioned all the path so that we can used in all configuration files and jest.js file is used for unit testing configuration.

polyfills.js is used to include some polyfills which are kind of support library to run the application on the browser on which it doesn't support.

webpack.config.dev.js file is used for development environment configurations, in this file we mention what will be the entry point of application to start, how to load all the loaders, how to create bundle file of application etc.

webpack.config.prod.js file is used for production environment configurations, in prod env, all the configuration will be done whatever we did in dev env and some extra configuration also done like bundle minification, uglify etc.

webpackDevserver.config.js file is used for dev server configuration like hot reloading. Due to hot reloading code will build and the page will refresh in the browser automatically.

React Redux Folders Importance or Use: how can you use each folder

react redux folder structure 2017-2018
React Redux Configurations

Public folder is used to have some files like index.html, favicon icon, and manifest etc.

Script folder is used to application build and to runapplication  related files. There are some files which are used in script folder i.e. build.js, start.js, and test.js. Build.js file is used to build the application, start.js file is used to configuration to start application, and test.js file is used to run unit test case.

Server: server configurations:

Server folder is used to server related configuration, here I am using some folders like cache, mock, util. Cache folder is having cache related file, mock folder have mock json files to get the mock data and render in react component, and util folder is used to have some common files.

Reducers folder is used to create reduces files. Reducer we will discuss later in details in next post.

Sagas folder is used to create saga file. Saga is used as middleware in redux. It's new, most popular and advanced topic in redux. It's a replacement of redux-thunk, having lots of features which are not available in redux-thunk. Saga we'll discuss later in details in coming post.

Store folder is used to create a redux store which is the backbone of redux or we can say main part of redux. In redux, we have a single store in application to handle all the data flow. This store topic we'll discuss later in details.

Src: source folder structure

react redux source code folder structure
Source (src) folder structure


Src (source) folder is the main folder of any application in which all the source code will be there. Here we have many folders inside src folder like app, components, and module and each folder further have some other folder.

Apps folder is used to having a assets folder in which we can have images, font, and global level CSS file. In apps folder, we can have module level configurations. Suppose there are more than one modules what you want you want to build the application only for an active module, not whole application code, this kind of configuration we can do by categorized the modules.


Modules folder is used to separate a large application into modules so that It can be easy to maintainability. Here we have a module marketing in which folder we have further folder and files. There are some folders and files i.e components, containers, actions.js, api.js, reducers.js, sagas.js, selectors.js, types.js, and index.js.

Components folder is used to having components, we should always follow to break a large component into the small components. A component will call in container and container will connect with redux. There are mainly two types components stateless and stateful component. We'll discuss later what is stateless and stateful component.

Containers folder is used to connect react components and container connect with reducer. We'll call the actions and mapStateToProps. We'll discuss later in details in coming post.

Package.json file is used to entries of dependencies and application configurations. I'll cover all the things of package.json in details in next post.


Points to be noted:
  •  Application folder name should be followed in camelCase like accountDepartment
  • Components folder and file name should be in PascalCase like folder InputBox and file InputBox.js
  •  React component class name should be followed in Pascalcase like class InputBox

Conclusion: In this post we learned how to create React Redux application architecture, folder structure, and React structure best practices. We also learned about each and every folder and file what is the use of that folder and file. Learned how to build website with react, this is important for react js developer.
I explained all the terms of my knowledge, in case I missed something or need to explain more please comment me.
Please share and subscribe this post to help others and be connected to me for the more interesting post.
Thanks to all of you, have a good day...

Comments

  1. The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
    website development

    ReplyDelete

Post a Comment

Thanks for visiting blog. Have a good day.

Popular posts from this blog

React Redux Tutorials: React Redux Data Flow and Redux Lifecycle Methods With Examples

React Redux Data Flow and Redux Lifecycle Methods Overview What is Redux and why do we need Redux Redux is an open source JavaScript library which is designed for maintaining application state. Redux JS is a powerful and popular library nowadays. The command to install Redux library npm install redux --save . Nowadays JavaScript single-page applications are very popular and powerful. As the requirements for single-page applications have become complicated, our code must manage more state than ever before. This state can include server responses and cached data, as well as locally generated data that has not yet been persisted to the server. Front-end state is also increasing in complexity, as we need to manage active routes, selected tab, spinners, pagination controls etc. That's why we need Redux. click here to learn React Redux Architecture, folder structure. Three Principles of Redux: Changes are made with pure functions You write pure reducers to specify

Reactjs Environment Setup Step by Step for Beginners and React JS Developer

ReactJS Overview: What is ReactJS , How to build website with react ReactJS is a JavaScript library developed by Facebook . It is used for handling the view layer for the website and mobile application . ReactJS is the most popular library in 2018 to build website with react , it helps to create responsive and fast performance application.  The latest version of  reactjs is v16 in which Facebook team added many new features. Advantages of ReactJS : ReactJS can be used at client side as well as server side, compatible with other frameworks. It uses virtual DOM which is a JavaScript object, this will improve application performance since DOM is faster than regular DOM. React component and data pattern improve readability, maintainability, and scalability which help to maintain a large application. ReactJS Library Limitations: ReactJS covers only view layer of the application not data flow layer. That’s why we are dependent on other libraries to build a website