Define presentational components as stateless functional components

examples/active-links/app.js

@@ -1,84 +1,60 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { render } from 'react-dom'
 import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'
 
 const ACTIVE = { color: 'red' }
 
-class App extends Component {
-  render() {
-    return (
-      <div>
-        <h1>APP!</h1>
-        <ul>
-          <li><Link      to="/"           activeStyle={ACTIVE}>/</Link></li>
-          <li><IndexLink to="/"           activeStyle={ACTIVE}>/ IndexLink</IndexLink></li>
+const App = ({ children }) => (
+  <div>
+    <h1>APP!</h1>
+    <ul>
+      <li><Link      to="/"           activeStyle={ACTIVE}>/</Link></li>
+      <li><IndexLink to="/"           activeStyle={ACTIVE}>/ IndexLink</IndexLink></li>
 
-          <li><Link      to="/users"      activeStyle={ACTIVE}>/users</Link></li>
-          <li><IndexLink to="/users"      activeStyle={ACTIVE}>/users IndexLink</IndexLink></li>
+      <li><Link      to="/users"      activeStyle={ACTIVE}>/users</Link></li>
+      <li><IndexLink to="/users"      activeStyle={ACTIVE}>/users IndexLink</IndexLink></li>
 
-          <li><Link      to="/users/ryan" activeStyle={ACTIVE}>/users/ryan</Link></li>
-          <li><Link      to={{ pathname: '/users/ryan', query: { foo: 'bar' } }}
-                                          activeStyle={ACTIVE}>/users/ryan?foo=bar</Link></li>
+      <li><Link      to="/users/ryan" activeStyle={ACTIVE}>/users/ryan</Link></li>
+      <li><Link      to={{ pathname: '/users/ryan', query: { foo: 'bar' } }}
+                                      activeStyle={ACTIVE}>/users/ryan?foo=bar</Link></li>
 
-          <li><Link      to="/about"      activeStyle={ACTIVE}>/about</Link></li>
-        </ul>
+      <li><Link      to="/about"      activeStyle={ACTIVE}>/about</Link></li>
+    </ul>
 
-        {this.props.children}
-      </div>
-    )
-  }
-}
+    {children}
+  </div>
+)
 
-class Index extends React.Component {
-  render() {
-    return (
-      <div>
-        <h2>Index!</h2>
-      </div>
-    )
-  }
-}
+const Index = () => (
+  <div>
+    <h2>Index!</h2>
+  </div>
+)
 
-class Users extends React.Component {
-  render() {
-    return (
-      <div>
-        <h2>Users</h2>
-        {this.props.children}
-      </div>
-    )
-  }
-}
+const Users = ({ children }) => (
+  <div>
+    <h2>Users</h2>
+    {children}
+  </div>
+)
 
-class UsersIndex extends React.Component {
-  render() {
-    return (
-      <div>
-        <h3>UsersIndex</h3>
-      </div>
-    )
-  }
-}
+const UsersIndex = () => (
+  <div>
+    <h3>UsersIndex</h3>
+  </div>
+)
 
-class User extends React.Component {
-  render() {
-    return (
-      <div>
-        <h3>User {this.props.params.id}</h3>
-      </div>
-    )
-  }
-}
+const User = ({ params: { id } }) => (
+  <div>
+    <h3>User {id}</h3>
+  </div>
+)
 
