zwen-react
Code generator CLI for projects using react and redux
Last updated 24 days ago by zweitag .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install zwen-react 
SYNC missed versions from official npm registry.

zwen-react

zwen-react is a code generator CLI for projects using react and redux. You can generate the following:

Later versions will also include generation of barebones project architecture, webpack setup and addition of frequently used things like forms or loaders.

The code generated by zwen-react follows our best practices at Zweitag and is therefore highly opinionated.

Installation

npm i -g zwen-react

or

yarn global add zwen-react

Configuration

You can create a .zwen file in your project directory. Currently you only have a single option there.

// => .zwen
{
  "srcDir": "frontend/src" // default: "src"
}

Usage

Actions

zwen action path/to/actionName

This will create or update the action creators (src/actions/path/to/creators.js) and tests (src/actions/path/to/creators.test.js) with the actionName. If you choose to, it will also create or update src/actions/path/to/types.js with the type ACTION_NAME.

It will also wire up exports along the path and create new index.js files if they don't exist.

(More about actions)

Components

zwen component path/to/component

This will create a new component file (src/components/path/to/Component.js). You can choose if the component should be connected to the store, or – if not – should be set up with props.

It will also wire up exports along the path and create new index.js files if they don't exist.

(More about components)

Reducers

zwen reducer path/to/reducer

This will create a new reducer file src/reducers/path/to/reducer.js and a test file src/reducers/path/to/reducer.test.js.

It will also wire up exports along the path and create new index.js files if they don't exist.

(More about reducers) (More about selectors)

Architecture

zwen-react expects your frontend architecture to follow the following structure (names written like [this] are examples):

|--actions
|----[request]
|------creators.js
|------creators.test.js
|------index.js
|------types.js
|----index.js
|----types.js
|
|--components
|----[generic]
|------[Button.js]
|----App.js
|
|--constants
|----[endpoints.js]
|
|--helpers
|----[strings.js]
|----[strings.test.js]
|
|--middleware
|----index.js
|----[sendRequest.js]
|----[sendRequest.test.js]
|
|--reducers
|----[filter]
|------index.js
|------[date.js]
|------[date.test.js]
|----index.js
|----selectors.js
|
|--router
|----index.js
|----options.js
|----options.test.js
|
|--selectors
|----index.js
|----filter.js
|----filter.test.js
|
|--stylesheets
|----components
|------[generic]
|--------[button.scss]
|----manifest.scss
|
|--index.js
|--store.js

Current Tags

  • 0.7.5                                ...           latest (24 days ago)

12 Versions

  • 0.7.5                                ...           24 days ago
  • 0.7.4                                ...           24 days ago
  • 0.7.3                                ...           2 months ago
  • 0.7.2                                ...           2 months ago
  • 0.7.1                                ...           10 months ago
  • 0.7.0                                ...           10 months ago
  • 0.6.1                                ...           10 months ago
  • 0.6.0                                ...           10 months ago
  • 0.5.3                                ...           10 months ago
  • 0.5.2                                ...           10 months ago
  • 0.5.1                                ...           10 months ago
  • 0.5.0                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 13
This Month 57
Last Day 0
Last Week 12
Last Month 1
Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |