React App Cli (@react-app-cli/core)
Why?
To increase your productivity in React projects and stop copying-pasting files or folders each time you want to create a new component.
You can run it using npx:
npx @react-app-cli/core create component --name Button --type common
or add into your project:
yarn add --dev @react-app-cli/core
yarn react-app-cli create component --name Button --type common
(npx is a package runner tool that comes with npm 5.2+)
Config File
When you run react-app-cli within your project and wanna use custom settings create a ".react-cli.json" config file.
Example of the .react-cli.json config file:
{
"baseUrl": "./src",
"ignoreTypes": false,
"layers": {
"dataAccess": "data-access",
"domain": "domain",
"dto": "dto",
"entity": "domain/<name>/entity",
"presenter": "presentation/presenter",
"repository": "domain/<name>/repository",
"service": "domain/<name>/service",
"ui": "presentation/ui"
},
"naming": {
"component": ".component",
"styles": ".styles",
"typings": ".typings"
},
"styles": "styled",
"typescript": true
}
baseUrl
- application entry point;
naming
- files pre-extension;
layer
- application layers;
ignoreTypes
- unchangeable;
styles
- styles types generating:
- Variants:
css | less | scss | styled
;
typescript
- using ts in project.
React App Commands
Option legends:
<option name>
- required;
[option name]
- optional.
Create Component Command
To create a component at the ui layer
of your application, you should use:
react-app-cli create component --name <name> --type [type] [--ignoreTypes]
cmpt
is the shorthand for the component
options
--name, -n
- component name (will converted to kebab-case for file naming);
--type, -t
- component types:
- Variants -
common, modules, pages
. Also you can use custom type as path to component like route/user/components
will be created in <ui layer>/route/user/components
;
- Default -
<ui layer>/components
;
--ignoreTypes, -it
- ignore typings files.
License
React App Cli is Open Source software licensed as MIT.