SlideShare una empresa de Scribd logo
1 de 2
Descargar para leer sin conexión
Introducción a las props
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ás contenido relacionado

Similar a 15.-Introducción a las props con FSX y ejercicios.pdf

Java persistence
Java persistenceJava persistence
Java persistence
cabraval
 

Similar a 15.-Introducción a las props con FSX y ejercicios.pdf (20)

Introducción a la programación y la informática. Tema 4
Introducción a la programación y la informática. Tema 4Introducción a la programación y la informática. Tema 4
Introducción a la programación y la informática. Tema 4
 
La propiedad prototype en la programación orientada a objetos con JavaScript
La propiedad prototype en la programación orientada a objetos con JavaScriptLa propiedad prototype en la programación orientada a objetos con JavaScript
La propiedad prototype en la programación orientada a objetos con JavaScript
 
1 -programacion_oo
1  -programacion_oo1  -programacion_oo
1 -programacion_oo
 
Poo Java
Poo JavaPoo Java
Poo Java
 
Capítulo 09 construcción de objetos
Capítulo 09 construcción de objetosCapítulo 09 construcción de objetos
Capítulo 09 construcción de objetos
 
Atributos
AtributosAtributos
Atributos
 
Introducción a Java Persistence API
Introducción a Java Persistence APIIntroducción a Java Persistence API
Introducción a Java Persistence API
 
Functional SE.pdf
Functional SE.pdfFunctional SE.pdf
Functional SE.pdf
 
Programación Orientada a Objetos
Programación Orientada a ObjetosProgramación Orientada a Objetos
Programación Orientada a Objetos
 
Informe Proyecto Poo
Informe Proyecto PooInforme Proyecto Poo
Informe Proyecto Poo
 
Informe Proyecto Poo
Informe Proyecto PooInforme Proyecto Poo
Informe Proyecto Poo
 
Java persistence
Java persistenceJava persistence
Java persistence
 
Retorno de valores
Retorno de valoresRetorno de valores
Retorno de valores
 
Guia poo
Guia pooGuia poo
Guia poo
 
Clase y Objeto de la POO
Clase y Objeto de la POOClase y Objeto de la POO
Clase y Objeto de la POO
 
UDA-Componentes RUP. Autocomplete
UDA-Componentes RUP. AutocompleteUDA-Componentes RUP. Autocomplete
UDA-Componentes RUP. Autocomplete
 
Zope Page Templates
Zope Page TemplatesZope Page Templates
Zope Page Templates
 
El Mal Odiado Javascript
El Mal Odiado JavascriptEl Mal Odiado Javascript
El Mal Odiado Javascript
 
Guia poo
Guia pooGuia poo
Guia poo
 
Unidad 3 CLASES, OBJETOS E INTSANCIAS
Unidad 3 CLASES, OBJETOS E INTSANCIASUnidad 3 CLASES, OBJETOS E INTSANCIAS
Unidad 3 CLASES, OBJETOS E INTSANCIAS
 

Más de RolitoChc1

Más de RolitoChc1 (9)

gestion de entrada y salida de los procesos de los sistemas operativos.ppt
gestion de entrada y salida de los procesos de los sistemas operativos.pptgestion de entrada y salida de los procesos de los sistemas operativos.ppt
gestion de entrada y salida de los procesos de los sistemas operativos.ppt
 
tema7: gestion de entrada y salida los procesos en los sistemas.ppt
tema7: gestion de entrada y salida los procesos en los sistemas.ppttema7: gestion de entrada y salida los procesos en los sistemas.ppt
tema7: gestion de entrada y salida los procesos en los sistemas.ppt
 
Curso de Fundeweb2 desde cero a experto con ejemplos.ppt
Curso de Fundeweb2 desde cero a experto con ejemplos.pptCurso de Fundeweb2 desde cero a experto con ejemplos.ppt
Curso de Fundeweb2 desde cero a experto con ejemplos.ppt
 
Curso Fundeweb2 para java desde cero a experto.ppt
Curso Fundeweb2 para java desde cero a experto.pptCurso Fundeweb2 para java desde cero a experto.ppt
Curso Fundeweb2 para java desde cero a experto.ppt
 
Tema II INTRODUCCION A LAS Maqunas Virtuales.ppt
Tema II INTRODUCCION A LAS Maqunas Virtuales.pptTema II INTRODUCCION A LAS Maqunas Virtuales.ppt
Tema II INTRODUCCION A LAS Maqunas Virtuales.ppt
 
05.-Primeros Pasos en JSXy ejercicios practicos paso a paso.pdf
05.-Primeros Pasos en JSXy ejercicios practicos paso a paso.pdf05.-Primeros Pasos en JSXy ejercicios practicos paso a paso.pdf
05.-Primeros Pasos en JSXy ejercicios practicos paso a paso.pdf
 
15.-Introducción a las props mas ejercicios.pdf
15.-Introducción a las props mas ejercicios.pdf15.-Introducción a las props mas ejercicios.pdf
15.-Introducción a las props mas ejercicios.pdf
 
21.-Efectos secundarios para el manejo de FSX.pdf
21.-Efectos secundarios para el manejo de FSX.pdf21.-Efectos secundarios para el manejo de FSX.pdf
21.-Efectos secundarios para el manejo de FSX.pdf
 
37.-Qué son los componentes de clase.pdf
37.-Qué son los componentes de clase.pdf37.-Qué son los componentes de clase.pdf
37.-Qué son los componentes de clase.pdf
 

Último

Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
patriciaines1993
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Fernando Solis
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
pvtablets2023
 

Último (20)

SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
 
semana 4 9NO Estudios sociales.pptxnnnn
semana 4  9NO Estudios sociales.pptxnnnnsemana 4  9NO Estudios sociales.pptxnnnn
semana 4 9NO Estudios sociales.pptxnnnn
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdf
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 

15.-Introducción a las props con FSX y ejercicios.pdf

  • 1. Introducción a las props 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; }
  • 2. 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.