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.
npm i -g zwen-react
or
yarn global add zwen-react
Some settings can be adjusted by creating a .zwen file in your project 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.
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
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.
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.
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):
|--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