react-ch-cli v1.1.1
Requirements
- Node.js 16
- npm 5.2+
Table of Contents
Quickstart
Install via NPM:
npm i react-ch-cli --save-dev
If you install globally, add rcliconfig.json to .gitignore.
npm i -g react-ch-cli
Execution
You can run it using npx
npx rgenerate component Avatar
Globally
rgenerate component Avatar
Config file
When first run in the project. It will look for the rcliconfig.json configuration file. If it does not find it, it will ask you a series of questions and will generate said configuration file in the root of the project.
Example of the rcliconfig.json config file:
{
"baseURL": "src",
"usesTypeScript": true,
"usesCSSModule": false,
"cssPreprocessor": "none",
"usesTests": true,
"testingLibrary": "Testing Library"
}
baseURL: (String) Default src.
usesTypeScript: (Boolean) Default true. The components and hooks will be generated in tsx and ts format respectively.
usesCSSModule: (Boolean) Default true. Generates the CSS Module file.
cssPreprocessor: (String) Default scss. Values: scss, sass, and none.
usesTests: (Boolean) Default true. Indicates whether to generate the test file.
testingLibrary: (String) Default Testing Library.
You can modify the configuration file through the following options:
npx rgenerate config [options]
Generate Components
npx rgenerate component Avatar
This command will create a folder with the name of the component inside the default src/components directory and its corresponding files.
Component files structure
|-- /src
|-- /components
|-- /Avatar
|-- index.jsx
|-- Avatar.css
To generate a component in another folder you must write the name of the folder and the component joined by "/". For example:
npx rgenerate component pages/Home
|-- /pages
|-- /components
|-- /Avatar
|-- index.jsx
|-- Avatar.css
Generate Hooks
npx rgenerate hook useHook
This command will create a file with the name of the hook in the hooks folder. If the folder does not exist it will create it in the process.
|-- /src
|-- /hooks
| -- useHook.js