¿Qué temas se cubrirán en el curso?
Introducción a los Conceptos Básicos de React
Introducción al Curso de React:
Palabras de apertura.
Qué es React y un poco sobre la historia de la biblioteca.
Énfasis en trabajar con un sistema de base de código.
Componente Básico de React:
Aprendiendo qué es JSX en React.
Cómo escribir un primer componente básico.
Construyendo un componente con datos estáticos y entendiendo los conceptos básicos.
Construyendo una Lista con Datos Dinámicos:
Construyendo elementos de manera dinámica.
Usando las capacidades de Array.prototype.map para la construcción dinámica.
Importando y exportando componentes desde un archivo.
Construyendo una Tabla con Datos Dinámicos:
Estructura de la tabla y sus componentes en HTML.
Usando un bucle anidado para construir una tabla.
Usando la función map de manera anidada.
Usando datos dinámicos de un archivo importado.
Estilizando con el Objeto Style:
Entendiendo la diferencia entre HTML y JSX.
Aprendiendo a estilizar elementos en la página.
Practicando la construcción dinámica de elementos de una manera desafiante con estilos aprendidos.
Componentes con Estado y Eventos
Integrando Archivos CSS en React:
Incorporando el mundo de los estilos como parte integral de la construcción de componentes.
Entendiendo qué es className y la diferencia entre HTML y JSX.
Incorporando un ejercicio comprensivo de todo el material aprendido hasta este punto en el curso.
Enfatizando las reglas de CSS y cómo se integran en nuestro sistema construido.
Integrando Props en Componentes:
Qué son las props en React y cuándo usarlas.
Construyendo componentes con props y métodos comunes de escritura.
Usando componentes que escribimos en construcción dinámica.
Construyendo una Tabla con Props:
Construyendo una tabla usando props.
Creando un componente inteligente en la construcción de la tabla.
Combinando la construcción dinámica con múltiples componentes usando props y estilizando con CSS.
Usando Eventos y useState:
Cómo vincular eventos de tipo onClick a elementos.
Qué son los componentes inteligentes y por qué los necesitamos.
Qué es el hook de react de tipo useState y cómo usarlo.
Creando condiciones booleanas dentro del JSX de un componente.
Conectando la creación de eventos y el almacenamiento de estado para la construcción de componentes inteligentes de React.
Usando el Evento onChange:
Cómo agregar un input a la página y usar useState para almacenar valores de input.
Construyendo una lista dinámica con datos ingresados por el usuario.
Explicación en profundidad de arrays y la diferencia entre valor y referencia.
Entendiendo cómo trabajar con arrays almacenados en el estado del componente.
Temas Avanzados y Uso de API
Construyendo una Tabla Dinámica con Eventos:
Entendiendo cómo integrar todo lo aprendido hasta ahora para construir una tabla de manera dinámica.
Usando useState para almacenar una serie de inputs.
Ejemplo de uso de estado complejo con un array de objetos.
Usando el Hook useEffect:
Qué es el hook de react de tipo useEffect y cómo y cuándo usarlo.
Realizando comunicación con el servidor usando fetch.
Mostrando métodos para asegurar nuestro código y evitar errores innecesarios.
Construyendo un componente inteligente que combina tanto useState como useEffect hooks.
Ejemplo de Uso de useEffect en Búsqueda del Lado del Servidor:
Explorando usos adicionales para useEffect.
Entendiendo cómo el ciclo de vida del componente afecta nuestra implementación de código.
Presentando un ejemplo complejo de uso de useEffect.
Usando Entradas Adicionales:
Qué es una entrada de tipo checkbox y cómo usarla.
Qué es una entrada de tipo radio y cómo usarla.
Qué son las entradas de tipo datetime y datetime-local y cuándo usarlas.
Construyendo una Tabla desde API con Filtrado de Resultados:
Realizando una solicitud API para obtener datos sobre una tabla.
Construyendo la tabla de manera dinámica.
Aprendiendo a realizar búsquedas mediante un filtrado inteligente de resultados.
Discutiendo arquitectura de código.
Temas Avanzados y Arquitectura de Código
Usando Filtros Avanzados:
Construyendo una tabla que muestra información sobre vuelos.
Expandiendo el uso de la tabla con un componente inteligente de fila.
Usando entradas para construir filtros para la tabla, utilizando checkbox, datetime y entradas de texto.
Biblioteca Bulma para Estilos Avanzados:
Aprendiendo a incrustar estilos pre-hechos.
Usando el paquete bulma para añadir color y estilos a proyectos de React construidos juntos.
Incrustando estilos en un componente existente y repasando la documentación de la biblioteca que usaremos.
Ordenación en JavaScript:
Mejorando un componente de tabla existente y añadiendo capacidades de ordenación a este.
Entendiendo en profundidad cómo funcionan las ordenaciones en arrays con números, cadenas y objetos.
Viendo cómo lidiar con ordenaciones especiales cuando nuestro campo no es una comparación directa.
Canales de Comunicación entre Componentes:
Aprendiendo cómo un componente hijo puede comunicarse con un componente padre.
Implementando estilos bulma en varios componentes.
Construyendo un componente versátil que nos permite incrustar pestañas en la aplicación.
Viendo ejemplos de uso de props de tipo función.
Conclusión