diff --git a/examples/todomvc/src/actions/index.js b/examples/todomvc/src/actions/index.js
index 2e52a7cf1b..0a7e94128c 100644
--- a/examples/todomvc/src/actions/index.js
+++ b/examples/todomvc/src/actions/index.js
@@ -1,25 +1,13 @@
import * as types from '../constants/ActionTypes'
-export function addTodo(text) {
- return { type: types.ADD_TODO, text }
-}
+export const addTodo = text => ({ type: types.ADD_TODO, text })
-export function deleteTodo(id) {
- return { type: types.DELETE_TODO, id }
-}
+export const deleteTodo = id => ({ type: types.DELETE_TODO, id })
-export function editTodo(id, text) {
- return { type: types.EDIT_TODO, id, text }
-}
+export const editTodo = (id, text) => ({ type: types.EDIT_TODO, id, text })
-export function completeTodo(id) {
- return { type: types.COMPLETE_TODO, id }
-}
+export const completeTodo = id => ({ type: types.COMPLETE_TODO, id })
-export function completeAll() {
- return { type: types.COMPLETE_ALL }
-}
+export const completeAll = () => ({ type: types.COMPLETE_ALL })
-export function clearCompleted() {
- return { type: types.CLEAR_COMPLETED }
-}
+export const clearCompleted = () => ({ type: types.CLEAR_COMPLETED })
diff --git a/examples/todomvc/src/components/Footer.js b/examples/todomvc/src/components/Footer.js
index 8ae9c59983..1a0ed720ea 100644
--- a/examples/todomvc/src/components/Footer.js
+++ b/examples/todomvc/src/components/Footer.js
@@ -8,8 +8,16 @@ const FILTER_TITLES = {
[SHOW_COMPLETED]: 'Completed'
}
-class Footer extends Component {
- renderTodoCount() {
+export default class Footer extends Component {
+ static propTypes = {
+ completedCount: PropTypes.number.isRequired,
+ activeCount: PropTypes.number.isRequired,
+ filter: PropTypes.string.isRequired,
+ onClearCompleted: PropTypes.func.isRequired,
+ onShow: PropTypes.func.isRequired
+ }
+
+ renderTodoCount = () => {
const { activeCount } = this.props
const itemWord = activeCount === 1 ? 'item' : 'items'
@@ -20,7 +28,7 @@ class Footer extends Component {
)
}
- renderFilterLink(filter) {
+ renderFilterLink = filter => {
const title = FILTER_TITLES[filter]
const { filter: selectedFilter, onShow } = this.props
@@ -33,7 +41,7 @@ class Footer extends Component {
)
}
- renderClearButton() {
+ renderClearButton = () => {
const { completedCount, onClearCompleted } = this.props
if (completedCount > 0) {
return (
@@ -61,13 +69,3 @@ class Footer extends Component {
)
}
}
-
-Footer.propTypes = {
- completedCount: PropTypes.number.isRequired,
- activeCount: PropTypes.number.isRequired,
- filter: PropTypes.string.isRequired,
- onClearCompleted: PropTypes.func.isRequired,
- onShow: PropTypes.func.isRequired
-}
-
-export default Footer
diff --git a/examples/todomvc/src/components/Footer.spec.js b/examples/todomvc/src/components/Footer.spec.js
index 4d46ac08cd..a0fa830e4c 100644
--- a/examples/todomvc/src/components/Footer.spec.js
+++ b/examples/todomvc/src/components/Footer.spec.js
@@ -3,7 +3,7 @@ import TestUtils from 'react-addons-test-utils'
import Footer from './Footer'
import { SHOW_ALL, SHOW_ACTIVE } from '../constants/TodoFilters'
-function setup(propOverrides) {
+const setup = propOverrides => {
const props = Object.assign({
completedCount: 0,
activeCount: 0,
@@ -22,14 +22,15 @@ function setup(propOverrides) {
}
}
-function getTextContent(elem) {
+const getTextContent = elem => {
const children = Array.isArray(elem.props.children) ?
elem.props.children : [ elem.props.children ]
- return children.reduce(function concatText(out, child) {
+ return children.reduce((out, child) =>
+ // Concatenate the text
// Children are either elements or text strings
- return out + (child.props ? getTextContent(child) : child)
- }, '')
+ out + (child.props ? getTextContent(child) : child)
+ , '')
}
describe('components', () => {
diff --git a/examples/todomvc/src/components/Header.js b/examples/todomvc/src/components/Header.js
index aeb8303819..996bbc818a 100644
--- a/examples/todomvc/src/components/Header.js
+++ b/examples/todomvc/src/components/Header.js
@@ -1,8 +1,12 @@
import React, { PropTypes, Component } from 'react'
import TodoTextInput from './TodoTextInput'
-class Header extends Component {
- handleSave(text) {
+export default class Header extends Component {
+ static propTypes = {
+ addTodo: PropTypes.func.isRequired
+ }
+
+ handleSave = text => {
if (text.length !== 0) {
this.props.addTodo(text)
}
@@ -13,15 +17,9 @@ class Header extends Component {
)
}
}
-
-Header.propTypes = {
- addTodo: PropTypes.func.isRequired
-}
-
-export default Header
diff --git a/examples/todomvc/src/components/Header.spec.js b/examples/todomvc/src/components/Header.spec.js
index eab9bd91f9..6b63df2a34 100644
--- a/examples/todomvc/src/components/Header.spec.js
+++ b/examples/todomvc/src/components/Header.spec.js
@@ -3,7 +3,7 @@ import TestUtils from 'react-addons-test-utils'
import Header from './Header'
import TodoTextInput from './TodoTextInput'
-function setup() {
+const setup = () => {
const props = {
addTodo: jest.fn()
}
diff --git a/examples/todomvc/src/components/MainSection.js b/examples/todomvc/src/components/MainSection.js
index f5c2804010..92bc45b05b 100644
--- a/examples/todomvc/src/components/MainSection.js
+++ b/examples/todomvc/src/components/MainSection.js
@@ -9,21 +9,19 @@ const TODO_FILTERS = {
[SHOW_COMPLETED]: todo => todo.completed
}
-class MainSection extends Component {
- constructor(props, context) {
- super(props, context)
- this.state = { filter: SHOW_ALL }
+export default class MainSection extends Component {
+ static propTypes = {
+ todos: PropTypes.array.isRequired,
+ actions: PropTypes.object.isRequired
}
- handleClearCompleted() {
- this.props.actions.clearCompleted()
- }
+ state = { filter: SHOW_ALL }
- handleShow(filter) {
- this.setState({ filter })
- }
+ handleClearCompleted = () => this.props.actions.clearCompleted()
+
+ handleShow = filter => this.setState({ filter })
- renderToggleAll(completedCount) {
+ renderToggleAll = completedCount => {
const { todos, actions } = this.props
if (todos.length > 0) {
return (
@@ -35,7 +33,7 @@ class MainSection extends Component {
}
}
- renderFooter(completedCount) {
+ renderFooter = completedCount => {
const { todos } = this.props
const { filter } = this.state
const activeCount = todos.length - completedCount
@@ -74,10 +72,3 @@ class MainSection extends Component {
)
}
}
-
-MainSection.propTypes = {
- todos: PropTypes.array.isRequired,
- actions: PropTypes.object.isRequired
-}
-
-export default MainSection
diff --git a/examples/todomvc/src/components/MainSection.spec.js b/examples/todomvc/src/components/MainSection.spec.js
index 245b4aeb2b..f5924548bb 100644
--- a/examples/todomvc/src/components/MainSection.spec.js
+++ b/examples/todomvc/src/components/MainSection.spec.js
@@ -5,7 +5,7 @@ import TodoItem from './TodoItem'
import Footer from './Footer'
import { SHOW_ALL, SHOW_COMPLETED } from '../constants/TodoFilters'
-function setup(propOverrides) {
+const setup = propOverrides => {
const props = Object.assign({
todos: [
{
diff --git a/examples/todomvc/src/components/TodoItem.js b/examples/todomvc/src/components/TodoItem.js
index a892951842..6aa4a0adb8 100644
--- a/examples/todomvc/src/components/TodoItem.js
+++ b/examples/todomvc/src/components/TodoItem.js
@@ -2,19 +2,21 @@ import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'
import TodoTextInput from './TodoTextInput'
-class TodoItem extends Component {
- constructor(props, context) {
- super(props, context)
- this.state = {
- editing: false
- }
+export default class TodoItem extends Component {
+ static propTypes = {
+ todo: PropTypes.object.isRequired,
+ editTodo: PropTypes.func.isRequired,
+ deleteTodo: PropTypes.func.isRequired,
+ completeTodo: PropTypes.func.isRequired
}
- handleDoubleClick() {
- this.setState({ editing: true })
+ state = {
+ editing: false
}
- handleSave(id, text) {
+ handleDoubleClick = () => this.setState({ editing: true })
+
+ handleSave = (id, text) => {
if (text.length === 0) {
this.props.deleteTodo(id)
} else {
@@ -40,7 +42,7 @@ class TodoItem extends Component {
type="checkbox"
checked={todo.completed}
onChange={() => completeTodo(todo.id)} />
-