React JS boilerplate with Eslint, Redux toolkit, Bootstrap | React boilerplate 2022

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

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-boilerplatenpm start

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.

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": 12,
    "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.bundle.js';

4. Adding redux-toolkit

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

npm install @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'
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'
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.

https://github.com/gyanendraknojiya/react-boilerplate-with-eslint-redux-bootstrap

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

Thanks for reading this article.