ReactJS with Redux Router

In my previous post, I showed how to integrate Redux with ReactJS. In this post, we are going to implement routing with react-redux-router.
First, we need to install required node modules.

We must change our store accordingly.

Then we need to change index.js file to support routing functionality.

After that, we will add NavBar.jsx and Home.jsx.

Then change the app.js file like below.

Run the application.

You can find the source code in my GitHub repo.

ReactJS application with Redux

In my last post, I explained how to create a basic ReactJS application. In this post, I will explain how to integrate Redux with our application.
First, we need to install required npm packages.

Next, we will add a folder called reducers and inside that, we will create CourseReducer.js and StudentReducer.js files.

A reducer function needs two arguments state and action.

However, we need to initialize reducer function with our default state. Therefore, we need to modify our code in StudentReducer.js file.

Usually, redux application design is to have a single store. Thus, we will create store.js file inside store folder.

Next, we need to change index.js file like below.

After that, we need to modify CourseList.jsx file like below. connect is the function which integrates state management into React application.

We can further modify CourseList.jsx file like below.

Now, the StudentList.jsx file should look like below.

Use npm start command to run the application.

You can find the source code in my GitHub repo.

Basic ReactJS Application

In this post, I will create a basic ReactJS application.
First, create a ReactJS application using the following command.

After that add folders to the project.

Inside the components folder, add StudentList.jsx file and add the content like below.

In the same location, add CourseList.jsx file.

We need to style our UI appropriately. So that, change App.css file like below.

Then we need to change App.js file, which is inside the container folder like below.

Run the application using npm start command. And then you will see a screen like below.

You can find source code in my GitHub repo.