
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
generate-react-cli
Advanced tools
To help speed up productivity in React projects and stop copying, pasting, and renaming files each time you want to create a new component.
Create React App and Gatsby do a great job of initializing new projects, setting up the development environment, and optimizing the app for production use. Still, they don't have a way to generate new components similar to what Angular CLI offers, and that's because they both try to stay as non-opinionated as possible and allow the developer to make those decisions. One example would be grouping by features vs. grouping by file type when creating components.
Generate React CLI focuses on generating new components by running a simple command. It also doesn't care if you run it in an existing CRA, Gatsby, or a custom React project you built on your own.
It does, however, have an opinion on how component files are structured. 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.
A few notes:
npm i -g generate-react-cli
generate-react component Box
npx generate-react-cli component Box
(npx is a package runner tool that comes with npm 5.2+ and higher)
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).
{
"component": {
"path": "src/components",
"css": {
"preprocessor": "css",
"module": false,
"withStyle": true
},
"test": {
"library": "Testing Library",
"withTest": true
},
"withStory": false,
"withLazy": false
},
"usesTypeScript": false
}
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.
|-- /src
|-- /components
|-- /Box
|-- Box.js
|-- Box.css
|-- Box.test.js
You can also override the generate-react-cli default config options for one-off commands. So for example, let's say in one of your projects you have set withTest to be true
in your generate-react-cli config file as your default. You can override it for that one-off command like this:
npx generate-react-cli c Box --no-withTest
Or vice versa, if you have set withTest to be false
you can do this:
npx generate-react-cli c Box --withTest
Otherwise, if you don't pass any options, it will just use the default ones from the generate-react-cli config file you have set.
Parameter | Description |
---|---|
--path | Value of the path where you want the component to be generated in (e.g. src/pages). |
--withStyle | Creates a corresponding stylesheet file with this component. |
--no-withStyle | Creates component without the stylesheet file. |
--withTest | Creates a corresponding test file with this component. |
--no-withTest | Creates a component without the test file. |
--withStory | Creates a corresponding story file with this component. |
--no-withStory | Creates component without the story file. |
--withLazy | Creates a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting) with this component. |
--no-withLazy | Creates a component without the lazy file. |
2.0.0 (2019-12-13)
add TypeScript support (8d13018)
make stylesheets optional by adding “withStyle” option
improve developer experience when updating (“generate-react-cli.json”) the config file. The CLI will only inquire about the new missing properties in the config file the next time generate-react-cli is ran.
🎸 make sure user is running Node 8 or higher (fe5dba1)
FAQs
A simple React CLI to generate components instantly and more.
The npm package generate-react-cli receives a total of 5,481 weekly downloads. As such, generate-react-cli popularity was classified as popular.
We found that generate-react-cli demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.