React.js: You deserve to know about it

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

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

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

A Javascript library for
building user interfaces

FRAMEWORK LIBRARY
A tool that solves a
speciﬁc thing
A set of tools that solve
a lot of things

WhatproblemReactsolve?
Building applications with
data that changesovertime

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

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

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!

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

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

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

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

import React from ‘react’
import Header from './header'
import Counter from './counter'
import ButtonLike from './buttonLike'
render() {
return (
<div>
<Header />
<Counter />
<ButtonLike />
</div>
)
}
}
app.js

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

data transfer between
components

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

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>
)
}
}
render() {
return (
<Input type="text" name="name" label="Name:" />
</form>
)
}
}
get
set

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

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

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

const propTypes = {
}
likes: 0
}
render() {
return (
</div>
)
}
}
counter.js
initial value

const propTypes = {
}
likes: 0
}
render() {
return (
</div>
)
}
}
counter.js
if is requiredtypename

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

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

super(props)
this.state = {
likes: 0
}
}
like() {
this.setState({
})
}
render() {
return (
<div>
<Header />
</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

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

inverse data ﬂow
component
child
child

super(props)
this.state = {
likes: 0
}
}
like() {
this.setState({
})
}
render() {
return (
<div>
<Header />
</div>
</div>
)
}
}
app.js buttonLike.js
export default class ButtonLike extends React.Component {
render() {
return (
<button
className="bt"
onClick={this.props.onClick}>
Like
<button>
</div>
)
}
}

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

http://facebook.github.io/ﬂux/

WhatisDOM?
• Document Object Model
• It deﬁnes 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

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

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

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

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

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

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

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

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

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

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

React.js: You deserve to know about it

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to React.js: You deserve to know about it

Similar to React.js: You deserve to know about it (20)

Recently uploaded

Recently uploaded (20)

React.js: You deserve to know about it