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 Introducción a las props

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

Como menciona la documentación de React:

Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan datos de entrada (llamados props) y returnan elementos de React que describen lo que debería aparecer en la pantalla.

Las props son la colección de datos que un componente recibe del contenedor padre, y que pueden usarse para definir los elementos de React que retornará el componente.

En términos prácticos, si un componente necesita recibir información para funcionar, la recibe vía props.

En términos técnicos, las props tienen ciertas características:

  • Son inmutables, que es el adjetivo para lo que no se puede modificar o cambiar. Una prop no se modifica.
  • Pueden tener un valor por defecto
  • Pueden marcarse como obligatorias, cuando un componenente no puede funcionar sin recibir una prop.

En JSX, las props se ven como los atributos de los elementos HTML:

<Btn value=”Enviar” />

Estas props pueden recibir un string o el resultado de una expresión de JavaScript, usando la sintaxis de llaves:

<Saludo value={` Hola ${nombre} `} />

En componentes funcionales, las props se reciben como argumentos de la función. En clases se pueden leer vía la propiedad props del objeto:

const Btn = (props)=>{ return null; }

class Btn extends React.Component{
  render(){ console.log(this.props); return null; }
}

Continuemos aprendiendo sobre props en el siguiente tema, donde veremos valores por defecto.

  • 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_arrow

      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_circle_outline

      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

Introducción a las props

arrow_back Siguiente arrow_forward
Curso Profesional de React (legado)