Generate React CLI

I enjoy working on React projects, but one thing that gets in the way of staying productive is having to write or copy boilerplate code repetitively when creating new components.

Create React App and Gatsby do a great job of initializing new projects, setting up the development environment, and optimizing the app for production use. Still, they don't have a way to generate new components similar to what Angular CLI offers, and that's because they both try to stay as non-opinionated as possible and allow the developer to make those decisions. One example would be grouping by features vs. grouping by file type when creating components.

Generate React CLI, on the other hand, currently focuses on one thing, and that's generating new components by running a simple command. It also doesn't care if you run it in an existing CRA, Gatsby, or a custom React project you built on your own.

It does, however, have an opinion on how component files are structured. It follows grouping by feature, and that's because we believe when you look at a component, you should see all of its corresponding files (i.e., stylesheet, test, and component) under one folder with the component name. We feel this approach provides a better developer experience.

A great Medium post on how to structure a React project: "The 100% correct way to structure a React app (or why there’s no such thing)" by David Gilbertson

How to use Generate React CLI

Before you get started, make sure to have Node >= 8.10 and NPM >= 5.6 installed on your machine.

You can install it globally and run it using npm:

 npm i -g generate-react-cli
 generate-react component Box

Or you can just run it using npx like this:

 npx generate-react-cli component Box

When you run generate-react-cli within your project the first time, it asks you a series of questions to customize the CLI for your project needs (this creates a generate-react-cli.json config file in the root level of your project, as shown in the example below).

{
  "component": {
    "path": "src/components",
    "css": {
      "preprocessor": "css",
      "module": false,
      "withStyle": true
    },
    "test": {
      "library": "Testing Library",
      "withTest": true
    },
    "withStory": false,
    "withLazy": false
  },
  "usesTypeScript": false
}

Let's go over what these properties are in the config file.

path

The path of where your components get generated by default.

css

The corresponding stylesheet file for your component.

  • preprocessor: You may choose a preprocessor file format like scss or less if you don't want to use just css.
  • module: You can also make it a module stylesheet file by setting module property to true.
  • withStyle boolean value

test

The corresponding test file for your component.

  • library: It supports two component testing library templates Testing Library and Enzyme that work with Jest. We assume that you have these libraries already configured in your project.
  • withTest boolean value

withStory

The corresponding storybook file for your component. This is useful if you are using storybook in your project.

withLazy

The corresponding lazy file for your component. A file that lazy-loads your component out of the box and enables code splitting. So, for example, let's say you have a HomePage component and an AboutPage component that both have corresponding lazy files. You can use these lazy files like this:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage/HomePage.lazy';
import AboutPage from './pages/AboutPage/AboutPage.lazy';

const App = () => (
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/about" component={AboutPage} />
  </Switch>
);

export default App;

This way, these components get lazy-loaded when the respective routes are active, and they do not get included with your initial app bundle. This method improves your initial app load time and generally improves performance.

usesTypeScript

If you're using TypeScript in your React project, you can set the usesTypeScript property to true. This will put the CLI in TypeScript mode and will generate your components in TypeScript format.

You can always go back and update the generate-react-cli.json config file for your project at any time.

You can also override some of the component default options for one-off commands.

For example, let's say you have set withTest to be true in your generate-react-cli config file. You can override it for that one-off command like this:

 npx generate-react-cli component Box --withTest=false

Or vice versa, if you have set withTest to be false you can do this:

 npx generate-react-cli component Box --withTest=true

Otherwise, if you don't pass any options, it will just use the default values from the generate-react-cli config file you have set.

That's it! I hope you enjoy using the CLI. I plan on adding additional features in the future. Any feedback or feature requests are welcome. Please submit them here.

Thanks,

Armin

Learn Something New Everyday,
Connect With The Best Developers!

Sign Up Now!

& 500k+ others use Hashnode actively.

No Comments Yet