-class About extends React.Component {
-  render() {
-    return (
-      <div>
-        <h2>About</h2>
-      </div>
-    )
-  }
-}
+const About = () => (
+  <div>
+    <h2>About</h2>
+  </div>
+)
 
 render((
   <Router history={browserHistory}>

examples/animations/app.js

@@ -1,67 +1,49 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { render } from 'react-dom'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
 import './app.css'
 
-class App extends Component {
-  render() {
-    return (
-      <div>
-        <ul>
-          <li><Link to="/page1">Page 1</Link></li>
-          <li><Link to="/page2">Page 2</Link></li>
-        </ul>
-
-        <ReactCSSTransitionGroup
-          component="div"
-          transitionName="example"
-          transitionEnterTimeout={500}
-          transitionLeaveTimeout={500}
-        >
-          {React.cloneElement(this.props.children, {
-            key: this.props.location.pathname
-          })}
-        </ReactCSSTransitionGroup>
-
-      </div>
-    )
-  }
-}
-
-
-class Index extends Component {
-  render() {
-    return (
-      <div className="Image">
-        <h1>Index</h1>
-        <p>Animations with React Router are not different than any other animation.</p>
-      </div>
-    )
-  }
-}
-
-class Page1 extends Component {
-  render() {
-    return (
-      <div className="Image">
-        <h1>Page 1</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-      </div>
-    )
-  }
-}
-
-class Page2 extends Component {
-  render() {
-    return (
-      <div className="Image">
-        <h1>Page 2</h1>
-        <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-      </div>
-    )
-  }
-}
+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"
+      transitionEnterTimeout={500}
+      transitionLeaveTimeout={500}
+    >
+      {React.cloneElement(children, {
+        key: location.pathname
+      })}
+    </ReactCSSTransitionGroup>
+  </div>
+)
+
+const Index = () => (
+  <div className="Image">
+    <h1>Index</h1>
+    <p>Animations with React Router are not different than any other animation.</p>
+  </div>
+)
+
+const Page1 = () => (
+  <div className="Image">
+    <h1>Page 1</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+)
+
+const Page2 = () => (
+  <div className="Image">
+    <h1>Page 2</h1>
+    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+)
 
 render((
   <Router history={browserHistory}>

examples/breadcrumbs/app.js

@@ -1,67 +1,57 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
 import './app.css'
 
-class App extends Component {
-  render() {
-    const depth = this.props.routes.length
+const App = ({ children, routes }) => {
+  const depth = routes.length
 
-    return (
-      <div>
-        <aside>
-          <ul>
-            <li><Link to={Products.path}>Products</Link></li>
-            <li><Link to={Orders.path}>Orders</Link></li>
-          </ul>
-        </aside>
-        <main>
-          <ul className="breadcrumbs-list">
-            {this.props.routes.map((item, index) =>
-              <li key={index}>
-                <Link
-                  onlyActiveOnIndex={true}
-                  activeClassName="breadcrumb-active"
-                  to={item.path || ''}>
-                  {item.component.title}
-                </Link>
-                {(index + 1) < depth && '\u2192'}
-              </li>
-            )}
-          </ul>
-          {this.props.children}
-        </main>
-      </div>
-    )
-  }
+  return (
+    <div>
+      <aside>
+        <ul>
+          <li><Link to={Products.path}>Products</Link></li>
+          <li><Link to={Orders.path}>Orders</Link></li>
+        </ul>
+      </aside>
+      <main>
+        <ul className="breadcrumbs-list">
+          {routes.map((item, index) =>
+            <li key={index}>
+              <Link
+                onlyActiveOnIndex={true}
+                activeClassName="breadcrumb-active"
+                to={item.path || ''}>
+                {item.component.title}
+              </Link>
+              {(index + 1) < depth && '\u2192'}
+            </li>
+          )}
+        </ul>
+        {children}
+      </main>
+    </div>
+  )
 }
 
 App.title = 'Home'
 App.path = '/'
 
 
-class Products extends React.Component {
-  render() {
-    return (
-      <div className="Page">
-        <h1>Products</h1>
-      </div>
-    )
-  }
-}
+const Products = () => (
+  <div className="Page">
+    <h1>Products</h1>
+  </div>
+)
 
 Products.title = 'Products'
 Products.path = '/products'
 
-class Orders extends React.Component {
-  render() {
-    return (
-      <div className="Page">
-        <h1>Orders</h1>
-      </div>
-    )
-  }
-}
+const Orders = () => (
+  <div className="Page">
+    <h1>Orders</h1>
+  </div>
+)
 
 Orders.title = 'Orders'
 Orders.path = '/orders'