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.