React JS boilerplate with Eslint, Redux toolkit, Bootstrap | React boilerplate 2022
Tags: reactjstutorials, reactjsboilerplate, webdev, reactjsdevelopment
Published: 2021-11-13 15:45:46

---
title: React JS boilerplate with Eslint, Redux toolkit, Bootstrap | React boilerplate 2022
published: true
date: 2021-11-06 19:17:20 UTC
tags: reactjstutorials,reactjsboilerplate,webdevelopment,reactjsdevelopment
canonical_url: https://gyanendraknojiya.medium.com/react-js-boilerplate-with-eslint-redux-toolkit-bootstrap-react-boilerplate-2022-7c83eee1bcca
---

#### I’d like to share the most recent react JS boilerplate with you here. When you clone this repository, you’ll get redux, bootstrap, eslint, and material UI.

![](https://cdn-images-1.medium.com/max/1024/1*B6cdsUuZGw11gXW_XM-UEw.jpeg)

When starting a new project, we must finish all tasks, such as creating a project, installing eslint, bootstrap, and redux, and so on. It requires a substantial amount of time and effort. I’d like to share the most recent react JS boilerplate with you here. When you clone this repository, you’ll get redux, bootstrap, eslint, and material UI. You can start growing right immediately.

[https://github.com/gyanendraknojiya/react-boilerplate-with-eslint-redux-bootstrap.git](https://github.com/gyanendraknojiya/react-boilerplate-with-eslint-redux-bootstrap.git)

Here are the steps I took to create this boilerplate.-

### 1. Create a project using create-react-app

To begin, we must establish our project using the CRA template.-

```
npx create-react-app react-boilerplate
```

It is going to take some time. You can begin your project after it is completed.-

```
cd react-boilerplate
npm start
```

![](https://cdn-images-1.medium.com/max/1024/0*FWCKcYDHp_N0dQO3.png)

### 2. Add eslint to your project

To install the eslint linter, go to your terminal and type the following command.-

```
npm install -g eslint
```

Eslint linter will be installed globally on your system after it is finished. So that you can use it in a future project.

After that, we’ll need to set up eslint. Use the command in your terminal to create a configuration file right away-

```
npx eslint --init
```

It will inquire about your project’s settings.

![](https://cdn-images-1.medium.com/max/873/0*y6l8NWcZ2PweHt2a.png)

In your root directory, it will produce a  **.eslintrc.json** file.

I’d like to include the prettier (Code formatter) plugin as well. As result, eslint and prettier will work together.

```
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
```

We can now prettier the eslint configuration file once the installation is complete.

```
"extends": ["airbnb", "plugin:prettier/recommended"]
```

You must now include prettier in your  **.eslinitrc** file. After you’ve included everything, your file should look like this:

```
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 13,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": 0,
    "prettier/prettier": "error"
  }
}
```

Lint and format scripts can be included in the package.json as well-

```
"lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\""
```

### 3. Add Bootstrap, popper.js & Jquery

Use this command in your terminal to install bootstrap and Jquery using NPM-

```
npm install bootstrap popper jquery
```

Now, we need to import bootstrap CSS and JS in the index.js file.

```
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
```

### 4. Adding redux-toolkit

We need to install the redux toolkit and its dependencies using npm-

```
npm install [@reduxjs/toolkit](http://twitter.com/reduxjs/toolkit) react-redux
```

Then we’ll need to make a **store** and **slice**. We must additionally include **store** in the index.js file.

#### A demo slice configuration-

```
import { createSlice } from '[@reduxjs/toolkit](http://twitter.com/reduxjs/toolkit)';
const initialState = {
  amount: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.amount += 1;
    },
    decrement: (state) => {
      state.amount -= 1;
    },
    addAmount: (state, action) => {
      state.amount += action.payload;
    },
  },
});

export const { increment, decrement, addAmount } = counterSlice.actions;
export default counterSlice.reducer;
```

#### A demo store configuration

```
import { configureStore } from '[@reduxjs/toolkit](http://twitter.com/reduxjs/toolkit)';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: { counterReducer },
});

export default store;
```

Now we need to configure this store in the index.js file-

```
import { Provider } from 'react-redux';
import store from './redux/store';

...
<Provider store={store}>
   <App />
</Provider>
...
```

We can now use the redux states and actions that we’ve created now that we’ve completed.  
Our boilerplate is now finished. You can get it right here.

[GitHub - gyanendraknojiya/react-boilerplate-with-eslint-redux-bootstrap](https://github.com/gyanendraknojiya/react-boilerplate-with-eslint-redux-bootstrap.git)

buy a coffee for me [https://www.buymeacoffee.com/gyanknojiya](https://www.buymeacoffee.com/gyanknojiya)

If you have any queries, feel free to contact me- [https://gyanendra.tech/#contact](https://gyanendra.tech/#contact)

Thanks for reading this article.