jide

<Route getComponent={ getMyComponent }/>

export default async function getMyComponent(nextState, callback) {
  const data = await doSomethingAsync(nextState.params)

  const MyFinalComponent = props =>
    <MyComponent data={ data } {  ...props }/>

  callback(MyFinalComponent)
}

jide

import React, { Component } from 'react'
import { Link } from 'react-router'

export default class EnhancedLink extends Component {
  render() {
    const originalTo = this.props.to
    const to = typeof originalTo === 'object' ? originalTo : { pathname: originalTo }

    if (to.pathname.match(/\*/)) {
      const locationParts = window.location.pathname.split('/')

jide

class Example extends Component {
  state = {
    some: 'thing'
  }
}

// Equivalent to :
class Example extends Component {
  constructor(props) {
    super(props)

jide

// $ npm install babel-plugin-transform-class-properties

// .babelrc
{
  "plugins": ["transform-class-properties"]
}

// Example.js
class Example extends Component {
  handleClick = () => { // Arrow function, so no scope, "this" will be the instance

jide

// Use default :
import React from 'react'
import { render } from 'react-dom'
import MyComponentWrapper from './MyComponentWrapper'

ReactDOM.render(<MyComponentWrapper/>)

// Use a custom component :
import React from 'react'
import { render } from 'react-dom'

jide

import React, { Component } from 'react'
import DefaultMyComponent from './MyComponent'

export function inject({
  MyComponent
}) {
  class MyComponentWrapper extends Component {
    render() {
      return (
        <MyComponent { ...this.props }/>

jide

const App = ({ children, location }) => (
  <div>
    <ul>
      <li><Link to="/page1">Page 1</Link></li>
      <li><Link to="/page2">Page 2</Link></li>
    </ul>

    <ReactCSSTransitionGroup
      component="div"
      transitionName="example"

jide

const App = ({ children, location: { pathname } }) => {
  // Only take the first-level part of the path as key, instead of the whole path.
  const key = pathname.split('/')[1] || 'root'

  return (
    <div>
      <ul>
        <li><Link to="/page1">Page 1</Link></li>
        <li><Link to="/page2">Page 2</Link></li>
      </ul>

jide

import React, { PropTypes } from 'react';
import AsyncChild from 'react-async-child';
import Example from './Example';

const Demo = () => (
  <AsyncChild>
    { async () => <Example title={ await myAsyncFunc() }/> }
  </AsyncChild>
);

jide

const MyAsyncView = ({ components }) => (
  <Match
    pattern='/some/:id'
    children={ ({ matched, params: { id } = {} }) => (
      <AsyncChild>
        { async () => (
          <ReactCSSTransitionGroup
            transitionName='some-transition'
            transitionEnterTimeout={ 300 }
            transitionLeaveTimeout={ 300 }