IN REACT HIGHER ORDER COMPONENTS

✓ @CEF62 • GITHUB/CEF62 ✓ SENIOR ENGINEER @ ✓ ITALIAN REACT & ANGULAR COMMUNITIES

FROM DOCUMENTS TO COMPONENTS

HYPERTEXT MARKUP LANGUAGE

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

ANGULARJS 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 }) } } })

REACT 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’) )

ALL MODERN FRAMEWORKS ARE COMPONENT ORIENTED •REACT •ANGULAR 2 •POLYMER

AN APPLICATION IS A TREE OF COMPONENTS EVERYTHING IS A COMPONENT

COMPONENTS ARE • Composable • Encapsulated • Reusable • Easy to design

SMALL, REUSABLE, PURE FUNCTIONS, EASY TO TEST PRESENTATIONAL COMPONENTS

STATELESS FUNCTIONAL COMPONENTS const Label = (props) =>

{props.children}

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

COMPONENT LIFECYCLE

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() {} }

CONTEXT- AWARE, STATEFUL, DYNAMIC, POWERFUL CONTAINER COMPONENTS

STATEFUL COMPONENTS 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} ) } }

REDUCE CODE BOILERPLATE

COMPONENTS SHARE FUNCTIONALITIES 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 } }

REACT MIXINS

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

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 } })

HIGHER ORDER FUNCTIONS

— Marijn Haverbeke (eloquent javascript) HIGHER-ORDER FUNCTIONS ALLOW US TO ABSTRACT OVER ACTIONS, NOT JUST VALUES. ” “

HOF 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 works!`)) // print -> It works!

(TO)HIGHER ORDER COMPONE NTS FROM HIGHER ORDER FUNCTIONS

const Wrapped = () =>

Wrapped Comp

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

REDUCE DUPLICATION OF CODE 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) => )

DECORATOR PROPOSAL @loadData class Box extends React.Component { render() { return } } @loadData class User extends React.Component { render() { return } }

- Declarative - Customizable - Easy to read - Enforce composition HOC VS MIXINS Imperative - Favors inheritance - Hard to read - Method names collision - Access component state -

BEST PRACTICES HIGHER ORDER COMPONENTS • Expose wrapped component • Pass props to wrapped component • Expose statics methods and props from wrapped component

CODE SEE ONLINE

THANKS! @CEF62