zwen-react

    0.8.3 • Public • Published

    zwen-react

    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.

    Contents

    1. Installation
    2. Configuration
    3. Usage
    4. Advanced Usage
    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
    

    Install

    npm i zwen-react

    DownloadsWeekly Downloads

    1

    Version

    0.8.3

    License

    MIT

    Unpacked Size

    70.1 kB

    Total Files

    39

    Last publish

    Collaborators

    • milankarow
    • kevinscholz
    • sh4rk
    • jkimmeyer
    • alexkott