React-sgh-scaffolding NPM

React SGH Scaffolding

Tired of duplicating that old base component for creating a new one? React Scaffolding helps you to Scaffold various types of React Components quickly

Just run

npx react-sgh-scaffolding --name=yourComponentName --template=[function|class|pure]

Install

npm install -g react-sgh-scaffolding

With React Scaffolding you can create the following types of React Components:

Function
Class extending PureComponent
Class extending Component

Example

$ react-sgh-cli --name=my-component --path=my-folder --template=function --css my-stylesheet

OR JUST Run

Example-cli

$ react-sgh-cli-s

Will create the following files on the directory my-folder using the function template:

my-component.js

import React from 'react';
import './mycomponent.css';

const MyComponent = (props) => (
  <div></div>
);

export default MyComponent;

my-stylesheet.css

.my-component { }

More examples

The following command will generate a file named MyContainer on the directory path_to_my_folder using the default class template

> react-sgh-cli --name=MyContainer --path=path_to_my_folder

The following command will generate a file named MyWrapper on the directory path to my folder using the template wrapper

> react-sgh-cli --name=MyWrapper --path="path to my folder" --template=wrapper

The following command will generate a file named CustomContainer on the directory pathToMyFolder using the template customTemplate that is located on the directory path_to_scaffold_templates

Please NOTE that you MUST ensure that the target directories already exist and you have read and write permissions to them!

> react-sgh-cli --name=CustomContainer --path=pathToMyFolder --template=customTemplate --templatePath path_to_scaffold_templates

Options

  --help            Ignores all other options and shows this message

  --path            The directory where the component will be placed

  --template        The template that will be used to create your component
                    Those are the available templates:
                    - class     (default)
                    - pure
                    - function
                    - wrapper
                    - container (intended to work with row)
                    - row       (intended to work with container)

  --templatePath    The directory where to read the templates files from

  --css             Allows the creation of a default css file and imports it on the component.
                    - If no filename is passed, then the same name as the --name option will be used.
                    - If a file name is passed, then creates the default css file with the given name.

Making changes and testing

Clone the repository git clone https://github.com/sinaghadrico/react-sgh-scaffolding.git
Install the dependencies npm install
Implement your changes
Create a link on your machine to your repository changes npm link
Create a new directory where you will test the changes or go to the project directory where you want to use the tool
Import the linked repository npm link react-sgh-scaffolding
Use the module via it's command react-sgh-scaffolding --help