/cli

A simple and straightforward React boilerplate CLI

Primary LanguageJavaScriptMIT LicenseMIT

Reacli ⚡️💻

npm version Build Status

This is a React CLI that helps with boilerplate.

See the landing website here

We describe briefly the features of the Reacli tool here. For more details on how the tool works and how to use the different options, please refer to the landing website https://reacli.github.io/

Basic usage

$ npx reacli -h

  ____                 _ _ 
 |  _ \ ___  __ _  ___| (_)
 | |_) / _ \/ _` |/ __| | |
 |  _ <  __/ (_| | (__| | |
 |_| \_\___|\__,_|\___|_|_|
                           
Usage: reacli <command> [path(s)] [options]

React CLI to create things really fast

Options:
  -V, --version             output the version number
  -f, --flow                add flow to the template
  --scss                    use SCSS instead of classic css
  --redux                   add Redux to the template
  -i, --ignore-config-file  ignore the '.reacli' optional configuration file
  --extension [value]       the file extension to use for the templates ('js' or 'jsx')
  -h, --help                output usage information

Commands:
  component [path(s)] [options]
  hook [path(s)] [options]

Examples:
  Interactive CLI:
    $ reacli
  Create a component using Redux and Scss:
    $ reacli component ./my-path/my-component --redux --scss
  Create two hooks:
    $ reacli hook ./my-hook1 ./my-hook-2

Table of contents

Installation

You can use Reacli either as a global package, or download it and use it whenever it's needed.

We describe here how to install it globally in different ways, depending on your package manager.

Using npm

npm install -g reacli

Using yarn

yarn global add reacli

Usage

How to use Reacli?

Case 1: Reacli is installed globally

You can directly run the reacli command from a terminal such as:

reacli component path/to/my/component

Case 2: you want to download it when it is needed with npx

npx reacli component path/to/my/component

Interactive CLI

To facilitate the use of Reacli, we decided to create an interactive CLI, asking you some questions guiding you to create what you want.

To use it, just run:

reacli

Interactive CLI

CLI features

You can also use Reacli to directly configure what you want and save some time.

Today, Reacli enables to create:

  • Components
  • Hooks

Component creation

Reacli's main feature is to create easily new components. To create a new component with the default configuration:

reacli component ./my-super-component

It will generate a structure like:

.
└── my-super-component
    ├── components
    |   ├── MySuperComponent.jsx
    |   ├── MySuperComponent.css
    |   └── MySuperComponentContainer.jsx
    └── index.js

For more details about why we chose this configuration as a default one, please see here.

Options

Reacli enables to customize your components creation thanks to several options. You can combine several options.

  • -f or --flow option adds Flow to your generated component
  • --scss to use a SCSS style file instead of the default CSS one
  • --redux option adds a React-Redux default configuration to your generated component
  • -i or --ignore-config-file to ignore the .reacli configuration file if one is found and use default options or the ones given at runtime to the CLI
  • --extension [value] where value is either "js" or "jsx" to configure the file extension of the generated component files
Create several components at once

To create several components in one single command, just type several paths such as:

reacli component ./my-super-component1 ./my-super-component2

Hook creation

Reacli also enables to create React hooks. The functioning is quite similar to components creation. To create a hook with the default configuration:

reacli hook ./my-super-hook

It will generate a structure like:

.
└── my-super-hook
    ├── hooks
    |   ├── MySuperHook.jsx
    |   └── MySuperHook.css
    └── index.js
Options

You can configure some options to customize the way Reacli creates your hook:

  • --scss to use a SCSS style file instead of the default CSS one
  • --extension [value] where value is either "js" or "jsx" to configure the file extension of the generated hook files
  • -i or --ignore-config-file to ignore the .reacli configuration file if one is found and use default options or the ones given at runtime to the CLI
Create several hooks at once

To create several hooks in one single command, just type several paths such as:

reacli hook ./my-super-hook1 ./my-super-hook2

Global configuration

You might want to use several times Reacli in your project to create many new components. It might be annoying having to type the different options you want to use each time you use Reacli.

That is why we enable the creation of a configuration file.

Usage

To use a global configuration, at the root of your project (next to the package.json), you can create a .reacli file. Its content, formatted as JSON, might contain the following key-value pairs:

// .reacli
{
  "scss": true, // or false
  "flow": true, // or false
  "redux": true, // or false
  "extension": "js" // or jsx 
}

If one option is not set in your .reacli file, the default one will be used.

Not having a .reacli file is like having one that contains:

// .reacli
{
 "scss": false,
 "flow": false,
 "redux": false,
 "extension": "jsx" 
}
Ignore the global configuration

When using a .reacli file to configure the Reacli tool globally for your project, it might happen that you want to ignore this configuration file when creating a new element.

To do so, you can use the -i or --ignore-config-file argument.