This document discusses React, a JavaScript library for building user interfaces. It provides an overview of React concepts like components, props, state, lifecycle methods, and the virtual DOM. Components are the basic building blocks and can be composed to build complex UIs. Data flows unidirectionally from parent to child components via props, while state is local and mutable. The virtual DOM allows React to efficiently update the real DOM by comparing component trees.

3. how many libs/frameworks we see
everyday in JS world?

6. you need to know which
technology to choose
and when to use
the choice should be
based on the solution
for the problem

7. user
interfaceUI[ ]

8. the user interface
(UI) is everything
designed into an
information device
with which a human
being may interact
http://bit.ly/1N56fhw

10. A Javascript library for
building user interfaces

11. FRAMEWORK LIBRARY
A tool that solves a
specific thing
A set of tools that solve
a lot of things

12. WhatproblemReactsolve?
Building applications with
data that changesovertime

13. React has no…
• Controllers
• Models
• Collections
• Templates
• Directives
• Two way data binding

14. Everything is a
component!

15. whouses?

16.
https://github.com/facebook/react/wiki/Sites-Using-React

17. whytouseit?

18. why to use it…
• Remove logic of HTML
• No more templates
• SEO Friendly (when rendered on server)
• Component-driven development
• Reusable and interactive components
• UI componentized is the future
• It’s fast!

19. 11/2015

20. features
CORE

21. components

22. Thinking
in

25. FilterableProductTable:
contains the entirety of the
example
SearchBar: receives all user
input
ProductTable: displays and
filters the data collection
based on user input
ProductCategoryRow:
displays a heading for each
category
ProductRow: displays a row
for each product

27. App
HeaderCounter
ButtonLike

28. import React from 'react'
export default class App extends React.Component {
render() {
// ...
}
}
app.js

29. jsx

30. import React from 'react'
export default class App extends React.Component {
render() {
return (
<div>
<header>
<p>React Example</p>
</header>
<div className="counter">
<p>Likes: 0</p>
</div>
<div className="button-like-container">
<button className="bt">Like</button>
</div>
</div>
)
}
}
app.js

31. return React.createElement(
'div',
null,
React.createElement(
'header',
null,
React.createElement(
'p',
null,
'React Example'
)
),
React.createElement(
'div',
{ className: 'counter' },
React.createElement(
'p',
null,
'Likes: 0'
)
),
React.createElement(
'div',
{ className: 'button-like-container' },
React.createElement(
'button',
{ className: 'bt' },
'Like'
)
)
)
return (
<div>
<header>
<p>React Example</p>
</header>
<div className="counter">
<p>Likes: 0</p>
</div>
<div className="button-like-container">
<button className="bt">Like</button>
</div>
</div>
)

32. import React from ‘react’
import Header from './header'
import Counter from './counter'
import ButtonLike from './buttonLike'
export default class App extends React.Component {
render() {
return (
<div>
<Header />
<Counter />
<ButtonLike />
</div>
)
}
}
app.js

33. component lifecycle

34. Mounting Updating Unmounting
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
LifecycleMethods
https://facebook.github.io/react/docs/component-specs.html

35. props & state

36. data transfer between
components

37. props

38. export default class Form extends React.Component {
render() {
return (
<form method="post">
<Input />
</form>
)
}
}
export default class Input extends React.Component {
render() {
return (
<div>
<label>Texto</label>
<input />
</div>
)
}
}
<Input /> component
without props

39. export default class Input extends React.Component {
render() {
return (
<div>
<label>{this.props.label}</label>
<input name={this.props.name} type={this.props.type} />
</div>
)
}
}
export default class Form extends React.Component {
render() {
return (
<form method="post">
<Input type="text" name="name" label="Name:" />
</form>
)
}
}
get
set

40. SpreadAttributes
https://facebook.github.io/react/docs/jsx-spread.html

41. export default class Form extends React.Component {
render() {
return (
<form method="post">
<Input type="text" name="name" />
</form>
)
}
}
export class Input extends React.Component {
render() {
return (
<div>
<input {...this.props} />
</div>
)
}
}

42. export default class Form extends React.Component {
render() {
return (
<form method="post">
<Input type="text" name="name" />
</form>
)
}
}
export class Input extends React.Component {
render() {
return (
<div>
<input {...this.props} />
</div>
)
}
}

43. import React, { PropTypes } from 'react'
const propTypes = {
likes: PropTypes.number.isRequired
}
const defaultProps = {
likes: 0
}
export default class Counter extends React.Component {
render() {
return (
<div className="counter">
<p>Likes: {this.props.likes}</p>
</div>
)
}
}
Counter.propTypes = propTypes
Counter.defaultProps = defaultProps
counter.js

