It is an example of adding a static new page(no action-dispatch) base on the , 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. react-redux isomorphic boilerplate 1. Create a Presentational Component is component which are concerned with _how things look only, and h_ave no dependencies on the rest of the app Presentational Components ./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 path: '/preload'` /preload', as the first field ...{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
![featured image - [react][redux] Isomorphic boilerplate: Adding new page](https://hackernoon.imgix.net/hn-images/1*7icbLIqdLMH8paYs9I-vYQ.jpeg?auto=format&fit=max&w=3840)
