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 -
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 -
Módulo 5 | 4 clases
Code splitting
expand_more -
Módulo 6 | 4 clases
React context
expand_more -
Módulo 7 | 3 clases
Cómo funciona React
expand_more -
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_outlineMódulo 9
Examen del curso
expand_more-
done_all
Examen
Examen final del curso
-