Logo de Código Facilito
  • Inicio
  • Replays
  • Iniciar sesión
  • Crear cuenta
  • Explorar cursos
  • Bootcamps
  • Precios
  • Blog

¡Califica el Curso Profesional de React (legado)!

Selecciona la calificación de 1 a 5 estrellas

Reporta un error

Curso Curso Profesional de React (legado)

Video Qué son los componentes de clase

Tipo de error

Algo salió mal al cargar el vídeo

El vídeo no pudo cargarse, hemos enviado un reporte al equipo de desarrollo, para poder solucionarlo a la brevedad.

Mientras solucionamos el problema, intenta lo siguiente para solucionar el error:

  • Recarga la página
  • Intenta reiniciar tu navegador y luego vuelve a reproducir el vídeo
  • Vacía el caché de tu navegador
  • Intenta reproducir con las extensiones del navegador deshabilitadas
  • Intenta con un navegador distinto
  • Si el problema persiste contáctanos en Discord
home Ir al inicio report_problem Reportar falla star Valorar curso

Un componente de clase es aquél que está definido con una clase de JavaScript. Esta clase debe tener dos particularidades:

  • Primero, debe ser una clase de ES6 de JavaScript que herede de React.Component
  • Debe poder implementar un método render() que retorne los elementos de React para la interfaz de dicho componente.

Históricamente, un componente de clase se diferencía de un componente funcional en dos principales cosas: La capacidad de administrar un estado propio del componente y la exposición de métodos que pueden ejecutar funcionalidad personalizada en distintas etapas del ciclo de vida de un componente.

Sin embargo, con la introducción de hooks en React 16, los componentes funcionales homologaron la funcionalidad de los componentes de clase en que ahora también pueden guardar un estado y ejecutar métodos del ciclo de vida de un componente.

En ese sentido, gran parte de la comunidad de desarrolladores que usan React, recomiendan usar componentes funcionales y hooks, en lugar de componentes de clase. Al mismo tiempo, el equipo que mantiene y desarrolla React, recomienda que no se re escriban componentes de clase en componentes funcionales a menos que sea necesario.

Esto quiere decir que en el futuro, React soportará ambas formas de declarar un método, con clases y con funciones. Esto significa que para un desarrollador nuevo de React es necesario conocer ambas formas de declarar componentes ya que es probable que en su trabajo día a día se encuentre con componentes de clase y componentes funcionales como parte de una misma aplicación.

Por último, cabe mencionar que algunos conceptos de React son más claros cuando se observan a través de la definición en un componente de clase, particularmente los métodos del ciclo de vida de un componente.

  • Módulo 1 | 4 clases

    Introducción

    expand_more
    • play_circle_outline

      Clase 1

      Presentación del curso profesional de React

    • play_circle_outline

      Clase 2

      Qué es React

    • play_circle_outline

      Clase 3

      Hola mundo con React

    • play_circle_outline

      Clase 4

      Cómo usar React en una página

  • Módulo 2 | 7 clases

    JSX - Templates

    expand_more
    • play_circle_outline

      Clase 1

      Primeros pasos en JSX

    • play_circle_outline

      Clase 2

      Elementos de React

    • play_circle_outline

      Clase 3

      Mostrar componentes

    • play_circle_outline

      Clase 4

      Expresiones JavaScript en JSX

    • play_circle_outline

      Clase 5

      Condiciones

    • play_circle_outline

      Clase 6

      Ciclos

    • play_circle_outline

      Clase 7

      Listas

  • Módulo 3 | 10 clases

    Componentes

    expand_more
    • play_circle_outline

      Clase 1

      Introducción a los componentes

    • play_circle_outline

      Clase 2

      Definiendo componentes

    • play_circle_outline

      Clase 3

      El render

    • play_circle_outline

      Clase 4

      Introducción a las props

    • play_circle_outline

      Clase 5

      Props en práctica

    • play_circle_outline

      Clase 6

      Qué es el state

    • play_circle_outline

      Clase 7

      Ejercicios con el state

    • play_circle_outline

      Clase 8

      Ciclo de vida de un componente

    • play_circle_outline

      Clase 9

      Eventos

    • play_circle_outline

      Clase 10

      Efectos secundarios

  • Módulo 4 | 3 clases

    Formularios

    expand_more
    • play_circle_outline

      Clase 1

      Leyendo el valor de los controles

    • play_circle_outline

      Clase 2

      Enviando formularios

    • play_circle_outline

      Clase 3

      Manipulando el DOM directamente

  • Módulo 5 | 4 clases

    Code splitting

    expand_more
    • play_circle_outline

      Clase 1

      Qué es Code Splitting

    • play_circle_outline

      Clase 2

      Code Splitting en práctica

    • play_circle_outline

      Clase 3

      Imports dinámicos

    • play_circle_outline

      Clase 4

      React lazy y Suspense

  • Módulo 6 | 4 clases

    React context

    expand_more
    • play_circle_outline

      Clase 1

      Qué es React Context

    • play_circle_outline

      Clase 2

      React context en práctica

    • play_circle_outline

      Clase 3

      Actualizando el contexto

    • play_circle_outline

      Clase 4

      Otros ejemplos del uso de contexto

  • Módulo 7 | 3 clases

    Cómo funciona React

    expand_more
    • play_circle_outline

      Clase 1

      Qué es el Virtual DOM

    • play_circle_outline

      Clase 2

      Qué son los hooks

    • play_circle_outline

      Clase 3

      Cómo funciona JSX

  • Módulo 8 | 7 clases

    Componentes de clase

    expand_more
    • play_arrow

      Clase 1

      Qué son los componentes de clase

    • play_circle_outline

      Clase 2

      Cómo definir un componente de clase

    • play_circle_outline

      Clase 3

      Trabajando con props

    • play_circle_outline

      Clase 4

      Trabajando con el estado

    • play_circle_outline

      Clase 5

      Preservando el contexto

    • play_circle_outline

      Clase 6

      Métodos del ciclo de vida de un componente

    • play_circle_outline

      Clase 7

      Ciclo de vida en un componente funcional

  • check_circle_outline
    Módulo 9

    Examen del curso

    expand_more
    • done_all

      Examen

      Examen final del curso

Qué son los componentes de clase

arrow_back Siguiente arrow_forward
Curso Profesional de React (legado)