client/app/bundle/HelloWorld/
  actions/
    helloWorldActionCreators.jsx
  components/
    HelloWorld.jsx
  constants/
    helloWorldConstants.jsx
  containers/
    HelloWorldContainer.jsx
  reducers/
    helloWorldReducer.jsx
  startup/
    HelloWorldApp.jsx
    registration.jsx
  store/
    helloWorldStore.jsx

// Simple example of a React "smart" component
 
import { connect } from 'react-redux';
import HelloWorld from '../components/HelloWorld';
import * as actions from '../actions/helloWorldActionCreators';
 
// Which part of the Redux global state does our component want to receive as props?
const mapStateToProps = (state) => ({ name: state.name });
 
// Don't forget to actually use connect!
// Note that we don't export HelloWorld, but the redux "connected" version of it.
// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples
export default connect(mapStateToProps, actions)(HelloWorld);

import React, { PropTypes } from 'react';
 
const HelloWorld = ({ name, updateName }) => (
  <div>
    <h3>
      Hello, {name}!
    </h3>
    <hr />
    <form >
      <label htmlFor="name">
        Say hello to:
      </label>
      <input
        id="name"
        type="text"
        value={name}
        onChange={(e) => updateName(e.target.value)}
      />
    </form>
  </div>
);
 
HelloWorld.propTypes = {
  name: PropTypes.string.isRequired,
  updateName: PropTypes.func.isRequired,
};
 
export default HelloWorld;

import React, { Component } from 'react';
import { connect } from 'react-redux';
import InformationList from '../components/InformationList';
import * as actions from '../actions/indexPageActionCreators';
 
class IndexPage extends Component {
  render() {
    return (
      <div>
        Welcome to my site !
        <InformationList informations={this.props.informations} />
      </div>
    );
  }
}
 
const mapStateToProps = (state) => ({ informations: state.informations });
 
export default connect(mapStateToProps, actions)(IndexPage);

import React, { Component, PropTypes } from 'react';
 
class InformationList extends Component {
  static propTypes {
    informations: PropTypes.array.isRequired,
  }
 
  render() {
    return (
      <ul className="informations">
        {this.props.informations.map((information, index) => {
          <Information {...information} />
        })}
      </ul>
    );
  }
}
 
class Information extends Component {
  static propTypes {
    title: PropTypes.string.isRequired,
    body: PropTypes.string.isRequired,
  }
 
  render() {
    return (
      <li className="information">
        <span class="title">{this.props.title}</span>
        <span class="body">{this.props.body}</span>
      </li>
    );
  }
}
 
export default InformationList;