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.
-
check_circle_outlineMódulo 1 | 4 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 7 clases
JSX - Templates
expand_more -
check_circle_outlineMódulo 3 | 10 clases
Componentes
expand_more-
done_all
Clase 1
Introducción a los componentes
-
done_all
Clase 2
Definiendo componentes
-
done_all
Clase 3
El render
-
done_all
Clase 4
Introducción a las props
-
done_all
Clase 5
Props en práctica
-
done_all
Clase 6
Qué es el state
-
done_all
Clase 7
Ejercicios con el state
-
done_all
Clase 8
Ciclo de vida de un componente
-
done_all
Clase 9
Eventos
-
done_all
Clase 10
Efectos secundarios
-
-
check_circle_outlineMódulo 4 | 3 clases
Formularios
expand_more -
check_circle_outlineMódulo 5 | 4 clases
Code splitting
expand_more -
check_circle_outlineMódulo 6 | 4 clases
React context
expand_more -
check_circle_outlineMódulo 7 | 3 clases
Cómo funciona React
expand_more -
check_circle_outlineMódulo 8 | 7 clases
Componentes de clase
expand_more -
check_circle_outlineMódulo 9.-
Examen del curso
expand_more-
done_all
Examen
Examen final del curso
-