Skip to content

Simple React CLI that aims to speed up development by generating desired React component markup based on your preferences via the command line.

License

Notifications You must be signed in to change notification settings

BenSwennen/react-create

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-create

Simple React CLI that aims to speed up development by allowing you to create react components from the command line with lots of customizations.

Build Status npm version

Installation

Via NPM

Make sure to install this module globally so you can run the command from anywhere.

npm install -g react-create

Or via Github repo

Clone Repository

$ git clone https://github.com/ipeters90/react-create.git

Navigate to the repo

$ cd react-create

Do a build

$ npm run build

Lastly, run this command in root folder of repo to add script to NPM path (So you can execute anywhere)

$ npm link

Usage

Usage: react-create component <component name> [options]

Actions:
  comp, component            Passed in as first argument to signify component creation

Options:
  -v, --version              Outputs the version number (e.g rc -v)
  -h, --help                 Prints out usage options
  -d, --dir                  Creates a [component name] directory with component file inside. (Default is just the component file)
  -p, --pkg                  Includes a package.json file with component
  --es5                      Generates the component with React's ES5 syntax. (Default is ES6).
  --jsx                      Creates the component with `.jsx` extenstion. (Default is `.js`)
  --entry                    Bootstraps the component with the 'ReactDOM.render' function.
  --css,--styl,--less, -scss Create and choose your css preprocessor to generate

Examples

Create Home component file that mounts to the DOM

$ react-create component Home --entry

will generate this Home.js file

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Home extends Component {
 render() {
    return (
      <div className="home">
        { this.props.children }
      </div>
    )
  }
}

ReactDOM.render(<Home/>, document.getElementById('app'));

Create Header component with ES5 syntax and the .jsx extension

$ react-create component Header --jsx --es5

will generate this Header.jsx file

var React = require('react');

var Header = React.createClass({
  render: function() {
    return (
      <div className="header">
        { this.props.children }
      </div>
    )
  }
})

module.exports = Header;

Create Header component folder with appropriate component files and a package.json

$ react-create component Header -d --jsx -pkg --styl

will generate 3 files

└─ Header/
   ├─ Header.jsx         -> With ES6 Markup of a React component
   ├─ Header.styl        -> Stylus stylesheet
   └─ package.json       -> With name, main and version number markup included

About

Simple React CLI that aims to speed up development by generating desired React component markup based on your preferences via the command line.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%