reacli
v1.6.7
Published
A simple and straightforward React boilerplate CLI
Downloads
4
Readme
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/
$ 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
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]
wherevalue
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]
wherevalue
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.