Schematics React

Schematics generators for React 🎊

Features

• 📜 Generates boilerplate
• 🎛️ Configurable
• 🛠️ Supports JavaScript & TypeScirpt
• 📦 Works with create-react-app
• 📌 Follows best pratices

Installation

• npm:

  npm install -g @angular-devkit/schematics-cli
  npm install --save-dev schematics-react

• yarn:

  yarn global add @angular-devkit/schematics-cli
  yarn add -D schematics-react

Usage

schematics schematics-react:<generator name> <arguments>

Available generators

Component

Creates a React component.

Example:

schematics schematics-react:component /src/components/myComponent

with alias:

schematics schematics-react:c /src/components/myComponent

Parameters

| Type | Name | Description | Default | |------|:----:|------------:|--------:| | required {string} | name | The name of the component. | none | | {string} | path | The path to create the component | none | | {string} | styleext | The file extension to be used for style files | 'css' | | {boolean} | noSpec | Specifies if a spec file is generated | false | | {boolean} | subfolder | Flag to indicate if a dir is created | false | | {boolean} | propTypes | Specifies if a propTypes used | false | | {boolean} | stateful | Specifies if a state used | false | | {boolean} | ts | Specifies whether to use TypeScript | false |

Functional component

Creates a React component.

Example:

schematics schematics-react:functional-component /src/components/myComponent

with alias:

schematics schematics-react:fc /src/components/myComponent

Parameters

| Type | Name | Description | Default | |------|:----:|------------:|--------:| | required {string} | name | The name of the component. | none | | {string} | path | The path to create the component | none | | {string} | styleext | The file extension to be used for style files | 'css' | | {boolean} | noSpec | Specifies if a spec file is generated | false | | {boolean} | subfolder | Flag to indicate if a dir is created | false | | {boolean} | propTypes | Specifies if a propTypes used | false | | {boolean} | ts | Specifies whether to use TypeScript | false |