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
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!
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> ); }
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
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!
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?
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