0.8.3 • Public • Published


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

    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.


    1. Installation
    2. Configuration
    3. Usage
    4. Advanced Usage
    5. Architecture


    npm i -g zwen-react


    yarn global add zwen-react


    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"


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

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



    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)


    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


    zwen component path/to/myComponent -c

    (More about components)


    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)


    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)


    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


    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.


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



    npm i zwen-react

    DownloadsWeekly Downloads






    Unpacked Size

    70.1 kB

    Total Files


    Last publish


    • milankarow
    • kevinscholz
    • sh4rk
    • jkimmeyer
    • alexkott