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 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).

e.g. generate-react-cli.json

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

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 config options for one-off commands. So 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 c Box --withTest=false

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

 npx generate-react-cli c 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/pages).	String
--withStyle	Creates a corresponding stylesheet file with this component.	Boolean
--withTest	Creates a corresponding test file with this component.	Boolean
--withStory	Creates a corresponding story file with this component.	Boolean
--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

License

Generate React CLI is open source software licensed as MIT.

Changelog

4.0.0 (2020-03-21)

⚠ BREAKING CHANGES

• 🧨 Generate React CLI requires Node 10 or higher

• 🤖 Generate React CLI requires Node 10 or higher (bd745f6)