Short description
Motivation
Examples
react create component button
rct c c text-input
react-cli c c container header
npx react-cli c h useInput
Installation
For NPM
npm install -g react-cli
For Yarn
yarn global add -g react-cli
Usage
react init
Generates a configuration file based on the prompt
react create component
Arguments
Argument | Description |
---|
type | Type of component defined in the configuration file |
\ | Name for the component. If you want to make a sub-component for an existing component, you can input a name like this: existing-component-name/new-component-name |
Options
Option | Alias | Description |
---|
--class | -c | Create a class component |
--typescript | -tp | Use typescript |
--style | -s | Create a style file |
--story | N/A | Create a story file |
--proptypes | -p | Include proptypes |
--redux | -r | Include redux |
--test | -t | Create a test file |
--index | -i | Create an index file with default export |
--file-name \ | -fn | Specify the file name. If this argument is provided, the file naming config will be ignored |
--path \ | N/A | Specify the path for the file relative to the project source path defined in the project configuration entry |
--no-typescript | -notp | Don't use typescript |
--no-style | -nos | Don't create a style file |
--no-story | N/A | Don't create story book file |
--no-proptypes | -nop | Don't include proptypes |
--no-redux | -nor | Don't include redux |
--no-test | -not | Don't create a test file |
--no-index | -noi | Don't create an index file |
react create hook
Arguments
Argument | Description |
---|
\ | Name for hook |
Options
Option | Alias | Description |
---|
--typescript | -t | Use typescript |
--no-typescript | -notp | Don't use typescript |
--path \ | N/A | Specify the path for the file relative to the project source path defined in the project configuration entry |
Configuration
ProjectConfig
Option | Type | Description |
---|
path | string | Project source path |
typescript | boolean | Uses typescript |
fileNaming | FileNaming | Define file naming |
ComponentConfig
Option | Type | Description |
---|
class | boolean | Create a class component |
style | boolean | Create a style file |
story | boolean | Create a story file |
proptypes | boolean | Include proptypes |
redux | boolean | Include redux |
test | boolean | Create a test file |
testId | boolean | Adds data-testid attribute on the element |
index | boolean | Create an index file |
open | boolean | Open file in default editor after creating |
path | string | Specify the path for the file relative to the project source path defined in the project configuration entry |
typescript | boolean | Use typescript |
inFolder | boolean | Save the file in its own folder |
fileNaming | FileNaming | Define file naming |
override | ComponentOverrideConfig | Override configuration of style, storybook, or test |
ComponentOverrideConfig
StyleConfig
Option | Type | Description |
---|
type | css | scss | sass | less | styled-components | Type of styling technology |
modules | boolean | Use css modules |
path | string | Specify the path for the file relative to the project source path defined in the project configuration entry |
typescript | boolean | Use typescript (for css in js solutions) |
inFolder | boolean | Save the file in its own folder |
fileNaming | FileNaming | Define file naming |
StorybookConfig
Option | Type | Description |
---|
path | string | Specify the path for the file relative to the project source path defined in the project configuration entry |
typescript | boolean | Use typescript |
inFolder | boolean | Save the file in its own folder |
fileNaming | FileNaming | Define file naming |
TestConfig
Option | Type | Description |
---|
path | string | Specify the path for the file relative to the project source path defined in the project configuration entry |
typescript | boolean | Use typescript |
inFolder | boolean | Save the file in its own folder |
fileNaming | FileNaming | Define file naming |
HookConfig
Option | Type | Description |
---|
open | boolean | Open file in default editor after creating |
path | string | Specify the path for the file relative to the project source path defined in the project configuration entry |
typescript | boolean | Use typescript |
inFolder | boolean | Save the file in its own folder |
fileNaming | FileNaming | Define file naming |
FileNaming
Option | Type | Description |
---|
name | string | Specify name or naming type |
postfix | string | Define postfix or postfix type for file name |
postfixDevider | string | Define postfix devider |
casing | camel | pascal | kebab | snake | Specify casing type |
Name types
Component
Type | Description |
---|
{name} | Provided component name |
Style
Type | Description |
---|
{name} | Provided name |
Story
Type | Description |
---|
{name} | Provided name |
Test
Type | Description |
---|
{name} | Provided name |
Postfix types
Component
Type | Description |
---|
{type} | Value is compnent |
{componentType} | Specified type argument |
Style
Type | Description |
---|
{type} | Value is style |
{componentType} | Specified component type argument |
Example
{
"project": {
"path": "./src",
"typescript": true,
"fileNaming": {
"casing": "kebab",
"postfix": "",
"postfixDevider": "."
}
},
"component": {
"default": {
"style": true,
"story": true,
"test": true,
"proptypes": true,
"index": true,
"inFolder": true,
"open": true,
"fileNaming": {
"casing": "camel"
},
"path": "/components",
"class": false,
"redux": false,
"override": {
"style": {
"type": "scss"
}
}
},
"container": {
"style": true,
"story": false,
"test": true,
"proptypes": true,
"index": true,
"inFolder": true,
"open": true,
"path": "/containers"
}
},
"style": {
"type": "styled-components",
"modules": false,
"path": "{componentPath}"
},
"storybook": {
"path": "{componentPath}",
"fileNaming": {
"postfix": "story"
}
},
"test": {
"path": "../test",
"fileNaming": {
"postfix": "test"
}
},
"hook": {
"open": true,
"path": "/hooks"
}
}
License
MIT