Introduccin a Javascript Moderno Dr Ismael Figueroa ismael

Introducción a Javascript Moderno Dr. Ismael Figueroa ismael. figueroa@pucv. cl http: //www. inf. ucv. cl/~ifigueroa Oficina 3 -23 IBC

¿Qué es React? Según el sitio oficial https: //reactjs. org: ● Una librería Javascript para construir interfaces de usuario ● Declarativa ● Basada en componentes ● Usable en todos lados: cliente, servidor, aplicaciones móviles

Creando aplicaciones React > > npm install -g create-react-app hola-react cd hola-react npm start Comandos disponibles: ● npm start: inicia servidor de desarrollo ● npm test: ejecuta test unitarios, escritos con jest ● npm run build: construye la versión de producción, lista para instalar

Hola Mundo React

Estructura aplicación / index. js import React from 'react'; import React. DOM from 'react-dom'; import '. /index. css'; import App from '. /App'; import register. Service. Worker from '. /register. Service. Worker'; React. DOM. render(<App />, document. get. Element. By. Id('root')); register. Service. Worker(); Renderiza el componente <App /> en el elemento real con id ‘root’

Estructura aplicación / App. js import React, { Component } from 'react'; import logo from '. /logo. svg'; import '. /App. css'; Así es como debe renderizarse el componente class App extends Component { render() { return ( <div class. Name="App"> <header class. Name="App-header"> <img src={logo} class. Name="App-logo" alt="logo" /> <h 1 class. Name="App-title">Welcome to React</h 1> JSX </header> <p class. Name="App-intro"> To get started, edit <code>src/App. js</code> and save to reload. </p> </div> ); } https: //reactjs. org/docs/introducing-jsx. htmll } export default App;

Conceptos Básicos ● El DOM Virtual y Real ● Los Componentes: propiedades y estado ● La clase React. Component ● El método render ● Usando componentes personalizados

Conceptos Básicos / DOM Virtual y Real ● ● React utiliza un DOM Virtual --- React. DOM es el “pegamento” entre el modelo de React y el browser Su misión es renderizar los componentes en el DOM Es un DOM virtual: ○ ○ Para cada objeto en el DOM Real hay un objeto en el DOM Virtual correspondiente Los objetos virtuales al ser modificados no forzan cambios en la pantalla/browser, sólo cuando son renderizados Es más rápido/eficiente manipular el DOM Virtual que el DOM Real Cuando se actualiza un componente en el DOM Virtual, React compara con el DOM Real y sólo se renderizan aquellos componentes que cambiaron

Los Componentes tienen propiedades - props class App extends Component { render() { return ( <div class. Name="App"> <header class. Name="App-header"> <img src={logo} class. Name="App-logo" alt="logo" /> <h 1 class. Name="App-title">{this. props. welcome}</h 1> </header> <p class. Name="App-intro"> {this. props. intro} </p> </div> ); } } React. DOM. render( <App welcome=”Hola Bienvenido” intro=”To get started…” /> , document. get. Element. By. Id('root') ); ● Los componentes aceptan valores de entrada arbitrarios, que se llaman “props” ● Se definen cuando el componente es creado ● Cada componente por tanto tiene acceso a this. props, que contiene todos estos valores ● Los props siempre deben tratarse como sólo-lectura, nunca deben modificarse. ● Los cambios dinámicos de interfaz de usuario se manejan con el estado de los componentes.

Validación de props > npm install --save prop-types ● Usando la librería prop-types se puede especificar el tipo de dato esperado para las props de un componente ● https: //reactjs. org/docs/typechecking-with-proptypes. html

Los Componentes tienen estado - this. state ● Se entiende por estado toda información que es relevante para el renderizado del componente, pero que es propio de la definición interna del componente ● Se debe considerar como datos privados del componente ● El estado se puede modificar durante la vida del componente Se debe usar la función set. State ● ● Generalmente responde a cambios por interacción del usuario, temporizadores, u otros fenómenos.

Estado / usando estado en el método render class App extends Component { render() { return ( <div class. Name="App"> <header class. Name="App-header"> <img src={logo} class. Name="App-logo" alt="logo" /> <h 1 class. Name="App-title"> {this. state. nombre && `${this. state. nombre}: `}{this. props. welcome} </h 1> </header> <p class. Name="App-intro"> {this. props. intro} </p> <input type="text" ref={n => this. nombre = n} name="nombre" /> <input type="button" name="OK" on. Click={this. handle. Click} value="OK" /> </div> ); } } ● Se usa accediendo a this. state ● El estado inicial se establece en el constructor utilizando asignación directa ● Los cambios posteriores deben usar this. set. State ● El estado puede depender de las props al momento de construcción

Estado / usando estado en el método render class App extends Component { render() { return ( <div class. Name="App"> <header class. Name="App-header"> <img src={logo} class. Name="App-logo" alt="logo" /> <h 1 class. Name="App-title"> {this. state. nombre && `${this. state. nombre}: `}{this. props. welcome} </h 1> </header> <p class. Name="App-intro"> {this. props. intro} </p> <input type="text" ref={n => this. nombre = n} name="nombre" /> <input type="button" name="OK" on. Click={this. handle. Click} value="OK" /> </div> ); } constructor(props) { super(props) this. state = { nombre : ""} this. handle. Click = this. handle. Click. bind(this); } Todo método que se use para manejar un evento DEBE SER ASOCIADO A this }

Estado / usando estado en el método render class App extends Component { render() { return ( <div class. Name="App"> <header class. Name="App-header"> <img src={logo} class. Name="App-logo" alt="logo" /> <h 1 class. Name="App-title"> {this. state. nombre && `${this. state. nombre}: `}{this. props. welcome} </h 1> </header> <p class. Name="App-intro"> {this. props. intro} </p> <input type="text" ref={n => this. nombre = n} name="nombre" /> <input type="button" name="OK" on. Click={this. handle. Click} value="OK" /> </div> ); } constructor(props) { super(props) this. state = { nombre : ""} this. handle. Click = this. handle. Click. bind(this); } handle. Click(e) { console. log("Click!"); let n = this. nombre. value; console. log(n); this. state. nombre = n; } }

Estado / usando estado en el método render class App extends Component { render() { return ( <div class. Name="App"> <header class. Name="App-header"> <img src={logo} class. Name="App-logo" alt="logo" /> <h 1 class. Name="App-title"> {this. state. nombre && `${this. state. nombre}: `}{this. props. welcome} </h 1> </header> <p class. Name="App-intro"> {this. props. intro} </p> <input type="text" ref={n => this. nombre = n} name="nombre" /> <input type="button" name="OK" on. Click={this. handle. Click} value="OK" /> </div> ); } constructor(props) { super(props) this. state = { nombre : ""} this. handle. Click = this. handle. Click. bind(this); } handle. Click(e) { console. log("Click!"); let n = this. nombre. value; console. log(n); this. set. State({ nombre: n }); } }

Conceptos Básicos / Clase React. Component ● Es la clase abstracta para los componentes de React ● Tiene un ciclo de vida definido por los siguientes tipos de sucesos: ○ Eventos de montaje (mounting): métodos invocados cuando una instancia del componente está siendo creada e insertada (o removida) del DOM real. ○ Eventos de actualización (updating): métodos que se invocan cuando hay cambios en las propiedades o el estado de un componente. Una actualización gatilla una re-renderización. ○ Eventos de manejo de errores: un componente puede capturar todos los errores producidos en su ejecución, o la ejecución de sus subcomponentes.

Conceptos Básicos / Eventos de montaje ● constructor(props): ○ ○ se llama antes del montaje se debe llamar a super(props) para una inicialización adecuada ● component. Will. Mount(): ○ se invoca justo antes de que ocurra el montaje, antes de render ● component. Did. Mount(): ○ ○ se invoca justo después del montaje se usa para la inicialización que depende de nodos del DOM, cargar datos desde red, etc. ● component. Will. Unmount(): ○ ○ se invoca justo antes de remover el componente del DOM, y que éste sea destruido se usa para realizar “limpieza”: cancelar operaciones pendientes, eliminar referencias, etc.

Conceptos Básicos / Eventos de actualización ● component. Will. Receive. Props(next. Props): ○ ○ ○ ● should. Component. Update(next. Props, next. State): ○ ○ ○ ● se invoca antes de re-renderizar un componente cuyas props y state han cambiado la idea es determinar si realmente es necesario re-renderizar el componente debe retornar true o false, no se invoca en el primer renderizado component. Will. Update(next. Props, next. State): ○ ● se invoca justo antes que un componente montado reciba nuevas props es útil para comparar lo pasado con lo futuro, por ejemplo actualizando el estado no se invoca en el primer montaje se invoca justo antes de re-renderizar component. Did. Update(): ○ ○ ○ se invoca justo después de la actualización no se invoca en el primer renderizado sirve para operar en el DOM con el nuevo estado/props actualizados

Conceptos Básicos / Eventos de manejo de errores ● component. Did. Catch(error, info): ○ un componente se transforma en una frontera de errores al definir este método ○ se invoca cuando se captura un error en el componente o cualquiera de sus hijos, y que no haya sido capturado antes ○ permite manejar los errores, por ejemplo, mostrando una UI distinta o mensajes de error

Conceptos Básicos / el método render() ● Es obligatorio para las subclases de React. Component ● Al ser invocado, debería examinar this. props y this. state y retornar: ○ Elementos React/JSX: elementos del DOM o componentes personalizados ○ Strings o Números: serán renderizados como texto en el DOM ○ Booleans: no renderiza, se usa para cosas como return test && <Elemento /> ○ null: no se renderiza nada

Conceptos Básicos / Componentes personalizados ● Todas las clases que extienden de React. Component se consideran componentes personalizados o también componentes definidos por el usuario ● Por convención parten con letra mayúscula ● Pueden usarse en expresiones JSX sin problemas, especificando las props como para cualquier otro componente

Principios de Diseño en React ● Siempre es preferible usar props antes que state. Buscar tener pocos componentes con estado, que contenga muchos otros sin estado. ● Un componente padre con estado mutable, renderizará a sus hijos, quienes deben usar props --“el estado de los padres serán las props de de los hijos” ● Los datos deberían siempre deben fluir “hacia abajo” ● Es más barato y “más mejor” re-renderizar que usar estado

Principios de Diseño en React ¿Quiénes deberían tener estado? ● Aquellos que responden a entrada del usuario, servidores, o el paso del tiempo ¿Qué debería guardar en el estado? ● Debería guardar los datos que cambian cuando se gatillan eventos del componente. ● Los valores calculados, es mejor recalcularlos en render, antes que guardarlos en el estado

● No-Controlados / Controlados Formularios ● No-Controlados: el estado del formulario está en el DOM real ● Controlados: el componente mantiene el estado del formulario, en el Virtual DOM

Formularios No-Controlados class App extends Component { render() { return ( <div class. Name="App"> <header class. Name="App-header"> <img src={logo} class. Name="App-logo" alt="logo" /> <h 1 class. Name="App-title"> {this. state. nombre && `${this. state. nombre}: `}{this. props. welcome} </h 1> </header> <p class. Name="App-intro"> {this. props. intro} </p> <input type="text" ref={n => this. nombre = n} name="nombre" /> <input type="button" name="OK" on. Click={this. handle. Click} value="OK" /> </div> ); } constructor(props) { super(props) this. state = { nombre : ""} this. handle. Click = this. handle. Click. bind(this); } handle. Click(e) { console. log("Click!"); let n = this. nombre. value; console. log(n); this. state. nombre = n; } } Se utiliza una referencia para obtener los valores desde el DOM

● Los componentes React/HTML aceptan los “mismos” eventos que el HTML de verdad… Eventos ● Se escriben en camel. Case: on. Click, on. Change, etc… ● Como valor del handler, debe ir una función, y no un string! ● Típicamente el handler es un método de la clase/componente, que debe ser asociado con bind

Eventos y Handlers class App extends Component { render() { return ( <div class. Name="App"> <header class. Name="App-header"> <img src={logo} class. Name="App-logo" alt="logo" /> <h 1 class. Name="App-title"> {this. state. nombre && `${this. state. nombre}: `}{this. props. welcome} </h 1> </header> <p class. Name="App-intro"> {this. props. intro} </p> <input type="text" ref={n => this. nombre = n} name="nombre" /> <input type="button" name="OK" on. Click={this. handle. Click} value="OK" /> </div> ); } constructor(props) { super(props) this. state = { nombre : ""} this. handle. Click = this. handle. Click. bind(this); } handle. Click(e) { console. log("Click!"); let n = this. nombre. value; console. log(n); this. state. nombre = n; } }

Ejemplos y desafíos

Encabezado y Contenido ● Separar nuestra aplicación App en 2 componentes: Header y Content ● Ojo con quién debe manejar el click, y con dónde almacenar el estado. . .

Relojes y Temporizadores ● Crear un componente que muestre un reloj con la hora actual, y se actualice cada segundo. ● Crear un componente que reciba una cantidad de segundos y funcione en reversa, mostrando un mensaje cuando se cumple el tiempo.

Lista de Tareas ● Mostrar listado de tareas (título, fecha, descripción) ingresadas mediante un campo de texto en un formulario. ● Mostrar la cantidad de elementos de la lista ● Dar la opción de seleccionar una tarea y modificar su descripción/título. ● Dar la opción de eliminar tareas de la lista

Lista con Filtros ● Mostrar un listado de ciudades ● Filtrar según el texto ingresado en un campo de texto ● Aplicar el filtrado a la Lista de Tareas

Gestor de Facturas ● Se debe crear líneas de factura, con código de producto, glosa, precio de lista y cantidad. Los datos deben ir directo en el componente, en tipo JSON. ● Al ingresar el código se actualizan los datos, y al ingresar la cantidad se recalcula el total de la línea. ● Se debe recalcular además el impuesto total (19%), el valor neto, el valor con IVA, y la opción de ingresar un % de descuento.