🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

generate-react-cli

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

generate-react-cli

A simple React CLI to generate components instantly and more.

4.1.0
Version published
Weekly downloads
6.5K
-31.31%
Maintainers
1
Weekly downloads
 
Created

Generate React CLI

dependencies License

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.

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

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

FAQs

Package last updated on 20 Apr 2020

Did you know?

Socket

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.

Install

Related posts