Generating React Boilerplate codes

Motivation

I always get annoyed with the fact that almost every project you do on React usually needs Redux for state management and you need lot of boilerplate code for redux to work, with types, actions, actionCreators, reducers. And on top of that if we want to handle side effects we take the obvious choice redux-sagas. As we keep on adding new libraries and middleware, the amount of code you have to write for one simple feature to work keeps increasing.

I did a project recently, which was way behind the schedule and there we were writing all those boilerplate code repeatedly, this slowed us down a lot. So, I thought why not automate all this process of generating boilerplate code with necessary names, and proper imports, exports in different places, which lead to me building react-codegen. 

What is React-Codegen?

React-codegen is a interactive CLI tool that scaffolds the most common patterns in react. To put it simply it generates the redux, redux-saga, views, routes structure for you. Along with that it will help you configure redux store, attach middleware redux-saga, redux-logger and install missing dependencies.

How to use?

Start by globally installing the CLI using

yarn add -g react-codegen

Once you install the CLI, you should be able to use it anywhere in your project. So, go to the project root folder and run:

react-codegen init

When you run init, it will check the package.json file in your project for dependencies and if any of the dependencies are missing it will install it. Then it will check if you have jest, enzyme setup. If there is no setupFile present it will generate a setupTests.js file inside src of your project. Now you are ready to generate the files. At your root of your project run:

react-codegen

It will ask you few questions, that first one is the name of the feature (Try to put the name in Proper Case with first letter Capital and other small). After that it will check for the Routes file / store file based on your choice. If any of these are missing it will generate necessary configuration and files for them to work properly.

For the sake of the example, create on view and one redux. Once done let’s go to App.js and attach everything. You can simply paste this code:

import React, { Component } from "react";
import { Provider } from "react-redux";
import ConfigureStore from "./store/store";
import Routes from "./routes";
 
const store = ConfigureStore();
 
class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Routes />
      </Provider>
    );
  }
}
 
export default App;

This code basically imports the ConfigureStore function exported by the store configuration automatically generated earlier and Routes folder. We combine them here and wrap it with Provider for redux.

If you go run your app now you can go to the routes and see everything works perfectly. The routes are always the lowerCase of the feature name. for e.g you put Users as the name for feature then the route will be /users. Go to the Users folder inside src/view . You can see that it has Users.js and Users.test.js files. The test file includes a basic snapshot testing for the component. To check the routes go to routes.js inside src folder. Whenever you generate views it will automatically create route for it.

For the redux part you can find all the code in store folder. Considering Users is the name of feature the files it is going to generate are: user.meta.js, user.meta.test.js, user.reducer.js, user.reducer.test.js, user.saga.js, user.saga.test.js, store.js, middlewares.js.

You can at this point realize how much time it takes to write this much of boilerplate code without errors. With react-codegen it takes few seconds.

You can tell me about how much this helps you, and things that you think will be good addition to this project.