Fx2-react-cli NPM

fx2-react-cli 🐙

Installation

To install package globally on your machine

npm install -g fx2-react-cli

or

yarn global add fx2-react-cli

Also you can install package in your project

npm install fx2-react-cli --save-dev

or

yarn add fx2-react-cli --dev

Usage

fx2 <command> <options> <path/name>

At the moment there are 3 commands which allows you to generate component, hook and feature:

Commands:

  gc <options> <component path/name>  Generate component
  gh <options> <hook path/name>       Generate hook
  gf <options> <feature path/name>    Generate feature folder structure (react-redux is required)

Options:

Global:
-h, --help            output usage information
-v, --version         output the version number

Component:
-c, --classcomponent  Create class component
-t, --typescript      Create typescript component file
-n, --nofolder        Do not wrap component in folder (without index file)
-g, --global          Create component in "src/components" folder

Hook:
-t, --typescript      Create typescript hook file
-n, --nofolder        Do not wrap hook in "hooks" folder
-g, --global          Create hook in "src/hooks" folder

Feature:
-t, --typescript      Create typescript feature files (ts, tsx)
-g, --global          Create feature in "src/features" folder

Overview

Default extension of the generated files
```
JavaScript
```
How to use package with TypeScript?
Use -t option
```
fx2 gc -t "GreatComponent" ✔️
fx2 gc "GreatComponent" -t ✔️

Order of the options and name doesn't metter
```
Example above will generate component with .tsx extension and different structure

How to generate element in nested folder?

Provide path in <name/path> field. Make sure that you are in the right folder in your terminal. If you don't use global -g option provided path will take that folder as start point.

fx2 gc "components/elements/Header" ✔️

Generated structure:

path/of/terminal/components
                  └── elements
                      └─── Header
                            ├── Header.js
                            └── index.js

Are " " necessary in name/path field?
No. " " are optional
```
fx2 gc components/elements/Header ✔️
```
Component will be generated in components/elements/Header folder

Do I have to capitalize name of my component?

No. Component name will be capitalized automatically, but not it's parent folder.

fx2 gc components/elements/header ✔️

Example above will generate structure like this:

components
    └── elements
        └─── header // this name will be lowercase
              ├── Header.js
              └── index.js

Can I name my hook however I want?
Not exactly, it has to be with use prefix (hook rules of react) or you will get an error.
```
fx2 gh useMyGreatHook ✔️

fx2 gh myGreatHook ❌
```