Monthly Subscription Starting at AED 99 + VAT

React avanzado
  • Level Professional
  • المدة 26 ساعات hours
  • الطبع بواسطة Meta
  • Offered by

عن

Aprenda a utilizar conceptos y funciones de React más avanzados, a dominar JSX y a probar sus aplicaciones con confianza. Examinará diferentes tipos de componentes de React y aprenderá diversas características y cuándo utilizarlos. Analizará enlaces más avanzados y creará los suyos propios. Verá cómo crear formularios con React. Explorará la composición de componentes y nuevos patrones, como los componentes de orden superior y los accesorios de renderizado. Creará una aplicación web que consume datos de la API y se familiarizará con las integraciones, herramientas y técnicas de prueba de marco React más utilizadas. Al final de este curso, podrá: • Renderizar listas y componentes de manera eficiente en React. • Elevar estados compartidos cuando diversos componentes requieren de datos actualizados. • Utilizar el contexto de React para compartir el estado global de un árbol de componentes. • Obtener datos de un servidor remoto. • Utilizar enlaces avanzados en React, y ponerlos en uso dentro de su aplicación. • Crear sus propios enlaces personalizados. • Entender JSX en profundidad. • Adoptar técnicas de composición de componentes. • Utilizar patrones avanzados para encapsular comportamientos comunes a través de los componentes de orden superior y los accesorios de renderizado. • Probar sus componentes React. • Construir un portafolio utilizando React. Obtendrá experiencia con las siguientes herramientas y software: • React.js • JSX • React • HTML, CSS, y JavaScript • VSCode Podrá aprovechar el potencial de este curso para desarrollar nuevas habilidades, mejorar la productividad, actuar eficazmente con datos e impulsar su carrera. Para realizar este curso, debe comprender los conceptos básicos de React, HTML, CSS y JavaScript. ¡Además, siempre ayuda a tener una actitud positiva!

الوحدات

Introducción al curso

    • 4 Videos
    • 5 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • Encuentro y saludo

4 Videos

  • Introducción al curso
  • React y sus oportunidades profesionales
  • Configuración de VS Code (opcional)
  • Diseños de cuadrícula

5 Readings

  • Programa del curso
  • Cómo tener éxito en este curso
  • Configurar un proyecto de React en VS Code (opcional)
  • Instalación de Node y NPM (opcional)
  • Trabajar con laboratorios en este curso

Renderizado de listas en React

    • 4 Videos
    • 2 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Autoevaluación: Crear un componente de lista básico
  • Comprobación de conocimientos: Renderizado de listas en React

1 Labs

  • Ejercicio: Crear un componente de lista básico

4 Videos

  • Transformación de listas en JavaScript
  • Renderizar un componente de lista simple
  • ¿Qué son las claves en React?
  • Uso de claves en componentes de lista

2 Readings

  • Solución: Crear un componente de lista básico
  • Recursos adicionales

Formularios en React

    • 3 Videos
    • 3 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Autoevaluación: Crear un formulario de inscripción
  • Comprobación de conocimientos: Formularios en React

1 Labs

  • Ejercicio: Crear un formulario de inscripción

3 Videos

  • ¿Qué son los componentes controlados?
  • Creación de un componente de formulario en React
  • Crear un componente de formulario controlado

3 Readings

  • Componentes controlados vs. componentes no controlados
  • Solución: Crear un formulario de registro
  • Recursos adicionales

Contexto de React

    • 3 Videos
    • 3 Readings
    • 1 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Autoevaluación: Crear un conmutador de temas claros y oscuros
  • Comprobación de conocimientos: Contexto de React
  • Cuestionario del módulo: Componentes

1 Labs

  • Ejercicio: Crear un conmutador de temas claros y oscuros

3 Videos

  • Qué sabe sobre las propiedades y el estado
  • ¿Qué es Context y por qué se utiliza?
  • Resumen del módulo: Componentes

3 Readings

  • Solución: Crear un conmutador de temas claros y oscuros
  • Cómo funciona la rerenderización con Context
  • Recursos adicionales

Introducción a HTML

    • 5 Videos
    • 4 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Autoevaluación: Gestión del estado de un componente
  • Comprobación de conocimientos: Introducción a enlaces

1 Labs

  • Ejercicio: Gestión del estado de un componente

5 Videos

  • Trabajar con enlaces de React
  • Revisión del enlace useState
  • Uso del enlace useState
  • ¿Qué son los efectos secundarios?
  • Uso del enlace useEffect

4 Readings

  • Trabajar con datos complejos en useState
  • Solución: Gestión del estado de un componente
  • ¿Qué es el enlace useEffect?
  • Recursos adicionales

