This document provides an introduction to React for beginners. It discusses why React is useful, including its declarative syntax and component-based approach. It covers key React concepts like components, props, state, lifecycles, and the virtual DOM. It also discusses ES6 features supported by React and how to set up tooling with Babel and Webpack. The document concludes with a demonstration of building a basic React app.

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