React for Beginners

The slides from my React for beginners talk, with code reference on how to create a simple JSX ES6 Webpack project.

Transcript

1. R E A C T F O R B E G I N N E R S
2. W H O A M I • Derek Stavis • Coding stuff since 2000 • High level stuff • Low level stuff • Designer stuff • github.com/derekstavis
3. W H Y R E A C T • Declarative syntax • Does one thing and do it well • Think components, not controllers • User Interfaces as a function of data • DOM abstraction (a.k.a. Virtual DOM)
4. D O O N E T H I N G A N D D O I T W E L L • React has no… • Dependency injection • Controllers • Directives • Templates
5. T H I N K C O M P O N E N T S N O T C O N T R O L L E R S • Everything is a component • Application • Router • Data Store • Widgets
6. T H I N K C O M P O N E N T S N O T C O N T R O L L E R S • Well designed components are • Composable • Reusable • Maintainable • Testable
7. U I A S A F U N C T I O N O F D ATA • UI tree is a result of function application • Data flow is unidirectional • Never operate on global, shared state
8. D O M A B S T R A C T I O N ( O R V I R T U A L D O M ) • Abstraction • Performance • Reconciliation • Isomorphism
9. C O M P O N E N T S P E C S A N D L I F E C Y C L E
10. C O M P O N E N T D E C L A R AT I O N <Button
 label='Click me'
 onClick={this.foo.bind(this)}
 /> Props
11. C O M P O N E N T S P E C I F I C AT I O N • const Component = React.createClass • class Component extends React.Component
12. C O M P O N E N T S P E C I F I C AT I O N • React.createClass • getInitialState • getDefaultProps • propTypes • render
13. C O M P O N E N T S P E C I F I C AT I O N • class Component extends React.Component • Component.propTypes • Component.defaultProps • this.state • render
14. C O M P O N E N T L I F E C Y C L E • componentWillMount • componentDidMount • componentWillReceiveProps • shouldComponentUpdate • componentWillUpdate • componentDidUpdate • componentWillUnmount
15. C O M P O N E N T D ATA • component.props • component.state
16. C O M P O N E N T D ATA F L O W • React is one way data binding • Data only flows down in tree • State changes are explicit
17. C O M P O N E N T D ATA F L O W • Data only flows down in tree
18. C O M P O N E N T D ATA F L O W • Events flow up in tree
19. T O O L I N G W H A T M A K E S R E A C T A W E S O M E
20. T O O L I N G • React encourages ES6 • Native class syntax • Arrow functions • Destructuring
21. T O O L I N G • React encourages JSX • It’s like HTML in side JavaScript • In reality it’s just syntactic sugar
22. T O O L I N G • In-browser transform • More stuff to download • Slower due to compilation
23. T O O L I N G • Mainstream stack • Webpack - Module bundler • Babel - JavaScript Compiler
24. T O O L I N G • Mainstream stack • Webpack - Module bundler • Babel - JavaScript Compiler
25. T O O L I N G • Don’t start with a boilerplate • github.com/gaearon/react-makes-you-sad • Understand the parts first
26. A C T U A L D E M O • github.com/derekstavis/react-begginers-keynote
27. R E F E R E N C E S • facebook.github.io/react/docs/component-api.html • facebook.github.io/react/docs/component-specs.html
28. L I C E N S E • Copyright 2015 © Derek W. Stavis • Attribution-ShareAlike 4.0 International