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
{
"usesTypeScript": false,
"usesCssModule": true,
"cssPreprocessor": "scss",
"testLibrary": "Testing Library",
"component": {
"path": "src/components",
"withStyle": true,
"withTest": true,
"withStory": true,
"withLazy": false
},
"page": {
"path": "src/pages",
"withStyle": true,
"withTest": true,
"withStory": false,
"withLazy": true
}
}
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/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 |
Generate Page
npx generate-react-cli page HomePage
This command will create a folder with your page name within your default (e.g. src/pages) directory, and its corresponding files.
Example of the page files structure
|-- /src
|-- /pages
|-- /HomePage
|-- HomePage.js
|-- HomePage.css
|-- HomePage.test.js
Options
You can also override some of the generate-react-cli default page config options using one-off commands. So for example, let's say you have set withTest to be true
in the page config property. You can override it like this:
npx generate-react-cli page HomePage --withTest=false
Or vice versa, if you have set withTest to be false
you can do this:
npx generate-react-cli page HomePage --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 page to be generated in (e.g. src/pages).
| String |
--withStyle |
Creates a corresponding stylesheet file with this page.
| Boolean |
--withTest |
Creates a corresponding test file with this page.
| Boolean |
--withStory |
Creates a corresponding story file with this page.
| Boolean |
--withLazy |
Creates a corresponding lazy file (a file that lazy-loads your page out of the box and enables code splitting) with this page.
| Boolean |
License
Generate React CLI is open source software licensed as MIT.