Descripción:
Creada por Facebook, esta librería Javascript de código abierto, ofrece grandes beneficios en performance, modularidad y, además, promueve un flujo muy claro de datos, facilitando el desarrollo de apps complejas. ReactJS no se trata de un Framework completo como AngularJS, sino que está enfocado a la implementación de la vista, en lo que podría ser un patrón clásico. Se trata de una librería para desarrollar interfaces de usuario, enfocada en la visualización, proporcionando un performance superior al momento para manipular el DOM. Esto lo consigue creando un DOM virtual en lugar de renderizarlo todo en cada cambio. La popularidad y adopción de esta librería crece día a día, siendo usada por grandes empresas y startups como Airbnb, Netflix, Uber, Pinterest, y por supuesto Facebook, entre muchas otras.
En ocasiones, aquellos que se han dedicado tanto tiempo puramente al diseño web y maquetación web, tienen duda de qué framework o librería deberían de comenzar a aprender, para complementar su aprendizaje y camino profesional, ante tantas opciones que emergen en el ecosistema de JavaScript. La buena noticia es: La curva de aprendizaje para aprender a comenzar a implementar ReactJS, es verdaderamente reducida respecto a cualquier otra librería o framework. Su sintaxis, su arquitectura y reglas de escritura, te serán muy familiares, si tienes bases sólidas de HTML, CSS y por lo menos nociones de JS, de tal manera que en poco tiempo podrás tener las bases para llevar a otro nivel tus proyectos.
Objetivo:
Al término de este Taller de ReactJS para Maquetadores y Diseñadores Web, los alumnos tendrán los conocimientos y habilidades suficientes para migrar cualquier diseño web tradicional hacia la arquitectura de ReactJS. Aprenderán y adoptarán las mejores prácticas para llevar a cabo proyectos implementando ReactJS, gestionando sus proyectos con github y consumiendo datos desde distintas y sus propias API’s. También aprenderán a llevar a cabo sus proyectos ReactJS con la forma de trabajo de Atomic Design.
Temario:
Parte 1: Comenzando con ReactJS
Qué es React | Cómo funciona el Virtual DOM | Qué son y cómo funcionan los componentes | Configurando el entorno para tu primera aplicación | Dependencias necesarias | Convenciones generales e importancia de EcmaScript 6 (ES6) en el desarrollo con ReactJS
Parte 2: JSX: comunicarnos en el idioma de ReactJS
Qué es y cómo funciona JSX | Restricciones en JSX | Entendiendo a profundidad JSX | Añadiendo estilos: Cómo incorporar nuestros propios estilos y librerías de terceros
Parte 3: Comprendiendo el uso de Componentes
Expresiones JSX | Propiedades | Componentes presentacionales | propTypes y defaultProps | Recorriendo Arrays
Parte 4: El estado en los Componentes
Componentes de Clase | Estado de un componente | Actualizar el estado | Escribir métodos | Ciclo de vida de montaje y desmontaje de componentes
Parte 5: React Router
Qué es React Router | Intalación de React Router | Declaración de Router y Rutas | Uso de Switch y 404 Not found | Contenido dinámico a partir de rutas | Componente Link y Menús con NavLink | Props de React RouterÂÂÂ
Parte 6: Peticiones HTTP
Peticiones a una API REST | Peticiones con fetch y axios | Actualización de estado con respuestas del API | API’s para practicar