Upload
anderson-aguiar
View
563
Download
0
Embed Size (px)
Citation preview
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
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 filters 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
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
Mounting Updating UnmountingcomponentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdatecomponentWillUpdate
componentDidUpdate
componentWillUnmount
Lifecycle Methods
https://facebook.github.io/react/docs/component-specs.html
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
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
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
…
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
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
https://facebook.github.io/jest/docs/getting-started.html#content
https://github.com/facebook/react/wiki/Complementary-Tools
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