codequick-darkmode-logo
Iniciar sesiónRegistrarse
Curso de React

Sílabo:

Curso de React

20 Lecciones 125 Preguntas de Programación en Línea


¿Qué temas se cubrirán en el curso?

Introducción a los Conceptos Básicos de React

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. Conclusión