@react-app-cli/core NPM

React App Cli (@react-app-cli/core)

Why?

To increase your productivity in React projects and stop copying-pasting files or folders each time you want to create a new component.

You can run it using npx:

  npx @react-app-cli/core create component --name Button --type common

or add into your project:

  yarn add --dev @react-app-cli/core
  yarn react-app-cli create component --name Button --type common

(npx is a package runner tool that comes with npm 5.2+)

Config File

When you run react-app-cli within your project and wanna use custom settings create a ".react-cli.json" config file.

Example of the .react-cli.json config file:

{
  "baseUrl": "./src",
  "ignoreTypes": false,
  "layers": {
    "dataAccess": "data-access",
    "domain": "domain",
    "dto": "dto",
    "entity": "domain/<name>/entity",
    "presenter": "presentation/presenter",
    "repository": "domain/<name>/repository",
    "service": "domain/<name>/service",
    "ui": "presentation/ui"
  },
  "naming": {
    "component": ".component",
    "styles": ".styles",
    "typings": ".typings"
  },
  "styles": "styled",
  "typescript": true
}

baseUrl - application entry point;
naming - files pre-extension;
layer - application layers;
ignoreTypes - unchangeable;
styles - styles types generating:
- Variants: css | less | scss | styled;
typescript - using ts in project.

React App Commands

Option legends:

<option name> - required;
[option name] - optional.

Create Component Command

To create a component at the ui layer of your application, you should use:

react-app-cli create component --name <name> --type [type] [--ignoreTypes]

cmpt is the shorthand for the component

options

--name, -n - component name (will converted to kebab-case for file naming);
--type, -t - component types:
- Variants - common, modules, pages. Also you can use custom type as path to component like route/user/components will be created in <ui layer>/route/user/components;
- Default - <ui layer>/components;
--ignoreTypes, -it - ignore typings files.