About

A generator for scaffolding react features, components, containers and ducks. This reduces the amount of boilerplate you have to create in order to get you focusing on writing the real important code.

Installation

Requirements

node

Since this module is written in ES6, this module requires node 4.0.0 or higher.

Packages

You will need two globally installed packages in order to use the generator.

# Make sure both are installed globally
npm i -g yo generator-tsheets

Commands

All commands can be invoked with yeoman by using yo tsheets:command-name.

tsheets or tsheets:app

Description

Creates a feature level directory in your source tree of the given application name. This is the first command that you will run for a feature level directory. Consider this the "seeding" command.

If the app does not use redux, a directory with the given structure would be created:

application_name
├── components
├── containers
│   └── root_application_name
│       ├── index.js
│       └── root_application_name.js
├── index.js
└── services

If the app does use redux, a directory with the given structure would be created:

application_name
├── components
├── containers
│   └── root_application_name
│       ├── index.js
│       └── root_application_name.js
├── index.js
├── redux
│   ├── configure_store.dev.js
│   ├── configure_store.js
│   ├── configure_store.prod.js
│   ├── modules
│   └── root_reducer.js
└── services

Usage

# The default invocation
yo tsheets
# equivalently
yo tsheets:app

tsheets:component

Description

Creates a stateful or stateless "dumb component" inside of the components directory of the given name.

application_name
├── components
│   └── example_stateless_component_name
│       ├── example_stateless_component_name.js
│       ├── example_stateless_component_name.test.js
│       └── index.js
├── containers
│   └── root_application_name
│       ├── index.js
│       └── root_application_name.js
├── index.js
└── services

Usage

yo tsheets:component

tsheets:container

Description

Creates a container component (aka smart component) of the given name. Smart components are responsible for tying together multiple "dumb components".

This creates a directory structure like the following:

application_name
├── components
├── containers
│   ├── example_container_name
│   │   ├── example_container_name.js
│   │   ├── example_container_name.test.js
│   │   └── index.js
│   └── root_application_name
│       ├── index.js
│       └── root_application_name.js
├── index.js
└── services

Usage

yo tsheets:container

tsheets:duck

Description

Creates a redux "duck" module of the given name. The directory structure after creating a duck would look like the following:

application_name
├── components
├── containers
│   └── root_application_name
│       ├── index.js
│       └── root_application_name.js
├── index.js
├── redux
│   └── modules
│       └── example_duck_name
│           ├── example_duck_name.js
│           └── index.js
└── services

Usage

yo tsheets:duck