Update examples to use functional components

examples/async/components/Picker.js

@@ -1,24 +1,17 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 
-export default class Picker extends Component {
-  render() {
-    const { value, onChange, options } = this.props
-
-    return (
-      <span>
-        <h1>{value}</h1>
-        <select onChange={e => onChange(e.target.value)}
-                value={value}>
-          {options.map(option =>
-            <option value={option} key={option}>
-              {option}
-            </option>)
-          }
-        </select>
-      </span>
-    )
-  }
-}
+const Picker = ({ value, onChange, options }) =>
+  <span>
+    <h1>{value}</h1>
+    <select onChange={e => onChange(e.target.value)}
+            value={value}>
+      {options.map(option =>
+        <option value={option} key={option}>
+          {option}
+        </option>)
+      }
+    </select>
+  </span>
 
 Picker.propTypes = {
   options: PropTypes.arrayOf(
@@ -27,3 +20,5 @@ Picker.propTypes = {
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired
 }
+
+export default Picker

examples/async/components/Posts.js

@@ -1,17 +1,14 @@
-import React, { PropTypes, Component } from 'react'
+import React, { PropTypes } from 'react'
 
-export default class Posts extends Component {
-  render() {
-    return (
-      <ul>
-        {this.props.posts.map((post, i) =>
-          <li key={i}>{post.title}</li>
-        )}
-      </ul>
-    )
-  }
-}
+const Posts = ({ posts }) =>
+  <ul>
+    {posts.map((post, i) =>
+      <li key={i}>{post.title}</li>
+    )}
+  </ul>
 
 Posts.propTypes = {
   posts: PropTypes.array.isRequired
 }
+
+export default Posts

examples/real-world/components/List.js

@@ -1,40 +1,36 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 
-export default class List extends Component {
-  renderLoadMore() {
-    const { isFetching, onLoadMoreClick } = this.props
-    return (
-      <button style={{ fontSize: '150%' }}
-              onClick={onLoadMoreClick}
-              disabled={isFetching}>
-        {isFetching ? 'Loading...' : 'Load More'}
-      </button>
-    )
-  }
-
-  render() {
-    const {
-      isFetching, nextPageUrl, pageCount,
-      items, renderItem, loadingLabel
-    } = this.props
-
-    const isEmpty = items.length === 0
-    if (isEmpty && isFetching) {
-      return <h2><i>{loadingLabel}</i></h2>
-    }
+const LoadMore = ({ isFetching, onLoadMoreClick }) =>
+  <button style={{ fontSize: '150%' }}
+          onClick={onLoadMoreClick}
+          disabled={isFetching}>
+    {isFetching ? 'Loading...' : 'Load More'}
+  </button>
 
-    const isLastPage = !nextPageUrl
-    if (isEmpty && isLastPage) {
-      return <h1><i>Nothing here!</i></h1>
-    }
+const List = ({
+  isFetching, nextPageUrl, pageCount,
+  items, renderItem, loadingLabel,
+  onLoadMoreClick
+}) => {
+  const isEmpty = items.length === 0
+  if (isEmpty && isFetching) {
+    return <h2><i>{loadingLabel}</i></h2>
+  }
 
-    return (
-      <div>
-        {items.map(renderItem)}
-        {pageCount > 0 && !isLastPage && this.renderLoadMore()}
-      </div>
-    )
+  const isLastPage = !nextPageUrl
+  if (isEmpty && isLastPage) {
+    return <h1><i>Nothing here!</i></h1>
   }
+
+  return (
+    <div>
+      {items.map(renderItem)}
+      {pageCount > 0 && !isLastPage &&
+        <LoadMore isFetching={isFetching}
+                  onLoadMoreClick={onLoadMoreClick} />
+      }
+    </div>
+  )
 }
 
 List.propTypes = {
@@ -51,3 +47,5 @@ List.defaultProps = {
   isFetching: true,
   loadingLabel: 'Loading...'
 }
+
+export default List

examples/real-world/components/Repo.js

@@ -1,31 +1,21 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import { Link } from 'react-router'
 
-export default class Repo extends Component {
-
-  render() {
-    const { repo, owner } = this.props
-    const { login } = owner
-    const { name, description } = repo
-
-    return (
-      <div className="Repo">
-        <h3>
-          <Link to={`/${login}/${name}`}>
-            {name}
-          </Link>
-          {' by '}
-          <Link to={`/${login}`}>
-            {login}
-          </Link>
-        </h3>
-        {description &&
-          <p>{description}</p>
-        }
-      </div>
-    )
-  }
-}
+const Repo = ({ repo: { name, description }, owner: { login } }) =>
+  <div className="Repo">
+    <h3>
+      <Link to={`/${login}/${name}`}>
+        {name}
+      </Link>
+      {' by '}
+      <Link to={`/${login}`}>
+        {login}
+      </Link>
+    </h3>
+    {description &&
+      <p>{description}</p>
+    }
+  </div>
 
 Repo.propTypes = {
   repo: PropTypes.shape({
@@ -36,3 +26,5 @@ Repo.propTypes = {
     login: PropTypes.string.isRequired
   }).isRequired
 }
+
+export default Repo

examples/real-world/components/User.js

@@ -1,22 +1,15 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import { Link } from 'react-router'
 
-export default class User extends Component {
-  render() {
-    const { login, avatarUrl, name } = this.props.user
-
-    return (
-      <div className="User">
-        <Link to={`/${login}`}>
-          <img src={avatarUrl} width="72" height="72" />
-          <h3>
-            {login} {name && <span>({name})</span>}
-          </h3>
-        </Link>
-      </div>
-    )
-  }
-}
+const User = ({ user: { login, avatarUrl, name } }) =>
+  <div className="User">
+    <Link to={`/${login}`}>
+      <img src={avatarUrl} width="72" height="72" />
+      <h3>
+        {login} {name && <span>({name})</span>}
+      </h3>
+    </Link>
+  </div>
 
 User.propTypes = {
   user: PropTypes.shape({
@@ -25,3 +18,5 @@ User.propTypes = {
     name: PropTypes.string
   }).isRequired
 }
+
+export default User

examples/real-world/containers/Root.dev.js

@@ -1,24 +1,20 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import { Provider } from 'react-redux'
 import routes from '../routes'
 import DevTools from './DevTools'
 import { Router } from 'react-router'
 
-export default class Root extends Component {
-  render() {
-    const { store, history } = this.props
-    return (
-      <Provider store={store}>
-        <div>
-          <Router history={history} routes={routes} />
-          <DevTools />
-        </div>
-      </Provider>
-    )
-  }
-}
+const Root = ({ store, history }) =>
+  <Provider store={store}>
+    <div>
+      <Router history={history} routes={routes} />
+      <DevTools />
+    </div>
+  </Provider>
 
 Root.propTypes = {
   store: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired
 }
+
+export default Root

examples/real-world/containers/Root.prod.js

@@ -1,20 +1,16 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import { Provider } from 'react-redux'
 import routes from '../routes'
 import { Router } from 'react-router'
 
-export default class Root extends Component {
-  render() {
-    const { store, history } = this.props
-    return (
-      <Provider store={store}>
-        <Router history={history} routes={routes} />
-      </Provider>
-    )
-  }
-}
+const Root = ({ store, history }) =>
+  <Provider store={store}>
+    <Router history={history} routes={routes} />
+  </Provider>
 
 Root.propTypes = {
   store: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired
 }
+
+export default Root

examples/shopping-cart/components/Cart.js

@@ -1,37 +1,35 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import Product from './Product'
 
-export default class Cart extends Component {
-  render() {
-    const { products, total, onCheckoutClicked } = this.props
+const Cart = ({ products, total, onCheckoutClicked }) => {
+  const hasProducts = products.length > 0
+  const nodes = !hasProducts ?
+    <em>Please add some products to cart.</em> :
+    products.map(product =>
+      <Product
+        title={product.title}
+        price={product.price}
+        quantity={product.quantity}
+        key={product.id}/>
+  )
 
-    const hasProducts = products.length > 0
-    const nodes = !hasProducts ?
-      <em>Please add some products to cart.</em> :
-      products.map(product =>
-        <Product
-          title={product.title}
-          price={product.price}
-          quantity={product.quantity}
-          key={product.id}/>
-    )
-
-    return (
-      <div>
-        <h3>Your Cart</h3>
-        <div>{nodes}</div>
-        <p>Total: &#36;{total}</p>
-        <button onClick={onCheckoutClicked}
-          disabled={hasProducts ? '' : 'disabled'}>
-          Checkout
-        </button>
-      </div>
-    )
-  }
+  return (
+    <div>
+      <h3>Your Cart</h3>
+      <div>{nodes}</div>
+      <p>Total: &#36;{total}</p>
+      <button onClick={onCheckoutClicked}
+        disabled={hasProducts ? '' : 'disabled'}>
+        Checkout
+      </button>
+    </div>
+  )
 }
 
 Cart.propTypes = {
   products: PropTypes.array,
   total: PropTypes.string,
   onCheckoutClicked: PropTypes.func
 }
+
+export default Cart

examples/shopping-cart/components/Product.js

@@ -1,14 +1,12 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 
-export default class Product extends Component {
-  render() {
-    const { price, quantity, title } = this.props
-    return <div> {title} - &#36;{price} {quantity ? `x ${quantity}` : null} </div>
-  }
-}
+const Product = ({ price, quantity, title }) =>
+  <div> {title} - &#36;{price} {quantity ? `x ${quantity}` : null} </div>
 
 Product.propTypes = {
   price: PropTypes.number,
   quantity: PropTypes.number,
   title: PropTypes.string
 }
+
+export default Product