Reactjs v0.14 changes

A slide of #reactjs_meetup #2 written about React.js v0.14

Edit 2015/09/17: Module pattern components are not Stateless Components

Transcript

1. React.js v0.14 changes
   React.js meetup #2 @koba04
   

   View Slide

2. @koba04
   • Web Application Engineer
   • http://koba04.com/
   

   View Slide

3. Thanks for
   many stocks and bookmarks!!
   

   View Slide

4. http://blog.coderifleman.com/post/122232296024/reactjs%EB%A5%BC-%EC%9D%B4%ED%95%B4%ED
   %95%98%EB%8B%A41
   Thanks for
   translating into Korean!
   

   View Slide

5. View Slide

6. v0.14
   NO
   W
   BETA-3!
   This slide based on the master branch. (2fa59aa)
   

   View Slide

7. Stateless Components!
   • You can define ReactComponent with just a
   function!
   • More performance optimizations.
   • As minimal implementation in v0.14.
   

   View Slide

8. Stateless Components
   function Avatar(props) {
   return (
   
   {props.name}
   
   
   );
   }
   function Modal({title, children}) {
   return (
   
   {title}
   {children}
   
   );
   }
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. Stateless Components
    // PropTypes
    function Avatar({name, id) {
    return (
    
    {name}
    
    
    );
    }
    Avatar.defaultProps = {name: ‘default’, id: 999};
    Avatar.propTypes = {
    name: React.PropTypes.string.isRequired,
    id: React.PropTypes.number.isRequired
    };
    

    View Slide

13. Stateless Components
    // Context
    function Avatar({name, id, context) {
    const {staticHost} = context;
    return (
    
    {name}
    
    
    );
    }
    Avatar.contextTypes = {
    staticHost: React.PropTypes.string
    };
    

    View Slide

14. Stateless Components
    // Module pattern
    function Avatar({name, id) {
    return {
    render() {
    return (
    
    {name}
    
    
    );
    },
    shouldComponentUpdate(nextProps) {
    return this.props.name !== nextProps.name;
    }
    };
    }
    Sorry, I’ve misunderstood…
    This is not treated as Stateless Components
    

    View Slide

15. DOM node refs
    • You can get DOM nodes as the DOM Component
    refs!
    • React.render with DOM Component returns DOM
    nodes
    • ReactDOM.findDOMNode still uses for Composite
    Component.
    

    View Slide

16. DOM node refs
    class App extends React.Component {
    componentDidMount() {
    this.refs.text.focus();
    }
    render() {
    return ;
    }
    }
    const el = React.render(, document.querySelector(‘#app’));
    console.log(el.innerHTML);
    const app = React.render(, document.querySelector(‘#app’));
    console.log(ReactDOM.findDOMNode(app).innerHTML);
    

    View Slide

17. Separate packages
    • React
    • Isomorphic libraries
    • ReactDOM
    • DOM Environment
    • Including server-side rendering
    • Addons
    • react-addons-{name}
    

    View Slide

18. React
    • npm install react;
    • import React from ‘react’;
    • React.Component, React.createElement,
    React.Proptypes, React.Children...
    • Isomorphic - DOM, Native, Canvas...
    

    View Slide

19. ReactDOM
    • npm install react-dom
    • import ReactDOM from ‘react-dom’;
    • ReactDOM.render, ReactDOM.findDOMNode,
    ReactDOM.unmountComponentAtNode...
    • import ReactDOMServer from ‘react-dom/server’;
    • ReactDOMServer.renderToString,
    ReactDOMServer.renderToStaticMarkup
    

    View Slide

20. import React from ‘react’;
    import ReactDOM from ‘react-dom’;
    class App extends React.Component {
    render() {
    const {name} = this.props;
    return (
    
    Hello {name}
    
    );
    }
    }
    ReactDOM.render(, document.getElementById(‘app’));
    

    View Slide

21. Addons
    • npm install react-addons-{name}
    • transition-group, css-transition-group,
    • linked-state-mixin, pure-render-mixin,
    • create-fragment, shallow-compare,
    • update, clone-with-props,
    • test-utils, perf
    

    View Slide

22. unstable_batchedUpdates
    • Deprecate React.addons.batched_updates
    const c = ReactDOM.render(, document.querySelector('#app'));
    ReactDOM.unstable_batchedUpdates(() => {
    c.setState({count: c.state.count});
    c.setState({count: c.state.count});
    });
    

    View Slide

23. src
    ᵓᴷᴷ addons
    ᴹ ᵓᴷᴷ link
    ᴹ ᵓᴷᴷ transitions
    ᵓᴷᴷ isomorphic
    ᴹ ᵓᴷᴷ children
    ᴹ ᵓᴷᴷ classic
    ᴹ ᴹ ᵓᴷᴷ class
    ᴹ ᴹ ᵓᴷᴷ element
    ᴹ ᴹ ᵋᴷᴷ types
    ᴹ ᵓᴷᴷ deprecated
    ᴹ ᵋᴷᴷ modern
    ᴹ ᵓᴷᴷ class
    ᴹ ᵓᴷᴷ element
    ᴹ ᵋᴷᴷ types
    ᵓᴷᴷ renderers
    ᴹ ᵓᴷᴷ dom
    ᴹ ᴹ ᵓᴷᴷ client
    ᴹ ᴹ ᵓᴷᴷ server
    ᴹ ᴹ ᵋᴷᴷ shared
    ᴹ ᵋᴷᴷ shared
    ᴹ ᵓᴷᴷ event
    ᴹ ᵋᴷᴷ reconciler
    ᵓᴷᴷ shared
    ᴹ ᵓᴷᴷ stubs
    ᴹ ᵓᴷᴷ utils
    ᴹ ᵋᴷᴷ vendor
    ᵋᴷᴷ test
    

    View Slide

24. Deprecate react-tools
    • use Babel instead of react-tools
    • jsx command -> babel
    • reactify -> babelify
    • JSXTransform -> babel-core/browser.js
    • node-jsx -> babel/register
    

    View Slide

25. View Slide

26. React Babel
    • Babel optimisation options for React.
    • optimisation.react.constantElements
    • optimisation.react.inlineElements
    • for production build.
    

    View Slide

27. http://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html
    

    View Slide

28. constantElements
    class App extends React.Component {
    render() {
    return hello{this.props.name};
    }
    }
    // ↓↓
    var _ref = _react2['default'].createElement(‘span', null, 'hello');
    var App = (function (_React$Component) {
    // …
    _createClass(App, [{
    key: 'render',
    value: function render() {
    return _react2['default'].createElement(
    ‘div’,
    null,
    _ref,
    _react2['default'].createElement(‘span', null, this.props.name)
    );
    }
    }]);
    

    View Slide

29. inlineElements
    ReactDOM.render(
    foo, document.getElementById(‘app')
    );
    // ↓↓
    _reactDom2['default'].render({
    type: App,
    ref: null,
    props: _defaultProps(App.defaultProps, {
    children: {
    type: 'div',
    ref: null,
    props: {children: 'foo'},
    key: null
    },
    name: 'foo'
    }),
    key: null
    }, document.getElementById('app'));
    

    View Slide

30. Babel 6.0
    • https://github.com/babel/babel/issues/2168
    • No internal transformers.
    • Presets
    • "plugins": ["preset-es2015", "preset-react"]
    

    View Slide

31. Presets
    • babel-preset-react
    // index.js
    module.exports = {
    plugins: [
    require("babel-plugin-jsx"),
    require("babel-plugin-flow"),
    require("babel-plugin-react-jsx"),
    require("babel-plugin-flow-comments"),
    ]
    };
    

    View Slide

32. Others
    • Allow arbitrary attributes on dashed tags.
    • Object.freeze props in createElement in DEV.
    • Make React.addons.createFragment return a toArray.
    • Kill _isReactElement and ComponentClass.type.
    • Deprecated React.addons.cloneWithProps.
    me!
    

    View Slide

33. View Slide

34. W
    

    View Slide

35. v0.15?
    • Garbage collection release
    • Shortly after 0.14?
    • Remove monkey patching of DOM elements for refs.
    • Remove deprecated APIs, making properly decoupled
    • Deprecate replaceState and isMounted?
    • Add trusted key for ReactElements?
    

    View Slide

36. View Slide

37. View Slide

38. Animation
    https://github.com/chenglou/react-motion
    

    View Slide

39. Slack
    http://www.reactiflux.com/
    

    View Slide

40. Discussion
    https://discuss.reactjs.org/
    

    View Slide

41. Thank you!
    speakerdeck.com/koba04
    

    View Slide