Desarrollo de Aplicaciones N° 01 - 02 - reactjs(2).pptx
- 1. Desarrollo de Aplicaciones II Unidad: Framework de FrontEnd
- 3. II Unidad: Framework de FrontEnd 7. ReactJS
- 4. ¿Qué es React.js? • Es una tecnología front-end, también conocido como ReactJS. • Es una librería Javascript de código abierto open-source creada por Facebook para construir interfaces de usuario. • React está basada en Componentes, facilitando su reutilización. • Cada Componente maneja su propio estado (state). • Los Components se pueden combinar para crear interfaces (UI) más complejas. • Ofrece grandes beneficios en performance, modularidad y promueve un flujo muy claro de datos y eventos.
- 5. • Facilita la planeación y desarrollo de apps complejas. • Es una librería enfocada en la visualización. • Si estamos iniciando un proyecto podemos basarnos en la arquitectura Flux. • Si ya tenemos un proyecto usando un Framework MVC como AngularJS podemos dejar AngularJS como Controlador y que ReactJS se encargue de las vistas. • ReactJS tiene un performance superior al momento para manipular el DOM, y esto tiene un gran impacto cuando se trata con listas largas que cambian constantemente en nuestra visualización.
- 6. • El secreto de ReactJS, es que implementa algo llamado Virtual DOM. • En vez de renderizar todo el DOM, este hace los cambios en una copia en memoria. • Después se usa un algoritmo para comparar las propiedades de la copia en memoria con las de la versión del DOM y aplicar cambios exclusivamente en las partes que varían. • Promueve el flujo de datos en un solo sentido.
- 7. React.js: Performance de renderización • React implementa Virtual DOM. • Crea una copia del DOM en memoria. • Utiliza un algoritmo para comparar (diff) las propiedades y actualizar solamente las partes que cambiaron. • React Fiber es la nueva mejora a este algoritmo.
- 8. JSX • Es una extensión de la sintaxis de JavaScript. • produce “elementos” de React.
- 9. ¿Qué es JSX y para qué sirve? • Es un pseudolenguaje llamado JSX que facilita el desarrollo de aplicaciones web con su sintaxis para crear elementos en el DOM. • ReactJS se enfoca en la visualización y debemos armar el HTML que deseamos directamente en JSX.
- 10. ¿Por qué JSX? • React acepta el hecho de que la lógica de renderizado está intrínsecamente unida a la lógica de la interfaz de usuario: • Cómo se manejan los eventos. • Cómo cambia el estado con el tiempo y • Cómo se preparan los datos para su visualización. • React separa intereses con unidades ligeramente acopladas llamadas “componentes” que contienen ambas. • React no requiere usar JSX. • Se hace útil como ayuda visual cuando trabajan con interfaz de usuario dentro del código Javascript. • Permite que React muestre mensajes de error o advertencia más útiles.
- 11. Insertando expresiones en JSX • Declaramos una variable llamada name y luego la usamos dentro del JSX envolviéndola dentro de llaves: • Se puede poner cualquier expresión de JavaScript dentro de llaves en JSX. 2 + 2, user.firstName, o formatName(user) son todas expresiones válidas de Javascript.
- 12. JSX también es una expresión • Después de compilarse, las expresiones JSX se convierten en llamadas a funciones JavaScript regulares y se evalúan en objetos JavaScript. • Esto significa que puedes usar JSX dentro de declaraciones if y bucles for, asignarlo a variables, aceptarlo como argumento, y retornarlo desde dentro de funciones:
- 13. Especificando atributos con JSX • Puedes utilizar comillas para especificar strings literales como atributos: • También se puede usar llaves para insertar una expresión JavaScript en un atributo: • No poner comillas rodeando llaves cuando insertes una expresión JavaScript en un atributo. • Utilizar comillas (para los valores de los strings) o llaves (para las expresiones), pero no ambas en el mismo atributo.
- 14. Especificando hijos con JSX • Si una etiqueta está vacía, puedes cerrarla inmediatamente con />, como en XML: • Las etiquetas de Javascript pueden contener hijos:
- 15. Renderizando elementos • Los elementos son los bloques más pequeños de las aplicaciones de React. • Un elemento describe lo que quieres ver en la pantalla: • A diferencia de los elementos del DOM de los navegadores, los elementos de React son objetos planos, y su creación es de bajo costo. • React DOM se encarga de actualizar el DOM para igualar los elementos de React.
- 16. Renderizando un elemento en el DOM • Digamos que hay un <div> en alguna parte de tu archivo HTML: • Lo llamamos un nodo “raíz” porque todo lo que esté dentro de él será manejado por React DOM. • Las aplicaciones construidas solamente con React usualmente tienen un único nodo raíz en el DOM. • Dado el caso que estés integrando React en una aplicación existente, puedes tener tantos nodos raíz del DOM aislados como quieras.
- 17. • Para renderizar un elemento de React, primero pasamos el elemento del DOM a ReactDOM.createRoot(), luego pasamos el elemento de React a root.render():
- 18. Actualizando el elemento renderizado • Los elementos de React son inmutables. • Una vez creas un elemento, no puedes cambiar sus hijos o atributos. • Un elemento es como un fotograma solitario en una película: este representa la interfaz de usuario en cierto punto en el tiempo. • Con nuestro conocimiento hasta este punto, la única manera de actualizar la interfaz de usuario es creando un nuevo elemento, y pasarlo a root.render().
- 19. • Este llama a root.render() cada segundo desde un callback del setInterval().
- 20. React solo actualiza lo que es necesario • React DOM compara el elemento y sus hijos con el elemento anterior, y solo aplica las actualizaciones del DOM que son necesarias para que el DOM esté en el estado deseado. • Aunque creamos un elemento que describe el árbol de la interfaz de usuario en su totalidad en cada instante, React DOM solo actualiza el texto del nodo cuyo contenido cambió. • Pensar en cómo la interfaz de usuario debería verse en un momento dado y no en cómo cambiarla en el tiempo, elimina toda una clase de errores.
- 21. Componentes y propiedades • Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada. • Conceptualmente, los componentes son como las funciones de JavaScript. • Aceptan entradas arbitrarias (llamadas “props”) y retornan elementos de React que describen lo que debe aparecer en la pantalla.
- 22. Componentes funcionales y de clase • La forma más sencilla de definir un componente es escribir una función de JavaScript: • Esta función es un componente de React válido porque acepta un solo argumento de objeto “props” (que proviene de propiedades) con datos y devuelve un elemento de React. • Los llamamos componentes “funcionales” porque literalmente son funciones JavaScript.
- 23. • También puedes utilizar una clase de ES6 para definir un componente: • Los dos componentes anteriores son equivalentes desde el punto de vista de React. • Tanto los componentes de función como de clase tienen algunas características adicionales.