zwen-react

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

• actions
• components
• middleware
• reducers
• selectors

We're also working on generating SCSS stylesheets and an initial project setup for the redux store.

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

Contents

1. Installation
2. Configuration
   • Source Directory
   • Indentation
3. Usage
   • Actions
   • Components
   • Middleware
   • Reducers
   • Selectors
4. Advanced Usage
   • Sorting
5. Architecture

Installation

npm i -g zwen-react

or

yarn global add zwen-react

Configuration

Some settings can be adjusted by creating a .zwen file in your project directory.

Source Directory

Especially for repositories holding both backend and frontend it might be necessary to change the default source directory.

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

Indentation

If you prefer tabs or any other kind of indentation you may define it here.

// => .zwen
{
  "indent": "    " // default: "  " (two spaces)
}

Usage

Actions

zwen action path/to/myAction

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

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/myComponent

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

You also have the option to generate a class component by supplying a flag:

zwen component path/to/myComponent --classComp

or

zwen component path/to/myComponent -c

(More about components)

Middleware

zwen middleware myMiddleware

This will create a new middleware file (src/middleware/myMiddleware.js) and a test file (src/middleware/myMiddleware.test.js).

It will also export the new middleware from the folder's index.js file.

(More about midddleware)

Reducers

zwen reducer path/to/myReducer

This will create a new reducer file (src/reducers/path/to/myReducer.js) and a test file (src/reducers/path/to/myReducer.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)

Selectors

zwen selector path/to/mySelector

This will create or update the file located at src/selectors/path/to.js and a test file (src/selectors/path/to.test.js). The new selector will be named mySelector. It will also wire up the imports and create new index.js files if they don't exist.

You will get a list with all selectors defined in reducer files (we're working on adding complex selectors to that list as well), from which you choose the ones to use in your new selector. Type done! when your selection is complete.

(More about selectors)

Advanced Usage

Sorting

When generating exports in index.js files zwen-react automatically sorts everything alphabetically. This might become a problem as soon as you want to have a certain order to your exports (e.g. middleware).

To make sure some exports remain at the top of a file you can make use of the following syntax:

/* zwen-keep-start */
export { default as firstMiddleware } from './firstMiddleware';
/* zwen-keep-end */

// all other (sorted) exports

zwen-react will respect this section and keep it at the top of the file after inserting the new export.

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
|
|--middleware
|----index.js
|----[sendRequest.js]
|----[sendRequest.test.js]
|
|--reducers
|----[filter]
|------index.js
|------[selectedDate.js]
|------[selectedDate.test.js]
|----index.js
|
|--selectors
|----index.js
|----ui.js
|----ui.test.js
|
|--stylesheets
|----components
|------[generic]
|--------[button.scss]
|----manifest.scss
|
|--index.js
|--store.js