Descargar como PDF, PPTX
![API
• Crear un elemento:
!
ReactElement React.createElement(
string/ReactClass type,
[object props],
[children ...]
)
var HelloComponent = React.createClass({
render: function () {
return React.createElement("div", null, "Hello React!");
}
});](https://image.slidesharecdn.com/react-150302034149-conversion-gate01/85/React-18-320.jpg)
var HelloComponent = React.createClass({
render: function () {
return React.DOM.div(null, "Hello React!");
}
});](https://image.slidesharecdn.com/react-150302034149-conversion-gate01/85/React-20-320.jpg)
![API
• Presentar un componente:
!
React.render(
ReactElement element,
DOMElement container,
[function callback]
)
var HelloComponent = React.createClass({
render: function () {
return React.createElement("div", null, "Hello React!");
}
});
React.render(React.createElement(HelloComponent), document.body);](https://image.slidesharecdn.com/react-150302034149-conversion-gate01/85/React-21-320.jpg)
![var numbers = [1,2,3,4,5]
var total = 0
!
for(var i = 1; i < numbers.length; i++) {
total += numbers[i]
}
console.log(total) // 15
var numbers = [1,2,3,4,5]
!
var total = numbers.reduce(function(sum, n) {
return sum + n
});
console.log(total) // 15](https://image.slidesharecdn.com/react-150302034149-conversion-gate01/85/React-44-320.jpg)
![var numbers = [1,2,3,4,5]
var total = 0
!
for(var i = 1; i < numbers.length; i++) {
total += numbers[i]
}
console.log(total) // 15
var numbers = [1,2,3,4,5]
!
var total = numbers.reduce(function(sum, n) {
return sum + n
});
console.log(total) // 15
Imperative way
Declarative way](https://image.slidesharecdn.com/react-150302034149-conversion-gate01/85/React-45-320.jpg)
![//dogs = [{name: 'Fido', owner_id: 1}, {...}, ... ]
//owners = [{id: 1, name: 'Bob'}, {...}, ...]
!
var dogsWithOwners = []
var dog, owner
!
for(var di=0; di < dogs.length; di++) {
dog = dogs[di]
!
for(var oi=0; oi < owners.length; oi++) {
owner = owners[oi]
if (owner && dog.owner_id == owner.id) {
dogsWithOwners.push({
dog: dog,
owner: owner
})
}
}}
}](https://image.slidesharecdn.com/react-150302034149-conversion-gate01/85/React-47-320.jpg)
React
- 1.
- 2. ¿Que es React? •Librería Javascript para la creación de UI. • 130KB v0.12.2 (minificada) • Desarrollada por Facebook. • Utilizada internamente durante algunos años, hecha Open Source en 2013. • http://facebook.github.io/react/
- 3. ¿Quien usa React? •Facebook • Whatsapp • Netflix • Flipboard • Github • Instagram
- 4.
- 5. Agility.js・AngularJS・Aria Templates ・Backbone.js・Batman.js Bolt・CanJS・Chaplin + Brunch・Closure・cujo.js・Dart Derby・dermis・Dijon・Dojo・DUEL・Ember.js・Epitome Ext.js・Funnyface.js・GWT・Kendo UI・Knockback.js KnockoutJS・Maria ・Marionette・Meteor・Montage・Olives PlastronJS・PureMVC・rAppid.js・Sammy.js・Serenade.js SocketStrem・soma.js ・Spine・Strapes・Thorax・YUI ¿UNA MAS?
- 6. ¿Por qué React? •No plantillas: se adopta el concepto de componente! • Componentes: encapsulados, componibles, reusables! • Declarativos: declaras como debe lucir la UI, React se encarga de aplicar los cambios necesarios cuando los datos que esta representa cambian • Ultra eficiente: solo se realizan las modificaciones del DOM estrictamente necesarias • No bindings: flujo unidireccional de los datos • Simple: ej. solo un método necesario para definir un componente • Incluye utilidades para testear la UI, Ej. simular eventos.
- 7. Replanteando las buenas practicas •HTML incluido en código Javascript • Basicamente todo el HTML se genera en Javascript • Aprovecha todo el poder de Javascript y no un pseudo-lenguaje de plantillas • Separación de responsabilidades, no de tecnologías
- 8. Plantilla HTML <!DOCTYPE html> <html> <head> <scriptsrc="http://fb.me/react-0.12.2.min.js"></script> </head> <body> <script type="text/javascript"> // React code goes here </script> </body> </html>
- 9. API! 1. Métodos objetoglobal React 2. Métodos en ReactComponent 3. Metodos a implementar al definir un componente
- 10. API! 1. Métodos objetoglobal React 2. Métodos en ReactComponent 3. Metodos a implementar al definir un componente
- 11. API • Definir componente: ! ReactClassReact.createClass(object specification) var HelloComponent = React.createClass({ render: function () { return null; // TODO } });
- 15.
- 16.
- 17. DOM Virtual React ReactElement ReactElement ReactElement ReactElement ReactElement ReactElement ReactElementReactElement ReactElement ReactElement ReactElement ReactElement div
- 18. API • Crear unelemento: ! ReactElement React.createElement( string/ReactClass type, [object props], [children ...] ) var HelloComponent = React.createClass({ render: function () { return React.createElement("div", null, "Hello React!"); } });
- 19.
- 20. API • Crear unelemento (factoria): ! ReactElement React.DOM.[type]( [object props], [children ...] ) var HelloComponent = React.createClass({ render: function () { return React.DOM.div(null, "Hello React!"); } });
- 21. API • Presentar uncomponente: ! React.render( ReactElement element, DOMElement container, [function callback] ) var HelloComponent = React.createClass({ render: function () { return React.createElement("div", null, "Hello React!"); } }); React.render(React.createElement(HelloComponent), document.body);
- 22.
- 23. JSX • HTML (casi…)en código Javascript • Conveniente para crear componentes (XML expresa mejor estructuras en árbol) • Transformación “in-browser” o como preprocesado (recomendado para producción) • Live JSX Compiler: http://facebook.github.io/react/jsx-compiler.html • Opcional
- 24. var HelloComponent =React.createClass({ render: function () { return React.createElement("div", null, "Hello React!"); } }); ! React.render(React.createElement(HelloComponent), document.body); No JSX
- 25. var HelloComponent =React.createClass({ render: function () { return <div>Hello React!</div>; } }); ! React.render(<HelloComponent/>, document.body); JSX var HelloComponent = React.createClass({ render: function () { return React.createElement("div", null, "Hello React!"); } }); ! React.render(React.createElement(HelloComponent), document.body); No JSX
- 26. var HelloComponent =React.createClass({ render: function () { return <div>Hello React!</div>; } }); ! React.render(<HelloComponent/>, document.body); JSX var HelloComponent = React.createClass({ render: function () { return React.createElement("div", null, "Hello React!"); } }); ! React.render(React.createElement(HelloComponent), document.body); No JSX
- 27. Transformación JSX “In-browser” <!DOCTYPE html> <html> <head> <scriptsrc="http://fb.me/react-0.12.2.min.js"></script> <script src="http://fb.me/JSXTransformer-0.12.2.js"></script> </head> <body> <script type="text/jsx"> // React + JSX code goes here </script> </body> </html>
- 28. Transformación JSX “preprocesado” > npminstall -g react-tools > jsx --watch jsx-files/ js-transformed-files/
- 29.
- 30. this.props • Forma depasar datos a un componente • Similares a los argumentos de un constructor • Inmutables var HelloComponent = React.createClass({ render: function () { return <div>Hello {this.props.name}!</div>; } }); ! React.render(<HelloComponent name="Mobile"/>, document.body);
- 31. this.props • Forma depasar datos a un componente • Similares a los argumentos de un constructor • Inmutables var HelloComponent = React.createClass({ render: function () { return <div>Hello {this.props.name}!</div>; } }); ! React.render(<HelloComponent name="Mobile"/>, document.body);
- 32. this.props • Valores pordefecto propiedades object getDefaultProps() • Validación tipos propiedades object propTypes var HelloComponent = React.createClass({ getDefaultProps: function() { return { name: "Vueling" }; }, propTypes: { name: React.PropTypes.string }, … });
- 33.
- 34. Componer componentes • Componentesse pueden anidar de la misma manera en que lo hacen los tags en xml/html: ! ! ! ! • Permitiendo crear así componentes mas complejos a partir de otros componentes var ComplexComponent = React.createClass({ render: function() { return ( <div> <SubComponentA/> <SubComponentB/> <SubComponentc/> </div> ); } });
- 35. var ProfilePic =React.createClass({ render: function() { return ( <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} /> ); } }); ! var ProfileLink = React.createClass({ render: function() { return ( <a href={'http://www.facebook.com/' + this.props.username}> {this.props.username} </a> ); } }); ! var Avatar = React.createClass({ render: function() { return ( <div> <ProfilePic username={this.props.username} /> <ProfileLink username={this.props.username} /> </div> ); } }); ! React.render(<Avatar username=“jlpiedrahita" />, document.getElementById('example'));
- 36.
- 37. Estado • State isthe root of all programming evil • Mas estado == mas complejidad • Los programadores somos malos lidiando con estado
- 38. class Stock { Set<Item>items; int numberOfItems; }
- 39. class Stock { Set<Item>items; int numberOfItems; // extra state, extra complexity }
- 40. Por el amorde dios, NO! class Stock { Set<Item> items; int numberOfItems; // extra state, extra complexity }
- 41. Por el amorde dios, NO! Stock stock = new Stock(); // add items to stock int numberOfItems = stock.items.size(); class Stock { Set<Item> items; int numberOfItems; // extra state, extra complexity }
- 42. this.state • UI dinámicasrepresentan estado que cambia en el tiempo • Esto introduce un problema: sincronización • OK… BINDINGS!!! • React elimina la necesidad de bindings • Declarativo: React hace el trabajo duro: tratar el estado de la UI • Reactivo: automáticamente se actualiza la UI ante cambios en el estado
- 43.
- 44. var numbers =[1,2,3,4,5] var total = 0 ! for(var i = 1; i < numbers.length; i++) { total += numbers[i] } console.log(total) // 15 var numbers = [1,2,3,4,5] ! var total = numbers.reduce(function(sum, n) { return sum + n }); console.log(total) // 15
- 45. var numbers =[1,2,3,4,5] var total = 0 ! for(var i = 1; i < numbers.length; i++) { total += numbers[i] } console.log(total) // 15 var numbers = [1,2,3,4,5] ! var total = numbers.reduce(function(sum, n) { return sum + n }); console.log(total) // 15 Imperative way Declarative way
- 46. SQL, declarative beforeit was cool SELECT * from dogs INNER JOIN owners WHERE dogs.owner_id = owners.id
- 47. //dogs = [{name:'Fido', owner_id: 1}, {...}, ... ] //owners = [{id: 1, name: 'Bob'}, {...}, ...] ! var dogsWithOwners = [] var dog, owner ! for(var di=0; di < dogs.length; di++) { dog = dogs[di] ! for(var oi=0; oi < owners.length; oi++) { owner = owners[oi] if (owner && dog.owner_id == owner.id) { dogsWithOwners.push({ dog: dog, owner: owner }) } }} }
- 48. UI Declarativas • render()especifica como debe lucir el componente en todo momento • setState() muta el estado del componente y genera una actualización completa del componente (nueva llamada a render()) • boolean shouldComponentUpdate() Previene actualización del componente
- 49. var CounterComponent =React.createClass({ getInitialState: function() { return { count: 0 }; }, increment: function() { this.setState({ count: this.state.count + 1 }); }, render: function () { return ( <div className="counter"> <h1>{this.state.count}</h1> <button onClick={this.increment}>Incrementar</button> </div> ); } });
- 50.
- 51. Reconciliación • Modificar elDOM es de las operaciones mas costosas en JS • React utiliza la representación actual (DOM Virtual), la compara contra la nueva (ultima llamada a render()) y calcula el menor numero de modificaciones del DOM necesarias para que el componente represente correctamente el nuevo estado • En términos de React esto se conoce como reconciliación • Este proceso esta muy optimizado, lo que hace que la actualización del componente sea hiper-ultra-mega-maxi-rapida™
- 52.
- 53. Ciclo de vidade un componente React • Mounting componentWillMount() componentDidMount() componentWillUnmount() ! • Updating componentWillReceiveProps(object nextProps) boolean shouldComponentUpdate(object nextProps, object nextState) componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState)
- 54. var RefsDemoComponent =React.createClass({ ! handleClick: function () { alert(this.refs.message.getDOMNode().value); }, render: function () { return ( <div> <input ref="message"/> <button onClick={this.handleClick}>Alert!</button> </div> ); } }); ! React.render(<RefsDemoComponent/>, document.body); this.refs • Acceso a los nodos fuera de render()
- 55. this.refs • Acceso alos nodos fuera de render() var RefsDemoComponent = React.createClass({ ! handleClick: function () { alert(this.refs.message.getDOMNode().value); }, render: function () { return ( <div> <input ref="message"/> <button onClick={this.handleClick}>Alert!</button> </div> ); } }); ! React.render(<RefsDemoComponent/>, document.body);
- 56.
- 57. Recap • Librería Javascriptpara la creación de Interfaces de Usuario, V en MVC. • Separación de responsabilidades por componentes, no tecnologías • Componentes: encapsulados, componibles, faciles de mantener • Declarativos: como quiero que luzca, React se encarga del resto • Reactiva: sincronización automática de la UI cuando el estado que representan cambia
- 58.
- 59. React Native • Desarrollode aplicaciones nativas (iOS/Android) con React • Mismo modelo que en web • Componentes predefinidos que se corresponden con los nativos • "Learn once, write anywhere"
- 60. “I say withconfidence as a former UIKit author: React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.” - Andy Matuschak Ex-ingeniero Apple, UIKit Team
- 61. - James Long FirefoxDeveloper Tools at Mozilla
- 62. • Facebook AdsManager App 100% React Native
- 63.
- 64.
- 65. Más… • FLUX (http://facebook.github.io/flux/):arquitectura para aplicaciones React • Generación de html en el servidor React.renderToString(): componentes compatibles con SEO • Debug: mensajes de error precisos • Testing: React.addons.TestUtil
- 66.