Reglas de los enlaces y obtención de datos con enlaces

    • 4 Videos
    • 3 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Autoevaluación: ¿Puede obtener datos?
  • Comprobación de conocimientos: Reglas de los enlaces y obtención de datos con enlaces

1 Labs

  • Ejercicio: ¿Puede obtener datos?

4 Videos

  • ¿Cuáles son las reglas de los enlaces?
  • Qué saber antes de obtener datos
  • Obtención de datos - Recopilación de datos
  • API

3 Readings

  • Obtención de datos mediante enlaces
  • Solución: ¿Puede obtener datos?
  • Recursos adicionales

Enlaces avanzados

    • 3 Videos
    • 4 Readings
    • 1 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Autoevaluación: Cree su propio enlace personalizado, usePrevious
  • Comprobación de conocimientos: Enlaces avanzados
  • Cuestionario del módulo: Enlaces de React y enlaces personalizados

1 Labs

  • Ejercicio: Cree su propio enlace personalizado, usePrevious

3 Videos

  • Qué es useReducer y en qué se diferencia de useState
  • useRef para acceder al DOM subyacente
  • Resumen del módulo: Enlaces de React y enlaces personalizados

4 Readings

  • Cuándo elegir useReducer frente a useState
  • Enlaces personalizados
  • Solución: Crear su propio enlace personalizado, usePrevious
  • Recursos adicionales

Análisis profundo de JSX

    • 5 Videos
    • 3 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Autoevaluación: Construir un componente de grupo de radio
  • Comprobación de conocimientos: JSX

1 Labs

  • Ejercicio: Construir un componente de grupo de radio

5 Videos

  • JSX, componentes y elementos
  • La importancia del rendimiento en el desarrollo de software
  • Composición de componentes con elementos secundarios
  • Manipulación dinámica de elementos secundarios en JSX
  • Atributos de Spread

3 Readings

  • Tipos de elementos secundarios
  • Solución: Construir un componente de grupo de radio
  • Recursos adicionales

Reutilización de comportamientos

    • 3 Videos
    • 3 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Autoevaluación: Implementación de la posición del desplazador con propiedades de renderizado
  • Comprobación de conocimientos: Reutilización de comportamientos

1 Labs

  • Ejercicio: Implementación de la posición del desplazador con propiedades de renderizado

3 Videos

  • Cuestiones transversales en React
  • Crear una HOC para la posición del cursor
  • Propiedades de renderización

3 Readings

  • Componentes de orden superior
  • Solución: Implementación de la posición del desplazador con propiedades de renderizado
  • Recursos adicionales

Pruebas de integración con React Testing Library

    • 4 Videos
    • 3 Readings
    • 1 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Autoevaluación: Escribir más escenarios de prueba
  • Comprobación de conocimientos: Pruebas automatizadas
  • Cuestionario del módulo: JSX y pruebas

1 Labs

  • Ejercicio: Escribir más escenarios de prueba

4 Videos

  • Por qué React Testing Library
  • Escribir la primera prueba para su formulario
  • Guías de estilo
  • Resumen del módulo: JSX y pruebas

3 Readings

  • Solución: Escribir más escenarios de prueba
  • Introducción a la integración continua
  • Recursos adicionales

Evaluación con calificación

    • 2 Videos
    • 3 Readings
    • 1 PeerReview
    • 1 Lab
    • 1 Assignment
Show info about module content

1 Assignment

  • Examen final con calificación React avanzado

1 Peer Review

  • Revisar la cartera de un compañero

1 Labs

  • Cree su carpeta de proyectos

2 Videos

  • Resumen del curso: React avanzado
  • Recorrido por la solución: Cartera

3 Readings

  • Sobre el proyecto final
  • Bibliotecas externas populares
  • Código de solución

Resumen del curso

    • 1 Videos
    • 1 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • Reflexionar sobre el aprendizaje

1 Videos

  • ¡Enhorabuena, ha completado React avanzado!

1 Readings

  • Próximos pasos

Auto Summary

"React avanzado" es un curso especializado en IT y Ciencias de la Computación, ofrecido por Coursera y diseñado para desarrolladores con conocimientos básicos de React, HTML, CSS y JavaScript. Guiado por expertos, el curso profundiza en conceptos avanzados de React, como JSX, componentes de orden superior, y técnicas de pruebas. A lo largo de 1560 minutos, aprenderás a renderizar eficientemente listas, elevar estados compartidos, y crear aplicaciones web que consuman datos de API. Disponible en suscripciones Starter y Professional, este curso es ideal para quienes buscan mejorar su productividad y avanzar en su carrera.

Taught by Meta Staff
Instructor

Taught by Meta Staff