Desarrollo de aplicaciones web declarativas con React

Transcript

1. Desarrollo de aplicaciones web declarativas con React Jonathan Samines
2. ¿Qué es React? • Una librería escrita en Javascript que facilita el desarrollo de aplicaciones web (y móviles nativas) • Permite escribir aplicaciones de forma declarativa • Es rápida, ligera, sencilla y fácil de aprender
3. Beneficios de utilizar React • Permite encapsular el comportamiento completo de un componente. • Es muy sencillo reutilizar un componente • Declaración explicita de las mutaciones en el estado de la aplicación
4. ¿Qué es la programación declarativa? • Usualmente indicamos mediante un conjunto de instrucciones lo que se requiere, a través de éste conjunto ordenado de pasos obtenemos nuestra aplicación (Imperativa) • Una aplicación declarativa es aquella en la que se indica lo que se requiere, sin especificar los detalles de cómo esta será construida
5. ¿Como se logra que una interfaz de usuario sea declarativa? • Abstracción. Usualmente construimos aplicaciones a través de operaciones con el DOM. Evitamos lidiar con diferencias entre navegadores, y con operaciones manuales a través del DOM. • Encapsulación. Trabajamos con unidades atómicas que encapsulan los detalles de como luce y se comporta cada parte de nuestra aplicación. Componentes y elementos.
6. ¿Que es un componente? • Es una función que recibe un conjunto de propiedades, y devuelve un elemento como valor de retorno • Posee propiedades (props) y estado (state), las cuales determinan como será el elemento a devolver. • Por convención, los componentes se nombran con TitleCase. • Una aplicación React, es una jerarquía de elementos que se comunican entre sí
7. ¿Que es un elemento? • Un elemento es una representación virtual de una “parte” de nuestra aplicación • Puede construirse a partir de elementos nativos (DOM). Por ejemplo elementos p, span, etc. • Puede construirse a partir de componentes (Custom). • Puede ser cualquier cosa que se pueda convertir a un string. (TextNodes). • React.createElement([String | Function], [props], [children])
8. ¿Como luce una aplicación hecha con react? import React from ‘react’; import ReactDOM from ‘react-dom’; function App(props) { return ( React.createElement(‘p’, null, [props.title]) ); }; ReactDOM.render( React.createElement(App, { title: ‘Mi primera aplicacion’ }), document.getElementById(‘app’) );
9. Propiedades y estado • Las propiedades indican características que pueden afectar el elemento que un componente retorna. Son proporcionadas por el componente padre que lo utiliza • El estado, es una propiedad privada de un componente y que guarda información sobre como éste se debe de comportar.
10. Propiedades y estado import React from ‘react’; class App extends React.Component { constructor(props) { super(props); this.state = { counter: 0 }; this.updateCounter = this.updateCounter.bind(this); } updateCounter() { this.setState((prevState) => { return { counter: prevState.counter + 1 }; }); } render() { return ( React.createElement( ‘span’, { onClick: this.updateCounter }, [‘Number : #’ + this.state.counter]) ); } }; ReactDOM.render( React.createElement(App), document.getElementById(‘app’) );
11. Children • Es una propiedad (prop) especial que cada componente acepta • Permite que un componente muestre un elemento(s) dentro de su estructura.
12. Children import React from ‘react’; function Counter(props) { return ( React.createElement(‘p’, null, [ React.createElement(’span’, null, [’Count number: ‘]), React.createElement(’span’, null, [props.children]) ]) ); }; import React from ‘react’; import Counter from ‘./counter’; function App(props) { return ( React.createElement(Counter, null, [0]) ); };
13. ¿Como se comunican los componentes entre si? • Flujo de comunicación unidireccional (top-down, data down, actions up) • Mediante propiedades. Las funciones pueden ser pasadas como propiedades que son utilizadas como mecanismo de comunicación • ¿Qué ventajas tiene éste modelo respecto el modelo de autobinding?
14. ¿Como se comunican los componentes entre si? import React from ‘react’; function Counter(props) { return ( React.createElement(‘p’, null, [ React.createElement(’span’, { onClick: props.onClick }, [’Count number: ‘]), React.createElement(’span’, null, [props.children]) ]) ); };
15. ¿Como se comunican los componentes entre si? import React from ‘react’; import Counter from ‘./counter’; Class App extends React.Component { constructor(props) { super(props); this.state = { counter: 0 }; this.updateCounter = this.updateCounter.bind(this); } updateCounter() { this.setState((prevState) => ({ counter: prevState.counter + 1 })); } render() { return ( React.createElement(Counter, { onClick: this.updateCounter } , [this.state.counter]) ); } }
16. ¿Por qué es React rápido? • No realiza operaciones de actualización innecesarias sobre el DOM • Un componente solo se actualiza si las propiedades que recibe o su propio estado interno cambian • La actualización se puede optimizar si se conoce bajo que circunstancias un componente se debería de actualizar
17. ¿Puede ser aún más sencillo? • JSX es una extensión del lenguaje (Javascript) que permite describir elementos de React de forma muy intuitiva. • HTML en mi Javascript? No es eso una violación a la separación de concerns? Depende del punto de vista de la “separación” • Separación de tecnologías vs Separación de problemas • JSX no es html/sml, es una sintaxis especial para describir elementos de React.
18. ¿Puede ser aún más sencillo? import React from ‘react’; function Counter(props) { return ( <p> <span onClick={props.onClick}>Count Number: </span> <span>{props.children}</span> </p> ); }; • ¿Por qué todavía necesito importar “React”?
19. ¿Cómo se transforma el código JSX a expresiones React.createElement? • La aplicación se pre-compila (transforma) • Usualmente se utiliza babel. Babel es un compilador para javascript. • Transforma código de X a X. Al principio era de Javascript (moderno) a Javascript (legacy) • Puede transformar las expresiones JSX a llamadas de React.createElement.
20. Mencioné que también se pueden desarrollar aplicaciones nativas? • React es una librería agnóstica al sistema de UI utilizado. • React DOM provee las utilidades necesarias para funcionar en la web • React Native provee las utilidades necesarias para funcionar en aplicaciones Nativas (Android, IOS, Windows Phone) • React VR?
21. GRACIAS