Scaffolding tool for React
react-scaffolder is a command line interface which brings smooth developer experience (DX) for React devs. react-scaffolder provides a better way to generate react projects with react-boilerplate. With this tool it's possible to continue generating boilerplate code with heavy customizations once a project is initiated.
$ npm install -g react-scaffolder
or if you're using yarn,
$ yarn global add react-scaffolder
Quickest way to get up and running with react-scaffolder
-
Install the CLI -
$ npm install -g react-scaffolder -
Initiate a project -
$ react init awesome-project && cd awesome-project -
Install dependencies -
$ npm install -
Run the build -
$ npm run build && npm start -
Instantly create React components -
$ react g component feed footer -
Check with interactive view -
$ react v -c
alias: i
Project name.
Git repository URL that you need to use as the template.
-lAdd eslint configuration.
alias: g
Module name where the react component should be placed within. (Subdirectory within components directory)
React component name. If you leave that empty generator creates folder with module name, and index.js inside
-fGenerate only file and use module as filename
At "Prop names" question you can use "*" to mark as required title* and also you can define type title:string and sure you can write title:string*
If you didn't define a type cli will ask you to choose it from the list.
alias: g
Create React component.
Module name where the test file should be placed within. (Subdirectory within tests directory)
Test file name.
alias: v
View react components and test files.
-
-cView React components file directory. -
-tView tests file directory.
alias: c
Change configuration in .reactclirc.
Key for configuration
example: client
Value for configuration
example: src (source directory)
To use react-cli in existing React project navigate to directory where React components are created.
Create react-cli configuration file, .reactclirc (similar to .babelrc). Add configuration in key value pairs.
{
"client": "src"
}
This specifies that React components are placed in src/components directory.
- Initiate React projects
- Create React components
- Create test files
- Interactive view of the component structure
- What is scaffolding ?
- What is a CLI ?
- Why good UX in CLIs matters
- Projects which facilitate similar objectives
- Fork the repository.
- Clone the forked repository.
- Create your own branch.
- Create tests and make sure tests pass on travis.
- Create a pull request with changes made.
For more information refer CONTRIBUTING.md
MIT © 99XT