{message}
\n\nexport default Message\n```\n\nThese are examples of *dumb* components. They are logic-less, and just show whatever they are asked to show via React **props**. The main difference between `button.jsx` and `message.jsx` is that `Button` contains a reference to an action dispatcher in its props, where `Message` just contains some data to show.\n\nAgain, *components* don't know anything about Redux **actions** or the **state** of our app, which is why we are going to create smart **containers** that will feed the proper action dispatchers and data to these 2 dumb components.\n\n- Create a `src/client/container/hello-button.js` file containing:\n\n```js\n// @flow\n\nimport { connect } from 'react-redux'\n\nimport { sayHello } from '../action/hello'\nimport Button from '../component/button'\n\nconst mapStateToProps = () => ({\n label: 'Say hello',\n})\n\nconst mapDispatchToProps = dispatch => ({\n handleClick: () => { dispatch(sayHello('Hello!')) },\n})\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Button)\n```\n\nThis container hooks up the `Button` component with the `sayHello` action and Redux's `dispatch` method.\n\n- Create a `src/client/container/message.js` file containing:\n\n```js\n// @flow\n\nimport { connect } from 'react-redux'\n\nimport Message from '../component/message'\n\nconst mapStateToProps = state => ({\n message: state.hello.get('message'),\n})\n\nexport default connect(mapStateToProps)(Message)\n```\n\nThis container hooks up the Redux's app state with the `Message` component. When the state changes, `Message` will now automatically re-render with the proper `message` prop. These connections are done via the `connect` function of `react-redux`.\n\n- Update your `src/client/app.jsx` file like so:\n\n```js\n// @flow\n\nimport React from 'react'\nimport HelloButton from './container/hello-button'\nimport Message from './container/message'\nimport { APP_NAME } from '../shared/config'\n\nconst App = () =>\nHome
\n\nexport default HomePage\n```\n\n- Create a `src/client/component/page/hello.jsx` file containing:\n\n```js\n// @flow\n\nimport React from 'react'\n\nimport HelloButton from '../../container/hello-button'\nimport Message from '../../container/message'\n\nconst HelloPage = () =>\nPage not found
\n\nexport default NotFoundPage\n```\n\n## Navigation\n\nLet's add some routes in the shared config file.\n\n- Edit your `src/shared/routes.js` like so:\n\n```js\n// @flow\n\nexport const HOME_PAGE_ROUTE = '/'\nexport const HELLO_PAGE_ROUTE = '/hello'\nexport const HELLO_ASYNC_PAGE_ROUTE = '/hello-async'\nexport const NOT_FOUND_DEMO_PAGE_ROUTE = '/404'\n\nexport const helloEndpointRoute = (num: ?number) => `/ajax/hello/${num || ':num'}`\n```\n\nThe `/404` route is just going to be used in a navigation link for the sake of demonstrating what happens when you click on a broken link.\n\n- Create a `src/client/component/nav.jsx` file containing:\n\n```js\n// @flow\n\nimport React from 'react'\nimport { NavLink } from 'react-router-dom'\nimport {\n HOME_PAGE_ROUTE,\n HELLO_PAGE_ROUTE,\n HELLO_ASYNC_PAGE_ROUTE,\n NOT_FOUND_DEMO_PAGE_ROUTE,\n} from '../../shared/routes'\n\nconst Nav = () =>\n \n\nexport default Nav\n```\n\nHere we simply create a bunch of `NavLink`s that use the previously declared routes.\n\n- Finally, edit `src/client/app.jsx` like so:\n\n```js\n// @flow\n\nimport React from 'react'\nimport { Switch } from 'react-router'\nimport { Route } from 'react-router-dom'\nimport { APP_NAME } from '../shared/config'\nimport Nav from './component/nav'\nimport HomePage from './component/page/home'\nimport HelloPage from './component/page/hello'\nimport HelloAsyncPage from './component/page/hello-async'\nimport NotFoundPage from './component/page/not-found'\nimport {\n HOME_PAGE_ROUTE,\n HELLO_PAGE_ROUTE,\n HELLO_ASYNC_PAGE_ROUTE,\n} from '../shared/routes'\n\nconst App = () =>\n\n \n
\nOpen your browser console.
\nHover me.
\nResize the window.
\n \n