Tutoriel React React-router

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, hashHistory } from 'react-router';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import reducers from '../reducers';

import routes from '../routes';

let store = createStore(reducers);

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>{routes}</Router>
  </Provider>,
  document.getElementById('react-app')
);

Application.react.js

import React from 'react';
import { Link } from 'react-router';

class Application extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>My grocery list</h1>
        <header>
          <nav>
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="list">List</Link></li>
            </ul>
          </nav>
        </header>
        {this.props.children}
      </div>
    );
  }
}

export default Application;

Introduction.react.js

import React from 'react';

class Introduction extends React.Component {
  render() {
    return (
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem beatae dolorem minus obcaecati quaerat quam recusandae,
        rem reprehenderit totam? Excepturi explicabo id incidunt quas quia ratione totam ut vero voluptas.
      </p>
    );
  }
}

export default Introduction;

List.react.js

import React from 'react';
import { connect } from 'react-redux';

import GroceryList from './GroceryList.react';
import ItemAdder from './ItemAdder.react';

import { changeListArray, itemSubmit, itemIncreasing, itemNameChange } from '../actions/grocery-list-actions';
import baseItemsList from '../utils/baseList';

class List extends React.Component {
  constructor(props) {
    super(props);

    this.handleItemSubmit = this.handleItemSubmit.bind(this);
    this.handleNameChange = this.handleNameChange.bind(this);
  }

  componentWillMount() {
    let { dispatch } = this.props;

    dispatch( changeListArray(baseItemsList) );
  }

  componentWillReceiveProps(newProps) {
    let { dispatch, groceryList } = this.props;

    if(groceryList.itemList.length > 0 && newProps.groceryList.itemList.length > groceryList.itemList.length){
      dispatch( itemIncreasing(true) );

      setTimeout(() => {
        dispatch( itemIncreasing(false) );
      }, 3000);
    }
  }

  handleItemSubmit(e) {
    const { dispatch } = this.props;

    e.preventDefault();
    const form = document.getElementById('itemAdder');
    const name = document.querySelector('.newItemName').value;
    const type = document.querySelector('.newItemType').value;

    dispatch(itemSubmit(name, type));

    form.reset();
  }

  handleNameChange(index, name) {
    let { dispatch } = this.props;

    dispatch( itemNameChange(index, name) );
  }

  itemIncreaseFlash() {
    if(this.props.groceryList.itemsIncreasing){
      return (
        <div style={{backgroundColor: '#ECCA4B'}}>Nouvel item</div>
      );
    }
  }

  render() {
    const { groceryList } = this.props;

    return (
      <div id="list">
        {this.itemIncreaseFlash()}
        <GroceryList items={groceryList.itemList} onNameChange={this.handleNameChange} />
        <ItemAdder onItemSubmit={this.handleItemSubmit} />
      </div>
    );
  }
}

export default connect(state => ({
  groceryList: state.groceryList
}))(List);

routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import Application from './components/Application.react';
import Introduction from './components/Introduction.react';
import List from './components/List.react';

export default (
  <Route path="/" component={Application}>
    <IndexRoute component={Introduction} />
    <Route path="/list" component={List} />
  </Route>
);