Embed Size (px)
Citation preview
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
user interfaceUI[ ]
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 aspecific thing
A set of tools that solve a lot of things
What problem React solve? Building applications with
data that changes over time
React has no…• Controllers • Models • Collections • Templates • Directives • Two way data binding
Everything is acomponent!
whouses?
https://github.com/facebook/react/wiki/Sites-Using-React
whyto use it?
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!
11/2015
featuresCORE
components
Thinkingin
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
App
HeaderCounter
ButtonLike
import React from 'react'
export default class App extends React.Component { render() { // ... }}
app.js
jsx
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
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> )
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
component lifecycle
Mounting Updating UnmountingcomponentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdatecomponentWillUpdate
componentDidUpdate
componentWillUnmount
Lifecycle Methods
https://facebook.github.io/react/docs/component-specs.html
props & state
data transfer betweencomponents
props
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> ) }}
export default class Form extends React.Component { render() { return ( <form method="post"> <Input type="text" name="name" label="Name:" /> </form> ) }}
get
set
Spread Attributes
https://facebook.github.io/react/docs/jsx-spread.html
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> ) }}
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> ) }}
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 = propTypesCounter.defaultProps = defaultProps
counter.js
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 = propTypesCounter.defaultProps = defaultProps
counter.js
initial value
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 = propTypesCounter.defaultProps = defaultProps
counter.js
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 = propTypesCounter.defaultProps = defaultProps
counter.js
if is requiredtypename
https://facebook.github.io/react/docs/reusable-components.html#prop-validation
state
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
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
props statemutable
managed only in own component (private)
re-render on each change
immutable
pass to child within render
pass parent callbacks
unidirectional data flow
component
child
child
component
child child
inverse data flowcomponent
child
child
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> ) }}
How about other communication forms?• any to any • siblings • child to parent without callback functions
…
virtual dom
What is DOM? • 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
DOM Problem It’s slow! It’s was never optimized for creating dynamic UI
Virtual DOM• 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
REACTDOM
VDOM is really fast!
performance
TOOLS
https://facebook.github.io/jest/docs/getting-started.html#content
https://github.com/facebook/react/wiki/Complementary-Tools
more about
Where I can study react?Official React Docs https://facebook.github.io/react/docs/getting-started.html
Newshttps://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
considerations
