generate-react-cli

Generate React CLI

Why?

To help speed up productivity in React projects and stop copying, pasting, and renaming files each time you want to create a new component.

A few notes:

• Now supports custom component commands (read more). 🎉
• Now supports custom templates (read more). 🎉
• Supports React TypeScript projects.
• Supports two different component testing libraries - Testing Library and Enzyme - that work with Jest. We assume that you have these libraries already configured in your React project.
• It follows grouping by feature 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.

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

(npx is a package runner tool that comes with npm 5.2+ and higher)

Config File

When you run generate-react-cli within your project the first time, it will ask you a series of questions to customize the cli for your project needs (this will create a "generate-react-cli.json" config file).

Example of the generate-react-cli.json config file:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "path": "src/components",
    "withLazy": false,
    "withStory": false,
    "withStyle": true,
    "withTest": true
  }
}

Custom component commands:

By default, GRC comes with one component command out of the box.

What if you wanted to generate components with your own custom commands, like for example page or layout that have their own set of component config rules?

You can do so by extending the generate-react-cli.json config file like this.

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "path": "src/components",
    "withLazy": false,
    "withStory": false,
    "withStyle": true,
    "withTest": true
  },
  "page": {
    "path": "src/pages",
    "withLazy": true,
    "withStory": false,
    "withStyle": true,
    "withTest": true
  },
  "layout": {
    "path": "src/layout",
    "withLazy": false,
    "withStory": false,
    "withStyle": false,
    "withTest": true
  }
}

Make sure to include the required properties listed below when creating the custom component commands. Otherwise, GRC will not register them as a custom component command.

The required properties are as follows:

Options	Description	Value Type
--path	Value of the path where you want the component to be generated in (e.g. src/components).	String
--withLazy	Creates a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting) with this component.	Boolean
--withStory	Creates a corresponding (storybook) story file with this component.	Boolean
--withStyle	Creates a corresponding stylesheet file with this component.	Boolean
--withTest	Creates a corresponding test file with this component.	Boolean

Once you have done that, you should be able to run the custom component commands like this:

  npx generate-react-cli page HomePage

  npx generate-react-cli layout BoxLayout

You can also pass the same options to your custom component commands as you would for the default component command that comes with GRC.

Custom Templates

You can now create custom templates that Generate React CLI can use instead of the built-in templates that come with it. We hope this will provide more flexibility for your components and pages you want to generate.

Both the component and page properties (within the generate-react-cli.json config file) can accept an optional customTemplates object property.

Example of the customTemplates object:

"customTemplates": {
  "component": "templates/component.js",
  "lazy":  "templates/lazy.js",
  "story":  "templates/story.js",
  "style": "templates/style.scss",
  "test":  "templates/test.js"
},

The keys represent the type of template, and the values are the paths that point to where your custom template lives in your project/system.

Example of using the customTemplates property in the generate-react-cli.json config file:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "customTemplates": {
      "component": "templates/component/component.js",
      "style": "templates/component/style.scss",
      "test": "templates/component/test.js"
    },
    "path": "src/components",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  },
  "page": {
    "customTemplates": {
      "test": "templates/page/test.js"
    },
    "path": "src/pages",
    "withStyle": true,
    "withTest": true,
    "withStory": false,
    "withLazy": true
  }
}

Notice in the page.customTemplates that we only specified the "test" custom template type. That's because all the custom template types are optional. If you don't set the other types, the CLI will default to using the built-in templates it comes with.

Example of a custom component template file:

// templates/component/component.js

import React from 'react';
import styles from './TemplateName.module.css';

const TemplateName = () => (
  <div className={styles.TemplateName} data-testid="TemplateName">
    <h1>TemplateName component</h1>
  </div>
);

export default TemplateName;

Important - Make sure to use the TemplateName keyword in your templates. The CLI will use this keyword to replace it with your component name.

Example of a custom test template file:

// templates/component/test.js

import React from 'react';
import ReactDOM from 'react-dom';
import TemplateName from './TemplateName';

it('It should mount', () => {
  const div = document.createElement('div');
  ReactDOM.render(<TemplateName />, div);
  ReactDOM.unmountComponentAtNode(div);
});

Usage

Generate Component

  npx generate-react-cli component Box

This command will create a folder with your component name within your default (e.g. src/components) directory, and its corresponding files.

Example of the component files structure

|-- /src
    |-- /components
        |-- /Box
            |-- Box.js
            |-- Box.css
            |-- Box.test.js

Options

You can also override some of the generate-react-cli default component config options using one-off commands. So for example, let's say you have set withTest to be true in the component config property. You can override it 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.

Options	Description	Value Type
--path	Value of the path where you want the component to be generated in (e.g. src/components).	String
--withLazy	Creates a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting) with this component.	Boolean
--withStory	Creates a corresponding (storybook) story file with this component.	Boolean
--withStyle	Creates a corresponding stylesheet file with this component.	Boolean
--withTest	Creates a corresponding test file with this component.	Boolean

License

Generate React CLI is open source software licensed as MIT.