generate-react

A small cli for react that generates a starter boilerplate with mobx, sass, routing, protected routes and an Api call. You can also generate new components with this package.

Install

Run

npm install -g cli-react

You may need to sudo it.

Why?

The create-react-app cli has no actual structure and I noticed that when I start a project almost everytime I needed a router,state-management (redux or mobx, I choose mobx - in the future maybe a redux flag to generate with redux) and sass (who doesn't love Sass right?!).

And the second reason was that I had to manually copy-paste the code when I wanted to create a component. It is time consuming and redudant.

You can generate two components: Functional and Class Components :

Functional Component:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

const Comp = () => {
  return (
    <div className="Comp">
    </div>
  )
}
Comp.propTypes = {
}

export default Comp;

Class Component:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Comp extends Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div className="Comp">
    
      </div>
    )
  }
}
Comp.propTypes = {
}

export default Comp; 

You can generate these files anywhere. If it detects that the project directory has a ./src/components directory it will choose to generate them there.

Initialize project

Run

rct init <ProjectName>

This will inializa a new project with the boilerplate in place with following project structure :

project
└─ node_modules
└─ public
└─ src
│   └─ assets
│   └─ components
│   │   └─ guard
│   │   │   │ protected.js
│   │   └─ header
│   │   │   │ header.js
│   │   │   │ header.scss
│   │   └─ home
│   │   │   │ home.js
│   │   │   │ home.scss
│   │   └─ posts
│   │   │   │ posts.js
│   │   │   │ posts.scss
│   │   │   └─ post
│   │   │   │   │ post.js
│   │   └─ ui
│   │   │   │ button.js
│   └─ stores
│   │   │ store.js
│   └─ styles
│   │   │ _base.scss
│   │   │ _reset.scss  
│   │   │ _variables.scss
│   │ index.js
│   │ index.scss
│   │ registerServiceWorker.js
│ .gitignore
│ package.json  
│ package-lock.json  
│ README.md 

Generate Component

Run

rct gc <ComponentName>

This will create a folder of your component name, and a class component js file of the same name. You can also give paths to the component name for example :

rct gc component/comp1 => will create a component within the component folder (and make it if it doesn't exist).

Options

Create a functional component

rct gc <ComponentName> -f or rct gc <ComponentName> --functional

Create a component with css

rct gc <ComponentName> -s or rct gc <ComponentName> --style

Create a component and make it an oberserver

rct gc <ComponentName> -o or rct gc <ComponentName> --observable

Create a component but don't wrap it in a folder

rct gc <ComponentName> -n or rct gc <ComponentName> --nofolder

TODO

• [ ] Add Typescript option to init
• [ ] Better output messages
• [ ] Redux option