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

Reactjs v0.14 changes

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=47 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

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=128

koba04

September 07, 2015
Tweet

Transcript

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

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

  3. Thanks for many stocks and bookmarks!!

  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!

  5. None
  6. v0.14 NO W BETA-3! This slide based on the master

    branch. (2fa59aa)
  7. Stateless Components! • You can define ReactComponent with just a

    function! • More performance optimizations. • As minimal implementation in v0.14.
  8. Stateless Components function Avatar(props) { return ( <div> <span>{props.name}</span> <img

    src={`/img/user/${props.id}.png`} /> </div> ); } function Modal({title, children}) { return ( <div className=“modal”> <p className=“modal-title”>{title}</p> {children} </div> ); }
  9. None
  10. None
  11. None
  12. Stateless Components // PropTypes function Avatar({name, id) { return (

    <div> <span>{name}</span> <img src={`/img/user/${id}.png`} /> </div> ); } Avatar.defaultProps = {name: ‘default’, id: 999}; Avatar.propTypes = { name: React.PropTypes.string.isRequired, id: React.PropTypes.number.isRequired };
  13. Stateless Components // Context function Avatar({name, id, context) { const

    {staticHost} = context; return ( <div> <span>{name}</span> <img src={`${staticHost}/img/user/${id}.png`} /> </div> ); } Avatar.contextTypes = { staticHost: React.PropTypes.string };
  14. Stateless Components // Module pattern function Avatar({name, id) { return

    { render() { return ( <div> <span>{name}</span> <img src={`/img/user/${id}.png`} /> </div> ); }, shouldComponentUpdate(nextProps) { return this.props.name !== nextProps.name; } }; } Sorry, I’ve misunderstood… This is not treated as Stateless Components
  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.
  16. DOM node refs class App extends React.Component { componentDidMount() {

    this.refs.text.focus(); } render() { return <input type=“text” ref=“text” />; } } const el = React.render(<div><App /></div>, document.querySelector(‘#app’)); console.log(el.innerHTML); const app = React.render(<App />, document.querySelector(‘#app’)); console.log(ReactDOM.findDOMNode(app).innerHTML);
  17. Separate packages • React • Isomorphic libraries • ReactDOM •

    DOM Environment • Including server-side rendering • Addons • react-addons-{name}
  18. React • npm install react; • import React from ‘react’;

    • React.Component, React.createElement, React.Proptypes, React.Children... • Isomorphic - DOM, Native, Canvas...
  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
  20. import React from ‘react’; import ReactDOM from ‘react-dom’; class App

    extends React.Component { render() { const {name} = this.props; return ( <div> <p>Hello {name}</p> </div> ); } } ReactDOM.render(<App name=“World />, document.getElementById(‘app’));
  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
  22. unstable_batchedUpdates • Deprecate React.addons.batched_updates const c = ReactDOM.render(<App />, document.querySelector('#app'));

    ReactDOM.unstable_batchedUpdates(() => { c.setState({count: c.state.count}); c.setState({count: c.state.count}); });
  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
  24. Deprecate react-tools • use Babel instead of react-tools • jsx

    command -> babel • reactify -> babelify • JSXTransform -> babel-core/browser.js • node-jsx -> babel/register
  25. None
  26. React Babel • Babel optimisation options for React. • optimisation.react.constantElements

    • optimisation.react.inlineElements • for production build.
  27. http://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html

  28. constantElements class App extends React.Component { render() { return <div><span>hello</span><span>{this.props.name}</span></div>;

    } } // ↓↓ 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) ); } }]);
  29. inlineElements ReactDOM.render( <App name=“foo”><div>foo</div></App>, 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'));
  30. Babel 6.0 • https://github.com/babel/babel/issues/2168 • No internal transformers. • Presets

    • "plugins": ["preset-es2015", "preset-react"]
  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"), ] };
  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!
  33. None
  34. W

  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?
  36. None
  37. None
  38. Animation https://github.com/chenglou/react-motion

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

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

  41. Thank you! speakerdeck.com/koba04