DEV Community

Gyanendra Kumar Knojiya
Gyanendra Kumar Knojiya

Posted on • Originally published at gyanendraknojiya.Medium on

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

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.

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

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
Enter fullscreen mode Exit fullscreen mode

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

cd react-boilerplate
npm start
Enter fullscreen mode Exit fullscreen mode

2. Add eslint to your project

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

npm install -g eslint
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

"extends": ["airbnb", "plugin:prettier/recommended"]
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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)\""
Enter fullscreen mode Exit fullscreen mode

3. Add Bootstrap, popper.js & Jquery

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

npm install bootstrap popper jquery
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
...
Enter fullscreen mode Exit fullscreen mode

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

buy a coffee for me https://www.buymeacoffee.com/gyanknojiya

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

Thanks for reading this article.

Top comments (0)