Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactjs v0.14 changes

koba04
September 07, 2015

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

koba04

September 07, 2015
Tweet

More Decks by koba04

Other Decks in Programming

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