https://github.com/99x/react-scaffolder
:zap: Scaffolding tool for React
https://github.com/99x/react-scaffolder
cli hacktoberfest javascript nodejs react react-components scaffold scaffolding
Last synced: 8 months ago
JSON representation
:zap: Scaffolding tool for React
- Host: GitHub
- URL: https://github.com/99x/react-scaffolder
- Owner: 99x
- License: mit
- Created: 2016-08-22T05:25:01.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-04-28T05:07:57.000Z (about 7 years ago)
- Last Synced: 2025-04-13T08:02:28.303Z (about 1 year ago)
- Topics: cli, hacktoberfest, javascript, nodejs, react, react-components, scaffold, scaffolding
- Language: JavaScript
- Homepage:
- Size: 198 KB
- Stars: 43
- Watchers: 6
- Forks: 14
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-scaffolder  [](https://travis-ci.org/99xt/react-scaffolder)
[](https://gitter.im/react-scaffolder/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Scaffolding tool for [React](https://facebook.github.io/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](https://github.com/99xt/react-boilerplate). With this tool it's possible to continue generating boilerplate code with heavy customizations once a project is initiated.
## Install
```
$ npm install -g react-scaffolder
```
or if you're using [yarn](https://yarnpkg.com),
```
$ yarn global add react-scaffolder
```
## Quick Start
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```
## Usage
### react init [name] [git repository URL]
*alias: i*
#### name
Project name.
#### Git repository URL (optional)
Git repository URL that you need to use as the template.
#### Options
* `-l`
Add eslint configuration.
---------------------------------------
### react generate component [module] [component]
*alias: g*
#### module
Module name where the react component should be placed within. (Subdirectory within components directory)
#### component
React component name.
If you leave that empty generator creates folder with module name, and index.js inside
#### Options
* `-f` Generate only file and use module as filename
#### Define propNames
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.
---------------------------------------
### react generate test [module] [component]
*alias: g*
Create React component.
#### module
Module name where the test file should be placed within. (Subdirectory within __tests__ directory)
#### component
Test file name.
---------------------------------------
### react view -c -t
*alias: v*
View react components and test files.
#### Options
* `-c`
View React components file directory.
* `-t`
View tests file directory.
### react config [key] [value]
*alias: c*
Change configuration in `.reactclirc`.
#### key
Key for configuration
example: `client`
#### value
Value for configuration
example: `src` (source directory)
---------------------------------------
## Configuring existing projects
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.
---------------------------------------
## Features
- Initiate React projects
- Create React components
- Create test files
- Interactive view of the component structure
#### [Future work](https://github.com/99xt/react-scaffolder/issues/23)
## References
- [What is scaffolding ?](https://en.wikipedia.org/wiki/Scaffold_(programming))
- [What is a CLI ?](https://www.techopedia.com/definition/3337/command-line-interface-cli)
- [Why good UX in CLIs matters](https://trevorsullivan.net/2016/07/11/designing-command-line-tools/)
- Projects which facilitate similar objectives
- [Yeoman](http://yeoman.io/)
## Contributor guidelines
- 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](https://github.com/99xt/react-cli/blob/master/CONTRIBUTING.md)
## License
MIT © [99XT](https://github.com/99xt)