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
-
Install yeoman if you don't have it: using
npm install -g yo
-
Install Generator:
npm install -g generator-kyper-react
Creating a project
-
Create a project folder and enter it:
mkdir myProject && cd myProject
-
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:
{ superprops } { 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:
{ superprops } static propTypes = { return <div className="Cars"> </div> } // Place state of redux store into props of component { return account: stateaccount router: staterouter } // Place action methods into props { return } mapStateToProps mapDispatchToPropsCars
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:
const ADD_CARS = 'ADD_CARS'const REMOVE_CARS = 'REMOVE_CARS'const UPDATE_CARS = 'UPDATE_CARS' { return type: 'ADD_CARS' payload: 'cars' } { return type: 'REMOVE_CARS' payload: '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:
{ }
Redux Examples
Generated files based onOther Reading
-
#### Redux Docs
-
#### Redux Examples