Михаил Горячкин

import React from 'react/addons'
import Router, {Route, DefaultRoute, RouteHandler, Link} from 'react-router';
import RouterContainer from './services/RouterContainer';

const { CSSTransitionGroup } = React.addons;

class PageOne extends React.Component {
    render() {
        return (
            <div className="Image">
                <h1>Page 1</h1>
                <p>Тут контентик для первой страницы!</p>
            </div>
        )
    }
}

class PageTwo extends React.Component {
    render() {
        return (
            <div className="Image">
                <h1>Page 2</h1>
                <p>Тут контентик для второй страницы</p>
            </div>
        )
    }
}

class App extends React.Component {
    render() {
        var key = RouterContainer.getRoute();
        return (
            <div>
                <ul>
                    <li>
                        <Link to="/page1">Page 1</Link>
                    </li>
                    <li>
                        <Link to="/page2">Page 2</Link>
                    </li>
                </ul>
                <CSSTransitionGroup component="div" transitionName="example">
                    <RouteHandler key={key}/>
                </CSSTransitionGroup>
            </div>
        );
    }
}
//Create router config
var routes = (
    <Route handler={App} >
        <Route name="page1" handler={PageOne} />
        <Route name="page2" handler={PageTwo} />
    </Route>
);
var router = Router.create({routes});
RouterContainer.set(router);

(function (w, d, R) {
    router.run(function (Handler) {
        React.render(<Handler />, d.querySelector('#example'));
    });
}(window, document, React));

.Image {
  position: absolute;
  height: 400px;
  width: 400px;
}

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0;
}

.link-active {
  color: #bbbbbb;
  text-decoration: none;
}

import {Dispatcher} from 'flux';
export default new Dispatcher();

import AppDispatcher from './AppDispatcher.js';
export default {
    firstAction(){
        AppDispatcher.dispatch({
            actionType: 'FIRST__ACTION'
        });
    },
    secondAction(){
        AppDispatcher.dispatch({
            actionType: 'SECOND__ACTION'
        });
    }
}

import AppDispatcher from './AppDispatcher.js';
export default class AppStore {
    constructor() {
         AppDispatcher.register(function (action) {
             switch (action.actionType) {
                 case 'FIRST__ACTION':
                     //Первое действие
                     break;
                 case 'SECOND__ACTION':
                     //Второе действие
                     break;
             }
         });
    }
}

<div class="container">
</div>

var Test = React.createClass({
  getInitialState: function() {
    return {disabled: true};
  },
  clickHandlers: function() {
    this.setState({disabled: false});
  },
  render: function() {
    return (
      <div>
          <button disabled={this.state.disabled}>Тест</button>
          <button onClick={this.clickHandlers}>Сменить</button>
      </div>
    );
  }
});
React.renderComponent(Test({}), document.querySelector(".container"));

beforeSend: function() {
                this.setState({
                    disabled: "disabled"
                });
            },
            ....
            complete: function (){
                this.setState({
                    disabled: "enable"
                });
            }

submitLogin: function() {
        var that = this;
        ....
        $.ajax({
            ....
            beforeSend: function() {
                that.setState({
                    disabled: "disabled"
                });
            },
            ....
            complete: function (){
                that.setState({
                    disabled: "enable"
                });
            },
            ....
        })
        ....
    }