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

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
• Software Engineer @ Healfies
• Coding stuff since 2000
• High level stuff
• Low level stuff
• Design stuff
• github.com/derekstavis
• github.com/oh-my-fish

3. • Why React?
• Components
• Tooling
• How not to start
• Step by step demo

4. W H Y R E A C T ?

5. 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)

6. 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
• Automagic data binding
• Controllers
• Directives
• Templates

7. 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

8. 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

9. U I A S A F U N C T I O N O F D ATA
• Element tree is a result of function application
• Never operate on global, shared state
• Data flow is unidirectional

10. V I R T U A L D O M
• Abstraction
• Performance
• Reconciliation
• Isomorphism

11. 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

12. 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
* wow, such directives
Pattern: Break the line to close tag and clean the indentation

13. 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

14. 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

15. 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

16. const Title = (props) => <h1>props.title</h1>
S TAT E L E S S C O M P O N E N T
S P E C I F I C AT I O N

17. 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

18. C O M P O N E N T D ATA I N T E R FA C E
• component.props
• component.state

19. 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

20. C O M P O N E N T D ATA F L O W
• Data only flows down in tree

21. C O M P O N E N T D ATA F L O W
• Events flow up in tree

22. 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

23. E S 6 O R N O T E S 6
React encourages ES6

24. E S 6 O R N O T E S 6
const makeCellTitle = (props) => {
const { title, description } = props
return `${title}: ${description}`
}
var title = 'Hello World'
var description = 'A classic programmer thing'
makeCellTitle({ title, description })
> Hello World: A classic programmer thing

25. const makeCellTitle = (props) => {
const { title, description } = props
return `${title}: ${description}`
}
var title = 'Hello World'
var description = 'A classic programmer thing'
makeCellTitle({ title, description })
> Hello World: A classic programmer thing
const makeCellTitle = (props) => {
const { title, description } = props
return `${title}: ${description}`
}
var title = 'Hello World'
var description = 'A classic programmer thing'
makeCellTitle({ title, description })
> Hello World: A classic programmer thing
E S 6 O R N O T E S 6
A R R O W
F U N C T I O N S

26. const makeCellTitle = (props) => {
const { title, description } = props
return `${title}: ${description}`
}
var title = 'Hello World'
var description = 'A classic programmer thing'
makeCellTitle({ title, description })
> Hello World: A classic programmer thing
const makeCellTitle = (props) => {
const { title, description } = props
return `${title}: ${description}`
}
var title = 'Hello World'
var description = 'A classic programmer thing'
makeCellTitle({ title, description })
> Hello World: A classic programmer thing
E S 6 O R N O T E S 6
D E S T R U C T U R I N G

27. E S 6 O R N O T E S 6
const makeCellTitle = (props) => {
const { title, description } = props
return `${title}: ${description}`
}
var title = 'Hello World'
var description = 'A classic programmer thing'
makeCellTitle({ title, description })
> Hello World: A classic programmer thing
const makeCellTitle = (props) => {
const { title, description } = props
return `${title}: ${description}`
}
var title = 'Hello World'
var description = 'A classic programmer thing'
makeCellTitle({ title, description })
> Hello World: A classic programmer thing
S T R I N G
I N T E R P O L AT I O N

28. const makeCellTitle = (props) => {
const { title, description } = props
return `${title}: ${description}`
}
var title = 'Hello World'
var description = 'A classic programmer thing'
makeCellTitle({ title, description })
> Hello World: A classic programmer thing
E S 6 O R N O T E S 6
A R R O W
F U N C T I O N S
S T R I N G
I N T E R P O L AT I O N
D E S T R U C T U R I N G

29. E S 6 O R N O T E S 6
• Native class syntax
• Arrow functions
• String interpolation
• Destructuring
• Code for the future
const makeCellTitle = (props) => {
const { title, description } = props
return `${title}: ${description}`
}
var title = 'Hello World'
var description = 'A classic programmer thing'
makeCellTitle({ title, description })
> Hello World: A classic programmer thing
A R R O W
F U N C T I O N S
S T R I N G
I N T E R P O L AT I O N
D E S T R U C T U R I N G

30. J S X O R N O T J S X
React encourages JSX

31. J S X O R N O T J S X
render() {
return (
<div>
<h1>A counter example</h1>
<div>Current value is {this.state.counter}</div>
<button onClick={this.handleButton.bind(this)}>
Increase
</button>
</div>
)
}

32. render() {
return (
<div>
<h1>A counter example</h1>
<div>Current value is {this.state.counter}</div>
<button onClick={this.handleButton.bind(this)}>
Increase
</button>
</div>
)
}
J S X O R N O T J S X
• It's like HTML in side JavaScript
• In reality it's just syntactic sugar
• Transforms into plain JavaScript

33. J S X O R N O T J S X
render() {
return React.createElement(
'div', null,
React.createElement(
'h1', null,
'A counter example'
),
React.createElement(
'div', null,
'Current value is ',
this.state.counter
),
React.createElement(
'button',
{ onClick: this.handleButton.bind(this) },
'Increase'
)
)
}

34. J S X O R N O T J S X
Use JSX, for the sake of sanity

35. T R A N S F O R M I N G J S X
• In-browser transform
• More stuff to download
• Slower due to compilation
• Precompiled JS assets
• Fast for the client
• Integrated into build

36. M A I N S T R E A M T O O L I N G
• Babel
• JavaScript Compiler
• ES6 → ES5
• JSX → JavaScript

37. M A I N S T R E A M T O O L I N G
• Webpack
• Module bundler
• Join npm packages and your code
• Apply loaders that transform files

38. M A I N S T R E A M T O O L I N G
J S X J S ( E S 5 )
babel-loader
S C S S C S S
postcss-loader
P N G B A S E 6 4
file-loader
B U N D L E . J S

39. T O O L I N G
The stack looks complicated

40. T O O L I N G
• Don't start with a boilerplate
• github.com/gaearon/react-makes-you-sad

41. D O N ' T S TA R T W I T H B O I L E R P L AT E

42. T O O L I N G
Understand the parts first

43. D E M O T I M E
S T E P B Y S T E P R E A C T P R O J E C T
U S I N G B A B E L A N D W E B PA C K

44. D E M O T I M E
http://tiny.cc/react-beginners-demo

45. 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

46. T H A N K S
Q U E S T I O N S ?

47. L I C E N S E
• Copyright 2016 © Derek W. Stavis
• Attribution-ShareAlike 4.0 International