As one starts building his application in ReactJS, one needs to keep an eye on the complexity of application state management. As the application state tree grows with more nodes, the complexity to manage them also increases widely. So, we need a state management utility to manage our states effectively. Here will be using Redux, a library coupled with our ReactJS application for state management.

Pre-Requisite:

1. The package manager (npm, yarn) is installed in your system. (Download it from here, if not installed https://nodejs.org/en/download/ and follow the steps as guided).
2. Have some prior basic knowledge of Javascript and HTML.

So, we’ll first start with creating a new React project from scratch, and then we’ll integrate Redux into the application.

---

Create a new React App :

React

1. We will be using create-react-app (CRA), it just creates a frontend build pipeline, with all the necessary initial files ready for use.

_npx create-react-app <app-name>_

_e.g: npx create-react-app first-app_

2. This will create a readymade development environment with all the required dependencies installed and initial codebase to start with, as illustrated below.

We’ll be working under the src/ folder of my project directory.

3. Directories description -

a. public/ — It’s the root folder that gets dealt by the web server in the end. It contains all the files, which are present as it is when the application is built for production. It also contains the index.html file, which is the root HTML file of the application.

b. src/ — It’s the root folder for development purposes. All the dev files are present inside this folder.

c. node_modules/ — It contains all the dependencies installed for the application.

4. src/index.js acts as the script file for the public/index.html file.

5. For development purposes, we will be using a root js file, preferably App.js.

So, for demo purposes, we will be using an online dummy server like https://jsonplaceholder.typicode.com/posts, and we will be fetching and displaying the data on the screen just as shown below.

#front-end-development #redux #reactjs #react #react-redux #react native