React on the Road

Talk given at Facebook Developer Circles Meetup - Porto Alegre/RS

Transcript

1. React on the Road Patterns for using React on large scale apps
2. Rodrigo Willrich talentos.globo.com
4. Agenda Composition; Higher-order components (HOCs); Presentational/Container components; Side effect; Context.
5. Composition
6. Favor composition over inheritance.
7. A simple example
8. const Button = ({ children }) => ( <button className="button"> {children} </button> )
9. If we need a button with an image on it, we can abstract it with an ImageButton component.
10. const IconButton = ({ icon, children }) => ( <Button> <span className={`icon-${icon}`} /> {children} </Button> )
11. We can also use composition to enhance a component, providing something to it:
12. class WithDimension extends React.Component { componentDidMount() { this.setState({ dimension: this.el.getBoundingClientRect() }) } render() { return ( <div ref={el => { this.el = el }}> {React.cloneElement( this.props.children, { dimension: this.state.dimension } )} </div> ) } }
13. and we can use it like this:
14. const MyComponent = ({ dimension }) => ( <p>Available space is {dimension.width} x {dimension.height}.</p> ) const App = ( <div> <WithDimension> <MyComponent /> </WithDimension> </div> )
15. (HOCs) Higher-order components
16. A higher-order component (HOC) is an advanced technique in React for reusing component logic. - https://facebook.github.io/react/docs/higher-order- components.html
17. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature. - https://facebook.github.io/react/docs/higher-order- components.html
18. HOCs are a pattern derived from component composition.
19. class WithDimension extends React.Component { componentDidMount() { this.setState({ dimension: this.el.getBoundingClientRect() }) } render() { return ( <div ref={el => { this.el = el }}> {React.cloneElement( this.props.children, { dimension: this.state.dimension } )} </div> ) } }
20. const withDimension = (BaseComponent) => ( return class extends React.Component { componentDidMount() { this.setState({ dimension: this.el.getBoundingClientRect() }) } render() { return ( <div ref={el => { this.el = el }}> <BaseComponent {...this.props} dimension={this.state.dimension} /> </div> ) } } )
21. The main difference is on how we use it:
22. const MyComponent = ({ dimension }) => ( <p>Available space is {dimension.width} x {dimension.height}.</p> ) const App = ( <div> <WithDimension> <MyComponent /> </WithDimension> </div> )
23. const MyComponent = ({ dimension }) => ( <p>Available space is {dimension.width} x {dimension.height}.</p> ) export default withTheme(MyComponent)
24. Tip: It helps to export the unenhanced component to unit test it, like so:
25. export const MyComponent = ({ dimension }) => ( <p>Available space is {dimension.width} x {dimension.height}.</p> ) export default withTheme(MyComponent)
26. Then you can use the named export, instead of the default, on unit tests:
27. import { MyComponent } from './my-component' // instead of // import MyComponent from './my-component'
28. Redux uses it to connect components to the store, like this:
29. const MyComponent = ({ counter }) => ( <p>The counter is {counter}</p> ) export default connect( state => ({ counter: state.counter }) )(MyComponent)
30. This pattern is so common that there's a library which provides a lot of HOCs and tools to assist using and composing them.
31. Recompose is a React utility belt for function components and higher-order components. Think of it like lodash for React. - https://github.com/acdlite/recompose
32. With recompose you can, among other things, compose more than one HOC:
33. const MyComponent = ({ dimension, counter }) => ( <p> The available space is {dimension.width} x {dimension.height} and the counter is {counter}. </p> ) const enhance = compose( withDimension, connect( state => ({ counter: state.counter }) ) ) export default enhance(MyComponent)
34. Presentational/Container components
35. This pattern is all about extracting containers, which are responsible for fetch logic and other kinds of business logic, out of presentational components.
36. class TodoList extends React.Component { state = { todos: [] } componentDidMount() { fetchJSON('/todos.json') .then(todos => this.setState({ todos })) } render() { return ( <ul> {this.props.state.todos.map(todo => ( <li>{todo.text}</li> ))} </ul> ) } }
37. We can extract the container out of the presentational component like so:
38. // Container class TodoListContainer extends React.Component { state = { todos: [] } componentDidMount() { fetchJSON('/todos.json') .then(todos => this.setState({ todos })) } render() { return <TodoList todos={this.state.todos} /> } }
39. // Presentational const TodoList = ({ todos }) => ( <ul> {todos.map(todo => ( <li>{todo.text}</li> ))} </ul> )
40. Tip: By extracting out the fetch logic from the presentational component we make it much more reusable.
41. People are reading *way* too much into Presentational vs Container components divide. Almost regretting I wrote that. - Dan Abramov, author of Presentational and Container Components
42. Side effect
43. Let's suppose we need to change some global state within the hierarchy of components.
44. An example of this could be a DocumentMetrics component, which sets metrics to be used on the page view, like so:
45. const App = () => ( <div> <DocumentMetrics viewName="Home" /> {/* ... */} <Sidebar> <DocumentMetrics abExperiment={{ 'experiment-name': 'alternative-name' }}> </Sidebar> </div> ) // DocumentMetrics.rewind() will return something like this: // { // viewName: 'Home', // abExperiment: { // 'experiment-name': 'alternative-name' // } // } MetricsService.registerPageView(DocumentMetrics.rewind())
46. That's exactly what this pattern is all about!
47. Create components whose prop changes map to a global side effect. - https://github.com/gaearon/react-side-effect
48. This pattern is very useful for page cicle things, like metrics, meta-tags, page title, etc.
49. <Parent> <Helmet> <title>My Title</title> <meta name="description" content="Helmet application" /> </Helmet> <Child> <Helmet> <title>Nested Title</title> <meta name="description" content="Nested component" /> </Helmet> </Child> </Parent> // which outputs: <head> <title>Nested Title</title> <meta name="description" content="Nested component"> </head>
50. A document head manager for React - https://github.com/n /react-helmet
51. It uses `react-side-effect` library to abstract the pattern behind it.
52. Context
53. In some cases, you want to pass data through the component tree without having to pass the props down manually at every level. You can do this directly in React with the powerful "context" API. - https://facebook.github.io/react/docs/context.html
54. Redux bindings for React uses context to make the store available to all the application.
55. Let's say we have a connected component:
56. const MyComponent = ({ counter }) => ( <p>The counter is {counter}</p> ) export connect(state => ({ counter: state.counter }))(MyComponent)
57. To make the store available to connect , we need to use Redux's Provider .
58. const store = createStore(reducer) const App = () => ( <Provider store={store}> <div> <MyComponent /> </div> </Provider> )
59. Another use case:
60. Let's imagine that we need to provide informations like the view and offer name to know were a Link is being rendered.
61. const App = () => ( <HomeView> <OfferA> <Link to="/some-view">Some view</Link> </OfferA> <OfferB> <Link to="/some-other-view">Some other view</Link> </OfferB> </HomeView> )
62. For this to work, we need a way of keeping view and offer in the context for Link to catch.
63. const App = () => ( <HomeView> <LinkMetrics view="Home"> <OfferA> <LinkMetrics offer="OfferA"> <Link to="/some-view">Some view</Link> </LinkMetrics> </OfferA> <OfferB> <LinkMetrics offer="OfferB"> <Link to="/some-other-view">Some other view</Link> </LinkMetrics> </OfferB> </LinkMetrics> </HomeView> )
64. In this case, LinkMetrics needs to act like the Redux's Provider .
65. class LinkMetrics extends React.Component { static contextTypes = { linkMetrics: React.PropTypes.object } static childContextTypes = { linkMetrics: React.PropTypes.object } getChildContext() { return { linkMetrics: { ...this.context.metrics, ...this.props } } } render() { return <div>{this.props.children}</div> } }
66. And our Link could be de ned in this way:
67. class Link extends React.Component { static contextTypes = { linkMetrics: React.PropTypes.object } handleClick = () => { const { view, offer } = this.context.linkMetrics console.log(`I was clicked at view ${view} and offer ${offer}`) } render() { return <a {...this.props} onClick={this.handleClick} /> } }
68. const App = () => ( <HomeView> <LinkMetrics view="Home"> <OfferA> <LinkMetrics offer="OfferA"> <Link to="/some-view">Some view</Link> // I was clicked at view "Home" and offer "OfferA" </LinkMetrics> </OfferA> <OfferB> <LinkMetrics offer="OfferB"> <Link to="/some-other-view">Some other view</Link> // I was clicked at view "Home" and offer "OfferB" </LinkMetrics> </OfferB> </LinkMetrics> </HomeView> )
69. This code I showed to you is pretty close to what we use in production at Globo Play.
70. Disclaimer: React's Context API is meant to be used responsibly and only by advanced users or libraries.
71. Tip: Extract container components that accesses the context.
72. Tip: Keeping this API contained in fewer components may help with future breaking changes.
73. Disclaimer: Do not prematurely optimize things!
74. Tip: Use the patterns that solve the problems you have!
75. Thank you!