generator-kyper-react

generator-kyper-react

Generator for a React projects that use Redux and are bundled with Webpack. There are also sub-generators for Components, Containers(Redux linked component), as well as Redux Actions and Reducers.

Getting Started

1. Install yeoman if you don't have it: using npm install -g yo

2. Install Generator: npm install -g generator-kyper-react

Creating a project

1. Create a project folder and enter it: mkdir myProject && cd myProject

2. Initiate the generator: yo kyper-react

Sub generators

Sub generators included are run by calling yo kyper-react:<name of sub-generator> <param1>.

Example: To call the component sub-generator with "SomeThing" as the first parameter write: yo kyper-react:component SomeThing

Component

Generates a React component along with a matching scss file and places it within /components

A component is best for things that will be reused in multiple places. Our example

result

/app
--/components
----/Car
------Car.js
------Car.scss

/app/components/Car.js:

import React, { Component, PropTypes } from 'react'
import './Car.scss'

export default class Car extends Component {
  constructor (props) {
    super(props)
  }

  render () {
    return (
      <div className="Car">

      </div>
    )
  }
}

Redux specific

Container

NOTE: Containers are synonymous with Smart Components and Linked-State Components

To create a container named Cars run: yo kyper-react:container Cars

Creates a folder within /containers that matches the name provided. Below is the result of the command above being run:

/app
--/conatiners
----/Cars
------Cars.js
------Cars.scss

/app/containers/Cars.js:

import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import * as Actions from '../../actions/cars'
import './Cars.scss'

class Cars extends Component {
  constructor (props) {
    super(props)
  }

  static propTypes = {

  }

  render () {
    return (
      <div className="Cars">

      </div>
    )
  }
}

// Place state of redux store into props of component
function mapStateToProps (state) {
  return {
    account: state.account,
    router: state.router
  }
}

// Place action methods into props
function mapDispatchToProps (dispatch) {
  return bindActionCreators(Actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Cars)

Action

Actions are functions that are called from containers to make something happen to the state (i.e add a car). To create a set of actions (add, update, remove) for cars run: yo kyper-react:action cars

Creates a folder within /actions that matches the name provided. Below is the result of the command above being run:

/app
--/actions
----cars.js

/app/actions/cars.js:

export const ADD_CARS = 'ADD_CARS'
export const REMOVE_CARS = 'REMOVE_CARS'
export const UPDATE_CARS = 'UPDATE_CARS'

export function addCars (cars) {
  return {
    type: 'ADD_CARS',
    payload: 'cars'
  }
}
export function removeCars  (cars) {
  return {
    type: 'REMOVE_CARS',
    payload: 'cars'
  }
}
export function updateCars (cars) {
  return {
    type: 'UPDATE_CARS',
    payload: 'cars'
  }
}

Reducer

Reducers listen for actions and modify specific pieces of the state accordingly. In this example we are creating a cars reducer that manages state.cars, which is stored as an array.

yo kyper-react:reducer cars then select array

app/
--/reducers
----cars.js

/app/reducers/cars.js:

import {
  ADD_CAR,
  UPDATE_CAR,
  REMOVE_CAR,
} from '../actions/cars'
export default function cars(state = [], action) {
  switch (action.type) {
  case ADD_CAR:
    if(!action.payload){
      console.error('Payload required to add a cars')
      return state
    }
    return [...state, action.payload]
    break
  case UPDATE_CAR:
    if(!action.index && action.payload){
      console.error('Index and payload required to update a cars')
      return state
    }
    if(!state[action.name]){
      console.error('cars with that name already exists')
      return state
    }
    let newState = clone(state)
    newState[action.index] = action.payload
    return newState
    break
  case REMOVE_CAR:
    if(!action.index){
      console.error('Index required to delete a cars')
      return state
    }
    if(!state[action.index]){
      console.error('cars at that index does not exist')
      return state
    }
    let newState = clone(state)
    delete newState[action.index]
    return newState
    break
  default:
    return state
  }
}

Generated files based on Redux Examples

Other Reading

• Redux Docs

• Redux Examples

Special thanks to gaearon and the rackt team for building redux, and redux router