react-scaffolder

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.

Install

$ npm install -g react-scaffolder

or if you're using yarn,

$ 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

References

• What is scaffolding ?
• What is a CLI ?
• Why good UX in CLIs matters
• Projects which facilitate similar objectives
  • Yeoman

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

License

MIT © 99XT