React.js: le nouveau truc cool

Petit survol de React et son écosystème. Très très haut niveau. Donné dans le cadre de http://saglac.io/ en Avril 2015.

Transcript

1. Jean-Philippe Boily rainforestqa.com & metrics.watch jipiboily.com React.js le nouveau truc cool
2. QUI SUIS-JE? Jean-Philippe Boily @jipiboily jipiboily.com j@jipi.ca Software Engineer @ Rainforest QA rainforestqa.com
3. Rainforest QA rainforestqa.com Human-powered cross-browser integration test, in plain English. Fast! Very very fast! Days of testing in minutes. Backed by @ycombinator + @heavybit
4. Alerting for Google Analytics http://metrics.watch Metrics Watch BETA NOW!
5. J’ai des stickers pour les intéressés… :)
6. Qu’est-ce que React.js?
8. Facebook, déjà entendu parler?
9. Le “V” dans MVC
10. Exemple var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="John" />, mountNode);
11. WAT?
12. JSX! var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="John" />, mountNode);
13. Compiled JS var HelloMessage = React.createClass({displayName: "HelloMessage", render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);
14. JSX != HTML
15. JSX: <div className=“my-class”>HTML!</div> HTML: <div class=“my-class”>HTML!</div>
16. State & mount var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } }); React.render(<Timer />, mountNode);
17. Show me an app!
18. Et les tests?
19. Jasmine ou autre…ou JEST!
20. JEST Built on top of Jasmine Mock by default
21. Flux
22. RefluxJS! https://github.com/spoike/refluxjs ╔═════════╗ ╔════════╗ ╔═════════════════╗ ║ Actions ║──────>║ Stores ║──────>║ View Components ║ ╚═════════╝ ╚════════╝ ╚═════════════════╝ ^ │ └─────────────────────────── ────┘ uni-directional dataflow
23. React Native https://facebook.github.io/react-native/
24. Links http://react-components.com http://material-ui.com