Skip to content

Commit ca4f5a7

Browse files
Dylan Companjentimdorr
Dylan Companjen
authored and
timdorr
committed
Define presentational components as stateless functional components (#3510)
* Define presentational components as stateless functional components * Define presentational components as stateless functional components * Define presentational components as stateless functional components * Define presentational components as stateless functional components * Define presentational components as stateless functional components * Define presentational components as stateless functional components
1 parent 0616f6e commit ca4f5a7

File tree

7 files changed

+293
-414
lines changed

7 files changed

+293
-414
lines changed

‎examples/active-links/app.js‎

Lines changed: 43 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,60 @@
1-
import React, { Component } from 'react'
1+
import React from 'react'
22
import { render } from 'react-dom'
33
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'
44

55
const ACTIVE = { color: 'red' }
66

7-
class App extends Component {
8-
render() {
9-
return (
10-
<div>
11-
<h1>APP!</h1>
12-
<ul>
13-
<li><Link to="/" activeStyle={ACTIVE}>/</Link></li>
14-
<li><IndexLink to="/" activeStyle={ACTIVE}>/ IndexLink</IndexLink></li>
7+
const App = ({ children }) => (
8+
<div>
9+
<h1>APP!</h1>
10+
<ul>
11+
<li><Link to="/" activeStyle={ACTIVE}>/</Link></li>
12+
<li><IndexLink to="/" activeStyle={ACTIVE}>/ IndexLink</IndexLink></li>
1513

16-
<li><Link to="/users" activeStyle={ACTIVE}>/users</Link></li>
17-
<li><IndexLink to="/users" activeStyle={ACTIVE}>/users IndexLink</IndexLink></li>
14+
<li><Link to="/users" activeStyle={ACTIVE}>/users</Link></li>
15+
<li><IndexLink to="/users" activeStyle={ACTIVE}>/users IndexLink</IndexLink></li>
1816

19-
<li><Link to="/users/ryan" activeStyle={ACTIVE}>/users/ryan</Link></li>
20-
<li><Link to={{ pathname: '/users/ryan', query: { foo: 'bar' } }}
21-
activeStyle={ACTIVE}>/users/ryan?foo=bar</Link></li>
17+
<li><Link to="/users/ryan" activeStyle={ACTIVE}>/users/ryan</Link></li>
18+
<li><Link to={{ pathname: '/users/ryan', query: { foo: 'bar' } }}
19+
activeStyle={ACTIVE}>/users/ryan?foo=bar</Link></li>
2220

23-
<li><Link to="/about" activeStyle={ACTIVE}>/about</Link></li>
24-
</ul>
21+
<li><Link to="/about" activeStyle={ACTIVE}>/about</Link></li>
22+
</ul>
2523

26-
{this.props.children}
27-
</div>
28-
)
29-
}
30-
}
24+
{children}
25+
</div>
26+
)
3127

32-
class Index extends React.Component {
33-
render() {
34-
return (
35-
<div>
36-
<h2>Index!</h2>
37-
</div>
38-
)
39-
}
40-
}
28+
const Index = () => (
29+
<div>
30+
<h2>Index!</h2>
31+
</div>
32+
)
4133

42-
class Users extends React.Component {
43-
render() {
44-
return (
45-
<div>
46-
<h2>Users</h2>
47-
{this.props.children}
48-
</div>
49-
)
50-
}
51-
}
34+
const Users = ({ children }) => (
35+
<div>
36+
<h2>Users</h2>
37+
{children}
38+
</div>
39+
)
5240

53-
class UsersIndex extends React.Component {
54-
render() {
55-
return (
56-
<div>
57-
<h3>UsersIndex</h3>
58-
</div>
59-
)
60-
}
61-
}
41+
const UsersIndex = () => (
42+
<div>
43+
<h3>UsersIndex</h3>
44+
</div>
45+
)
6246

63-
class User extends React.Component {
64-
render() {
65-
return (
66-
<div>
67-
<h3>User {this.props.params.id}</h3>
68-
</div>
69-
)
70-
}
71-
}
47+
const User = ({ params: { id } }) => (
48+
<div>
49+
<h3>User {id}</h3>
50+
</div>
51+
)
7252

73-
class About extends React.Component {
74-
render() {
75-
return (
76-
<div>
77-
<h2>About</h2>
78-
</div>
79-
)
80-
}
81-
}
53+
const About = () => (
54+
<div>
55+
<h2>About</h2>
56+
</div>
57+
)
8258

8359
render((
8460
<Router history={browserHistory}>

‎examples/animations/app.js‎

Lines changed: 41 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,49 @@
1-
import React, { Component } from 'react'
1+
import React from 'react'
22
import { render } from 'react-dom'
33
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
44
import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
55
import './app.css'
66

7-
class App extends Component {
8-
render() {
9-
return (
10-
<div>
11-
<ul>
12-
<li><Link to="/page1">Page 1</Link></li>
13-
<li><Link to="/page2">Page 2</Link></li>
14-
</ul>
15-
16-
<ReactCSSTransitionGroup
17-
component="div"
18-
transitionName="example"
19-
transitionEnterTimeout={500}
20-
transitionLeaveTimeout={500}
21-
>
22-
{React.cloneElement(this.props.children, {
23-
key: this.props.location.pathname
24-
})}
25-
</ReactCSSTransitionGroup>
26-
27-
</div>
28-
)
29-
}
30-
}
31-
32-
33-
class Index extends Component {
34-
render() {
35-
return (
36-
<div className="Image">
37-
<h1>Index</h1>
38-
<p>Animations with React Router are not different than any other animation.</p>
39-
</div>
40-
)
41-
}
42-
}
43-
44-
class Page1 extends Component {
45-
render() {
46-
return (
47-
<div className="Image">
48-
<h1>Page 1</h1>
49-
<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>
50-
</div>
51-
)
52-
}
53-
}
54-
55-
class Page2 extends Component {
56-
render() {
57-
return (
58-
<div className="Image">
59-
<h1>Page 2</h1>
60-
<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>
61-
</div>
62-
)
63-
}
64-
}
7+
const App = ({ children, location }) => (
8+
<div>
9+
<ul>
10+
<li><Link to="/page1">Page 1</Link></li>
11+
<li><Link to="/page2">Page 2</Link></li>
12+
</ul>
13+
14+
<ReactCSSTransitionGroup
15+
component="div"
16+
transitionName="example"
17+
transitionEnterTimeout={500}
18+
transitionLeaveTimeout={500}
19+
>
20+
{React.cloneElement(children, {
21+
key: location.pathname
22+
})}
23+
</ReactCSSTransitionGroup>
24+
</div>
25+
)
26+
27+
const Index = () => (
28+
<div className="Image">
29+
<h1>Index</h1>
30+
<p>Animations with React Router are not different than any other animation.</p>
31+
</div>
32+
)
33+
34+
const Page1 = () => (
35+
<div className="Image">
36+
<h1>Page 1</h1>
37+
<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>
38+
</div>
39+
)
40+
41+
const Page2 = () => (
42+
<div className="Image">
43+
<h1>Page 2</h1>
44+
<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>
45+
</div>
46+
)
6547

6648
render((
6749
<Router history={browserHistory}>

‎examples/breadcrumbs/app.js‎

Lines changed: 39 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,57 @@
1-
import React, { Component } from 'react'
1+
import React from 'react'
22
import { render } from 'react-dom'
33
import { browserHistory, Router, Route, Link } from 'react-router'
44
import './app.css'
55

6-
class App extends Component {
7-
render() {
8-
const depth = this.props.routes.length
6+
const App = ({ children, routes }) => {
7+
const depth = routes.length
98

10-
return (
11-
<div>
12-
<aside>
13-
<ul>
14-
<li><Link to={Products.path}>Products</Link></li>
15-
<li><Link to={Orders.path}>Orders</Link></li>
16-
</ul>
17-
</aside>
18-
<main>
19-
<ul className="breadcrumbs-list">
20-
{this.props.routes.map((item, index) =>
21-
<li key={index}>
22-
<Link
23-
onlyActiveOnIndex={true}
24-
activeClassName="breadcrumb-active"
25-
to={item.path || ''}>
26-
{item.component.title}
27-
</Link>
28-
{(index + 1) < depth && '\u2192'}
29-
</li>
30-
)}
31-
</ul>
32-
{this.props.children}
33-
</main>
34-
</div>
35-
)
36-
}
9+
return (
10+
<div>
11+
<aside>
12+
<ul>
13+
<li><Link to={Products.path}>Products</Link></li>
14+
<li><Link to={Orders.path}>Orders</Link></li>
15+
</ul>
16+
</aside>
17+
<main>
18+
<ul className="breadcrumbs-list">
19+
{routes.map((item, index) =>
20+
<li key={index}>
21+
<Link
22+
onlyActiveOnIndex={true}
23+
activeClassName="breadcrumb-active"
24+
to={item.path || ''}>
25+
{item.component.title}
26+
</Link>
27+
{(index + 1) < depth && '\u2192'}
28+
</li>
29+
)}
30+
</ul>
31+
{children}
32+
</main>
33+
</div>
34+
)
3735
}
3836

3937
App.title = 'Home'
4038
App.path = '/'
4139

4240

43-
class Products extends React.Component {
44-
render() {
45-
return (
46-
<div className="Page">
47-
<h1>Products</h1>
48-
</div>
49-
)
50-
}
51-
}
41+
const Products = () => (
42+
<div className="Page">
43+
<h1>Products</h1>
44+
</div>
45+
)
5246

5347
Products.title = 'Products'
5448
Products.path = '/products'
5549

56-
class Orders extends React.Component {
57-
render() {
58-
return (
59-
<div className="Page">
60-
<h1>Orders</h1>
61-
</div>
62-
)
63-
}
64-
}
50+
const Orders = () => (
51+
<div className="Page">
52+
<h1>Orders</h1>
53+
</div>
54+
)
6555

6656
Orders.title = 'Orders'
6757
Orders.path = '/orders'

0 commit comments

Comments
 (0)