44. import React, { PropTypes } from 'react'
const propTypes = {
likes: PropTypes.number.isRequired
}
const defaultProps = {
likes: 0
}
export default class Counter extends React.Component {
render() {
return (
<div className="counter">
<p>Likes: {this.props.likes}</p>
</div>
)
}
}
Counter.propTypes = propTypes
Counter.defaultProps = defaultProps
counter.js
initial value

45. import React, { PropTypes } from 'react'
const propTypes = {
likes: PropTypes.number.isRequired
}
const defaultProps = {
likes: 0
}
export default class Counter extends React.Component {
render() {
return (
<div className="counter">
<p>Likes: {this.props.likes}</p>
</div>
)
}
}
Counter.propTypes = propTypes
Counter.defaultProps = defaultProps
counter.js

46. import React, { PropTypes } from 'react'
const propTypes = {
likes: PropTypes.number.isRequired
}
const defaultProps = {
likes: 0
}
export default class Counter extends React.Component {
render() {
return (
<div className="counter">
<p>Likes: {this.props.likes}</p>
</div>
)
}
}
Counter.propTypes = propTypes
Counter.defaultProps = defaultProps
counter.js
if is requiredtypename

48.
https://facebook.github.io/react/docs/reusable-components.html#prop-validation

49. state

50. import React from 'react'
import Header from './header'
import Counter from './counter'
import ButtonLike from './buttonLike'
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
likes: 0
}
this.like = this.like.bind(this)
}
like() {
this.setState({
likes: this.state.likes + 1
})
}
render() {
return (
<div>
<Header />
<div className="content">
<Counter likes={this.state.likes} />
<ButtonLike onClick={this.like} />
</div>
</div>
)
}
}
app.js

51. export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
likes: 0
}
this.like = this.like.bind(this)
}
like() {
this.setState({
likes: this.state.likes + 1
})
}
render() {
return (
<div>
<Header />
<div className="content">
<Counter likes={this.state.likes} />
<ButtonLike onClick={this.like} />
</div>
</div>
)
}
}
app.js
initial state
set the state incrementing likes
pass the state as a prop (reactive)
pass a callback to set the new state

53. props state
mutable
managed only in own
component (private)
re-render on each change
immutable
pass to child within render
pass parent callbacks

54. unidirectional data flow

55. component
child
child

56. component
child child

57. inverse data flow
component
child
child

59. import React from 'react'
import Header from './header'
import Counter from './counter'
import ButtonLike from './buttonLike'
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
likes: 0
}
this.like = this.like.bind(this)
}
like() {
this.setState({
likes: this.state.likes + 1
})
}
render() {
return (
<div>
<Header />
<div className="content">
<Counter likes={this.state.likes} />
<ButtonLike onClick={this.like} />
</div>
</div>
)
}
}
app.js buttonLike.js
import React from 'react'
export default class ButtonLike extends React.Component {
render() {
return (
<div className="button-like-container">
<button
className="bt"
onClick={this.props.onClick}>
Like
<button>
</div>
)
}
}

60. How about other
communication forms?
• any to any
• siblings
• child to parent without callback functions
…

61.
http://facebook.github.io/flux/

62.
http://bit.ly/1lDY8MG

63. virtual dom

64. WhatisDOM?
• Document Object Model
• It defines the logical structure of documents and the way a
document is accessed and manipulated.
• DOM API is almost cross-platform and cross-browser
• Inspect tool

65. DOMProblem
It’s slow! It’s was never optimized
for creating dynamic UI

66. VirtualDOM
• Inspired by the inner workings of React by facebook
• Representation of the DOM using javascript in-memory
• Algorithm to identify changes
• Computes minimal DOM mutations
• Create a queue with all mutations
• Executes all updates without recreating all of the DOM nodes

67. REACT
DOM

69. VDOM is really fast!

70. performance

74.
https://facebook.github.io/react/docs/perf.html

75. TOOLS

76.
http://airbnb.io/enzyme/

77.
https://facebook.github.io/jest/docs/getting-started.html#content

79.
https://webpack.github.io/

80.
http://browserify.org/

81.
https://github.com/facebook/react/wiki/Complementary-Tools

82.
https://facebook.github.io/react-native/

84.
https://github.com/ptmt/react-native-desktop

85. moreabout

86. Where I can study react?
Official React Docs
https://facebook.github.io/react/docs/getting-started.html
News
https://twitter.com/reactjs
Airbnb React/JSX Style Guide
https://github.com/airbnb/javascript/tree/master/react
https://twitter.com/ReactJS_News

87.
https://github.com/andersonaguiar/react-webpack-example

88. considerations

89. THANKS!
github.com/andersonaguiar
twitter.com/andersonaguiar
andersonaguiar.web@gmail.com