Introducción a React

React Jose Luis Piedrahita ! @jlpiedrahita parallelmobile.com

¿Que es React? • Librería Javascript para la creación de
UI • 130KB v0.12.2 (miniﬁcada) • Desarrollada por Facebook • Utilizada internamente algunos años, hecha Open Source en 2013 • http://facebook.github.io/react/

¿Quien usa React? • Facebook • Whatsapp • Netﬂix •
Flipboard • Github • Instagram

¿Quien usa React?

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 más?

¿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

Replanteando las buenas practicas • HTML incluido en código Javascript
• Aprovecha todo el poder de Javascript y no un pseudo-lenguaje de plantillas • Separación de responsabilidades por componentes, no por tecnologías (HTML, Javascript, CSS, etc)

Plantilla HTML <!DOCTYPE html> <html> <head> <script src="http://fb.me/react-0.12.2.min.js"></script> </head> <body>
<script type="text/javascript"> // React code goes here </script> </body> </html>

API ! 1. Métodos objeto global React 2. Métodos en
ReactComponent 3. Metodos a implementar al deﬁnir un componente

API • Deﬁnir componente: ! ReactClass React.createClass(object specification) var HelloComponent
= React.createClass({ render: function () { return null; // TODO } });

Antes…

How HTML Works

html body div div span div input input div span
button head div

Arbol DOM DOMElement DOMElement DOMElement DOMElement DOMElement DOMElement DOMElement DOMElement
DOMElement DOMElement DOMElement DOMElement div

DOM Virtual React ReactElement ReactElement ReactElement ReactElement ReactElement ReactElement ReactElement
ReactElement ReactElement ReactElement ReactElement ReactElement div

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!"); } });

API a abbr address area article aside audio b base
bdi bdo big blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hr html i iframe img input ins kbd keygen label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script section select small source span strong style sub summary sup table tbody td textarea tfoot th thead time title tr track u ul var video wbr • Etiquetas soportadas:

API • Crear un elemento (factoria): ! ReactElement React.DOM.[type]( [object
props], [children ...] ) var HelloComponent = React.createClass({ render: function () { return React.DOM.div(null, "Hello React!"); } });

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);

DEMO Hello React

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

var HelloComponent = React.createClass({ render: function () { return React.createElement("div",
null, "Hello React!"); } }); ! React.render(React.createElement(HelloComponent), document.body); No JSX

Transformación JSX “In-browser” <!DOCTYPE html> <html> <head> <script src="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>

Transformación JSX “preprocesado” > npm install -g react-tools > jsx
--watch jsx-ﬁles/ js-transformed-ﬁles/

DEMO jsx

this.props • Forma de pasar 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);

this.props • Valores por defecto propiedades object getDefaultProps() • Validación
tipos propiedades object propTypes var HelloComponent = React.createClass({ getDefaultProps: function() { return { name: "Vueling" }; }, propTypes: { name: React.PropTypes.string }, … });

DEMO props

Componer componentes • Componentes se pueden anidar de la misma
manera en que lo hacen los tags en xml/html: ! ! ! ! • Permitiendo crear componentes mas complejos a partir de otros componentes var ComplexComponent = React.createClass({ render: function() { return ( <div> <SubComponentA/> <SubComponentB/> <SubComponentc/> </div> ); } });

DEMO composición

Estado • State is the root of all programming evil
• Mas estado == mas complejidad • Los programadores somos malos lidiando con estado

class Stock { Set<Item> items; int numberOfItems; }

class Stock { Set<Item> items; int numberOfItems; // extra state,
extra complexity }

Por el amor de dios, NO! class Stock { Set<Item>
items; int numberOfItems; // extra state, extra complexity }

Por el amor de 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 }

this.state • UI dinámicas representan 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

Imperativo vs Declarativo

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

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 Declarative way Imperative way

SQL, declarative before it was cool SELECT * from dogs
INNER JOIN owners WHERE dogs.owner_id = owners.id

//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 }) } }} }

UI Declarativas • render() especiﬁca 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

DEMO state

Reconciliación • Modiﬁcar el DOM 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 modiﬁcaciones 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 (O(n)), lo que hace que la actualización del componente sea hiper-ultra-mega-maxi-rapida™

VIDEO rendimiento

Ciclo de vida de 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)

this.refs • Acceso a los 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);

DEMO refs

Recap • Librería Javascript para 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

DEMO componentes de 3ros

React Native • Desarrollo de aplicaciones nativas (iOS/Android) con React
• Mismo modelo que web • Componentes predeﬁnidos que se corresponden con los nativos • "Learn once, write anywhere"

“I say with conﬁdence 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

- James Long Firefox Developer Tools at Mozilla

• Facebook Ads Manager App 100% React Native

• Facebook Groups App

VIDEO React Native

Más… • FLUX (http://facebook.github.io/ﬂux/): 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

this.setState({ ended: true });

Introducción a React

Introducción a React

Other Decks in Programming

Featured

Transcript