[react][redux] Isomorphic boilerplate: Adding new page

It is an example of adding a static new page(no action-dispatch) base on the react-redux isomorphic boilerplate, after wire up the configurations of server rendering, client rendering and router, only 3 files will be modified(or added) for creating a very simple static page.

1. Create a Presentational Component

Presentational Components is component which are concerned with _how things look only, and h_ave no dependencies on the rest of the app

./src/components/NewPage.js

import React, { PropTypes } from 'react'

const NewPage = ({ onClick, message }) => {return (<div><h1>NewPage: { message }</h1></div>)}

NewPage.propTypes = {message: PropTypes.string.isRequired}

export default NewPage

2. Create a container as entry of router

./src/containers/NewPage.js

import { connect } from 'react-redux'import NewPage from '../components/NewPage'

const mapStateToProps = (state, ownProps) => {return {message: 'well behave !!!'}}

const mapDispatchToProps = (dispatch, ownProps) => {return {}}

const newPage = connect(mapStateToProps,mapDispatchToProps)(NewPage)

// initState is a function which is run before server, and keep consistency as a thunk middleware, and return a promisenewPage.initState = (store,req,res) => {return (dispatch, getState) => {return new Promise( (resolve, reject)=> {resolve ()})}}

export default newPage

3. Add the right config in matchConfig.js

The new page is created with new URL /preload', as the first fieldpath: '/preload'`

...{path: '/preload',component: PreloadHelloWorld,initState: PreloadHelloWorld.initState},...

Open browser with url localhost:3000/newpage

Clone

Git repository

$ git clone https://github.com/wahengchang/react-redux-boilerplate/tree/addNewPage

Reference:

Read More

https://hackernoon.com/isomorphic-universal-boilerplate-react-redux-server-rendering-tutorial-example-webpack-compenent-6e22106ae285

https://github.com/wahengchang/react-redux-boilerplate/tree/addNewPage