React for Beginners

R E A C T
F O R B E G I N N E R S

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

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

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)

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

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

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

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

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

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

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

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

C O M P O N E N T
• React.createClass
• getInitialState
• getDefaultProps
• propTypes
• render

C O M P O N E N T
• class Component extends React.Component
• Component.propTypes
• Component.defaultProps
• this.state
• render

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

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

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

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

• Data only flows down in tree

• Events flow up in tree

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

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

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

}
}
D E S T R U C T U R I N G

}
}
S T R I N G
I N T E R P O L AT I O N

}
A R R O W
F U N C T I O N S
S T R I N G

• Native class syntax
• Arrow functions
• String interpolation
• Destructuring
• Code for the future
}
A R R O W
F U N C T I O N S
S T R I N G

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

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>
)
}

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>
)
}
• It's like HTML in side JavaScript
• In reality it's just syntactic sugar
• Transforms into plain JavaScript

render() {
return React.createElement(
'div', null,
React.createElement(
'h1', null,
'A counter example'
),
'div', null,
'Current value is ',
this.state.counter
),
'button',
{ onClick: this.handleButton.bind(this) },
'Increase'
)
)
}

Use JSX, for the sake of sanity

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

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

• Webpack
• Module bundler
• Join npm packages and your code
• Apply loaders that transform files

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

T O O L I N G
The stack looks complicated

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

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

T O O L I N G
Understand the parts first

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

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

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

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

React for Beginners

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to React for Beginners (20)

More from Derek Willian Stavis (7)

Recently uploaded (20)

React for Beginners