Generate React CLI
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 types (read more). 🎉
- Now supports custom component 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 feature name. We feel this approach provides a better developer experience.
You can run it using npx like this:
npx generate-react-cli component Box
(npx is a package runner tool that comes with npm 5.2+)
When you run GRC 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:
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
You can also override some of the GRC component config rules using one-off commands. So for example, let's say you have set withTest to be
true in the
component.default 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 that you have set in the GRC config file under
|Options||Description||Value Type||Default Value|
|--path||Value of the path where you want the component to be generated in (e.g. src/components).||String||
|--type||You can pass a custom component type that you have configured in the GRC config file that has its own set of component config rules. Read more about custom component types.||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||
Custom component types:
By default, GRC will use the
component.default configuration rules when running the component command out of the box.
What if you wanted to generate other types of components that have their own set of config rules (e.g., page or layout)?
You can do so by extending the generate-react-cli.json config file like this.
Now you can generate a component with your custom component types like this:
npx generate-react-cli component HomePage --type=page
npx generate-react-cli component BoxLayout --type=layout
You can also pass the same options to your custom component types as you would for the default component type.
Custom component templates
You can also create your own custom templates that GRC can use instead of the built-in templates that come with it. We hope this will provide more flexibility for your components that you want to generate.
There is an optional
customTemplates object that you can pass to the
component.default or any of your custom component types within your generate-react-cli.json config file.
Example of the
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 object within your generate-react-cli.json config file:
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, GRC will default to using the built-in templates it comes with.
Example of a custom component template file:
// templates/component/component.jsimport React from 'react';import styles from './TemplateName.module.css';const TemplateName =<div = ="TemplateName"><h1>TemplateName component</h1></div>;;
Important - Make sure to use the
TemplateName keyword in your templates. GRC will use this keyword to replace it with your component name.
Example of a custom test template file:
// templates/component/test.jsimport React from 'react';import ReactDOM from 'react-dom';import TemplateName from './TemplateName';;
Generate React CLI is open source software licensed as MIT.