higher order components In react 2016

Senior engineer @ . Italian react & angular communities Matteo Ronchi @cef62 github/cef62

From Documents to components

HyperText Markup Language

$(document).ready(() => { $.ajax(‘my-url.php’) .done((data) => { $(‘#my-title’).text(data.title) $(‘#my-contents’).text(data.contents) }) }) jQuery

angular.module(‘app’, []).directive(‘myPage’, function($http) { return { scope: { myUrl: ‘@’} template: `<div> <h1>{{myTitle}}</h1> <p>{{myContents}}</p> </div>` link: function(scope) { $http.get(scope.myUrl).success((data) => { scope.myTitle = data.title scope.myContents = data.contents }) } } }) AngularJS

class App extends React.Component { componentWillMount() { axios.get(this.props.myUrl).then(({ title, contents }) => { this.setState({ title, contents }) }) } render() { return ( <div> <h1>{this.state.title}</h1> <p>{this.state.contents}</p> </div> ) } } ReactDOM.render(<App myUrl=“my-url.php” />, document.getElementById(‘root’)) React

react angular 2 polymer all modern frameworks are component oriented

Everything is a Component an application is a tree of components

Components are • Composable • Encapsulated • Reusable • Easy to design

presentational components small, reusable, pure functions, easy to test

const Label = (props) =>

{props.children}

const Icon = (props) => { return ( {props.label} ) } const App = () => Stateless Functional Components

Component lifecycle

class MyComponent extends React.Component { // Component Initialization constructor(props) {} // component ready to be mounted componentWillMount() {} // Props have changed componentWillReceiveProps(nextProps) {} // prevent rendering if not required shouldComponentUpdate(nextProps, nextState) {} // Prepare before rendering componentWillUpdate(nextProps, nextState) {} } Component Lifecycle

class MyComponent extends React.Component { // create/update the component render() {} // Component DOM it’s been created componentDidMount() {} // Component DOM it’s been updated componentDidUpdate(prevProps, prevState) {} // cleanup before component destruction componentWillUnmount() {} } Component Lifecycle

Container Components Context-aware, stateful, dynamic, powerful

class Toggle extends React.Component { constructor(props) { super(props) this.state = { enabled: false } this.toggle = this.toggle.bind(this) } toggle() { this.setState({ enabled: !this.state.enabled }) } render() { const cls = this.state.enabled ?'btn-success':'btn-danger' return ( {this.props.label} ) } } Stateful Components

REDUCE code boilerplAte

class Box extends React.Component { constructor(props) { this.state = { info: {} } } componentWillMount() { axios.get(this.props.url).then( ({ data }) => this.setState({ info: data }) ) } render() { return } } class User extends React.Component { constructor(props) { this.state = { user: {} } } componentWillMount() { axios.get(this.props.url).then( ({ data }) => this.setState({ user: data }) ) } render() { return } } Components Share Functionalities

REACT mixins

const LoadDataMixin = { loadData(url, targetField) { axios.get(url).then( ({ data }) => this.setState({ [targetField]: data }) ) } } React Mixins

const BoxInfo = React.createClass({ mixins: [LoadDataMixin], getInitialState() { return { info: {} } }, componentWillMount() { this.loadData(this.props.url, 'info') }, render() { return } }) const UserPanel = React.createClass({ mixins: [LoadDataMixin], getInitialState() { return { user: {} } }, componentWillMount() { this.loadData(this.props.url, 'user') }, render() { return } }) React Mixins

higher order functions

— Marijn Haverbeke ( eloquent javascript ) Higher-order functions allow us to abstract over actions, not just values.

function applyVat(vat) { return (value) => ((vat + 100) / 100) * value } const applyVat22 = applyVat(22) console.log(applyVat22(100)) // print -> 122 function maybe(condition, action) { if (condition) { action() } } const action = (msg) => () => console.log(msg) maybe(true, action(`It works!`)) maybe(false, action(`Doesn't work!`)) // print -> It works! HoF

From Higher order functions ( TO ) Higher order components

const Wrapped = () =>

Wrapped Comp

const wrapper = (Comp) => () => { return } const FinalComponent = wrapper(Wrapped) const App = () => { return ( ) } Simple HoC

const loadData = (Component) => { return class LoadDataWrapper extends React.Component { constructor(props) { this.state = { data: {} } } componentWillMount() { axios.get(this.props.url).then( ({ data }) => this.setState({ data }) ) } render() { const props = Object.assign({}, this.props, this.state) return React.createElement(Component, props) } } } const Box = loadData((props) => ) const User = loadData((props) => ) Reduce Duplication of Code

@loadData class Box extends React.Component { render() { return } } @loadData class User extends React.Component { render() { return } } // See https://github.com/wycats/javascript-decorators Decorator Proposal

HoC vs Mixins - Declarative - Customizable - Easy to read - Enforce composition Imperative - Favors inheritance - Hard to read - Method names collision - Access component state -

HoC - Best Practices • Expose wrapped component • Pass props to wrapped component • Expose statics methods and props from wrapped component

code See online

thanks ! @CEF62