generator-react-redux-app

Yeoman generator for React with Redux lets you quickly set up a project including mocha test runner and Webpack module system and written using ES6. It ships with redux-devtools for time travel and react-transform-hmr for live react components update. Development workflow is similar to one described in this great article.

Installation

# Install yeoman 
npm install -g yo 
 
# Install this generator 
npm install -g generator-react-redux-app

Usage:

Generate app structure:

  # Create project dir and get into it 
  mkdir sample-react-redux-app && cd sample-react-redux-app
  
  # Run app generator 
  yo react-redux-app #generates app structure 

Generate app routes:

  # generate client users page (components/pages/Users.jsx) with new menu item 
  yo react-redux-app:router users

It will generate new page with menu item, actions to fetch/remove/add entities, reducer for handling this actions and express server routes with sample data.

Commands

The following commands are available in your project:

## build bundle with webpack and start dev server 
npm run serve
 
## run dev backend server (if enabled on app generation) 
npm run server

Subgenerators

Router

This command generates client side route with menu item and sample page. Routes config saved in config/routes.json. Menu item icon is also configured here and uses Google Material Icons.

Usage:

  yo react-redux-app:router <routeName> [options] 

Arguments:

  routeName # The name of generated route. Used for menu label and route path  Required: true 

Options:

  -p, --parent  # The name of parent route, that generated one will be nested in 
  -e, --with-no-entity  # Disable generation of entity and api handlers 

If --with-no-entity option is not present, this command will generate server api handlers for <routeName> entity and actions/reducer for handling fetch/add/remove actions on client. npm run server restart required.

If --with-no-entity is set, then only new page component and menu item would be generated with new route.

Entity

This command generates fetch action and reducer for entity. If -with-no-api options is not proveded, it also generates simple handler on backend server for fetch calls. npm run serve restart required.

If remotePath is not provided, it is generated as http://localhost:<backendPort>/api/<name> and simple handler is generated(if no --with-no-api). npm run server restart required.

Usage:

  yo react-redux-app:entity <name> [<remotePath>] [options]

Arguments:

  name        # Name of generated entity  Type: String  Required: true 
  remotePath  # Remote api path to fetch entities from  Required: false 

Options:

   -n,   --with-no-api   # Disable backend api handler for fetch requests 

Generated app

Changelog

Recent changes can be viewed on Github on the Releases Page

TODO

• Generate Route config with plain JSX component instead mapping config to routes
• Webpack prod config
• Tests generation

License

MIT