Aprende a construir interfaces web de usuario con React, la biblioteca de JavaScript creada por Facebook, perfecta para generar vistas, especialmente cuando trabajas con el modelo MVC (Model View Controller). React ofrece facilidad gracias a la forma en como se abstraen los componentes del DOM de todo HTML, usando Virtual DOM. En este curso también aprenderás a trabajar con el flujo de datos en una sola dirección, que React propone para poder planificar mejor la estructura de tu programa, así como prevenir y detectar errores cuando tu aplicación se torna muy compleja. AAA Introducción al curso de React. De 0 a 100 001 Qué es la librería React y para qué se usa En este vídeo vamos a conocer de manera general que es React, para qué sirve y por qué es una buena opción para el desarrollo de nuestras aplicaciones web. Conoceremos de dónde viene esta poderosa herramienta y daremos un vistazo a la aplicación final que vamos a desarrollar en este curso. 002 Objetivos del curso de React. De 0 a 100 Vamos a ver cuáles los objetivos y metas del curso, familiarizándonos con los conceptos asociados a React y dando un paseo rápido tanto por todo lo que aprenderemos en este curso, como por la aplicación final que estaremos desarrollando a lo largo de todos los capítulos. 003 Archivos base del curso de React. De 0 a 100 En este vídeo descubriremos la estructura de los archivos base que acompañan a este curso y que nos servirán para entender mejor y desarrollar los ejercicios a realizar con React. 004 Requisitos antes de ver el curso de React. De 0 a 100 Es necesario que tengamos algunas cosas listas antes de comenzar el curso para que podamos seguir los pasos y el ritmo sin perder ningún concepto. En este vídeo aprenderemos los requisitos necesarios así como las herramientas y forma de probar cada uno de los ejercicios. BBB Instalación, configuración y formas de uso de React 005 Primeros pasos: ¡Hola Mundo! con React y NPM NPM es el administrador de paquetes de Node que nos permitirá instalar paquetes con los cuales podremos trabajar con React. Aprenderemos los conceptos básicos de un transpiler y la función fundamental que este concepto tiene cuando estamos generando código con React. 006 ¡Hola Mundo! con React y transformación online En este tutorial vamos a aprender cómo hacer transpilaciones o traducciones de código en línea usando la librería Babel para este proceso. Conoceremos cómo hacer aplicaciones con React usando el CDN oficial del framework y de Babel, así como los beneficios y desventajas que este ofrece. 007 ¡Hola Mundo! con React y transformación offline Vamos a ver cómo realizar el proceso de transpilación o traducción de código de manera offline y delegar esta tarea a un proceso automatizado que nos permitirá tener disponible nuestro código traducido y listo para usar. 008 Herramientas y extensiones de la herramienta React Conoceremos las distintas herramientas disponibles para trabajar con React desde un navegador web, así como las extensiones disponibles para Sublime Text que nos servirán para entender y escribir nuestro código de una manera más ágil y sencilla. CCC Conceptos básicos: aproximación a la herramienta React 009 Virtual DOM, la estructura de la página web El DOM es la estructura medular de toda página web y React tiene una implementación propia que hará la interacción con este modelo mucho más rápida y eficaz. Vamos a descubrir las ventajas y beneficios que tiene el Virtual DOM en toda aplicación con React. 010 Trabajando con la sintaxis de React: consideraciones React tiene una sintaxis especial y una forma específica de uso. En este vídeo aprendemos cómo debemos estructurar el código de una aplicación y la manera en que se usa la sintaxis propia de React a través de sus métodos disponibles. 011 JSX, la extensión de JavaScript que trabaja con React React usa una extensión de JavaScript para trabajar de una manera más sencilla con las etiquetas. En este tutorial vamos a mostrar qué es y cómo se usa JSX, para saber cómo identificarlo en nuestro código y combinarlo con código de JavaScript. 012 Componentes fundamentales de la herramienta React Los componentes son la parte medular de toda aplicación desarrollada con React. Vamos a explicar cómo usarlos, instanciarlos y consumir toda la información y datos que se generen dentro de este. Conoceremos también cómo crear métodos y vistas desde un componente. 013 Propiedades específicas de la herramienta React Cada objeto que declaremos con JSX puede tener propiedades que describirán al componente. Vamos a ver cómo usar dichas propiedades a través del objeto props, así como la forma de declararlas y recuperar la información contenida desde los métodos del componente. 014 Cómo planificar y crear eventos desde la aplicación React Para que exista interacción en toda aplicación, es necesario identificar el tipo de evento que se está generando, de dónde viene y cómo reaccionar ante él. Vamos a mostrar las formas que hay de relacionar las vistas con los métodos del componente a través de eventos. 015 Qué son los estados en React y cómo trabajar con ellos Toda aplicación puede pasar por distintas etapas según la función que esté realizando en ciertas partes del programa. Vamos a ver cómo podemos trabajar con los estados, entendiendo el significado y la importancia de estos. DDD Componentes dinámicos como parte fundamental de React 016 Generación dinámica de instancias de componentes con React En este curso vamos a ver cómo generar la cantidad de instancias de componentes que necesitemos desde un componente principal. Aprenderemos a usar una fuente de datos como base para la creación de todas las instancias que se mostrarán en la vista. 017 Optimización del render de las instancias con React Vamos a analizar cómo lograr un código más limpio y sencillo de usar abstrayéndolo en una función parametrizable y de fácil uso. Tener un código mejor organizado nos ayudará a mejorar el performance y mantenimiento de nuestra aplicación. 018 Recuperación de los datos de la vista con React En este vídeo vamos a aprender cómo podemos recuperar la información que el usuario captura en los controles que están disponibles para su uso. Vamos a ver cómo el uso de las referencias nos facilitará la interacción entre la vista y los métodos del componente. 019 Agregar instancias de componentes a través de React Vamos a ver cómo podemos crear instancias de un componente en cualquier momento que necesitemos, cómo invocar funciones y afectar los datos existentes desde el establecimiento de estados y cómo entender el proceso para trabajar con instancias de un componente. 020 Instancias de componentes con datos por default con React En este tutorial nos vamos a familiarizar con las formas disponibles que hay para poder establecer y usar datos por default en un componente tanto desde un método concreto como desde la sintaxis particular de JSX combinando métodos de JavaScript y React. 021 Eliminar instancias de componentes mediante React Una vez que hemos entendido el proceso de cómo trabajar con instancias de componentes, vamos a ver cómo es posible eliminar una instancia y actualizar la vista para que, de esta manera, se vea reflejado el cambio en nuestra aplicación. 022 Agregar un estado para editar el contenido de una instancia En este tutorial vamos a aprender a usar los estados para cambiar la vista de un componente según las funciones que deseemos realizar en nuestra aplicación. Veremos también cómo realizar los cambios de vista usando los datos presentes en el objeto de estado de cada componente. 023 Editar datos de cada instancia de componente con React Aprenderemos a enviar los datos entre estados sin que estos se pierdan y que se reflejen inmediatamente, y a agregar los botones y métodos necesarios para poder realizar la actualización de datos de forma rápida y sencilla. EEE Ciclo de vida de los componentes de una aplicación 024 Detectar la carga previa de un componente con JSON Vamos a aprender a detectar el momento previo al montaje de un componente en la aplicación, para poder cargar datos desde un servicio externo usando JSON, y a generar la cantidad de componentes necesarios acorde a la cantidad de datos obtenidos del servicio remoto. 025 Cómo detectar cuándo se ha cargado un componente Detectar el momento justo en que se ha terminado de montar un componente en nuestra aplicación y comenzar a interactuar con los elementos de nuestro código, ahora que ya están disponibles en el DOM de nuestra aplicación, es fundamental para poder desarrollar correctamente nuestro trabajo. En este tutorial veremos cómo hacerlo. 026 Establecer propiedades por default en los componentes En este tutorial vamos a descubrir cómo establecer propiedades por default en nuestros componentes sin necesidad de declararlas con la sintaxis de JSX. Aprenderemos también a usar dichas propiedades por default en cualquier parte de nuestro programa a través del objeto props. 027 Despedida y conclusiones del curso React. De 0 a 100 Consejos, resumen y conclusiones del curso React. De 0 a 100, donde podremos repasar todo lo aprendido comparando cómo lo iniciamos y cómo estamos ahora que hemos terminado el curso y hemos realizado nuestra primera aplicación con React.