SlideShare una empresa de Scribd logo
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

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
Andres Garcia Garcia
 
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
Francisco Javier Arce Anguiano
 
1 -programacion_oo
1  -programacion_oo1  -programacion_oo
1 -programacion_oo
Bernardo Cruz Martinez
 
Poo Java
Poo JavaPoo Java
Poo Java
eccutpl
 
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
Sergio Valenzuela Mayer
 
Atributos
AtributosAtributos
Atributos
kayrambal
 
Introducción a Java Persistence API
Introducción a Java Persistence APIIntroducción a Java Persistence API
Introducción a Java Persistence API
Jose Martinez
 
Functional SE.pdf
Functional SE.pdfFunctional SE.pdf
Functional SE.pdf
HenryHernandez683776
 
Programación Orientada a Objetos
Programación Orientada a ObjetosProgramación Orientada a Objetos
Programación Orientada a Objetos
Rolando Steep Quezada Martinez
 
Informe Proyecto Poo
Informe Proyecto PooInforme Proyecto Poo
Informe Proyecto Poo
Carlos David Calderon Espin
 
Informe Proyecto Poo
Informe Proyecto PooInforme Proyecto Poo
Informe Proyecto Poo
Carlos David Calderon Espin
 
Java persistence
Java persistenceJava persistence
Java persistence
cabraval
 
Retorno de valores
Retorno de valoresRetorno de valores
Guia poo
Guia pooGuia poo
Guia poo
Sergio Barbar
 
Clase y Objeto de la POO
Clase y Objeto de la POOClase y Objeto de la POO
Clase y Objeto de la POO
jvaldes9928
 
UDA-Componentes RUP. Autocomplete
UDA-Componentes RUP. AutocompleteUDA-Componentes RUP. Autocomplete
UDA-Componentes RUP. Autocomplete
Ander Martinez
 
Zope Page Templates
Zope Page TemplatesZope Page Templates
Zope Page Templates
CodeSyntax
 
El Mal Odiado Javascript
El Mal Odiado JavascriptEl Mal Odiado Javascript
El Mal Odiado Javascript
guest030dc2
 
Guia poo
Guia pooGuia poo
Guia poo
Sergio Barbar
 
Unidad 3 CLASES, OBJETOS E INTSANCIAS
Unidad 3 CLASES, OBJETOS E INTSANCIASUnidad 3 CLASES, OBJETOS E INTSANCIAS
Unidad 3 CLASES, OBJETOS E INTSANCIAS
Cindy Adriana Bohórquez Santana
 

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

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
RolitoChc1
 
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
RolitoChc1
 
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
RolitoChc1
 
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
RolitoChc1
 
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
RolitoChc1
 
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
RolitoChc1
 
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
RolitoChc1
 
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
RolitoChc1
 
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
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

Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
Juan Martín Martín
 
Lecciones 11 Esc. Sabática. El conflicto inminente docx
Lecciones 11 Esc. Sabática. El conflicto inminente docxLecciones 11 Esc. Sabática. El conflicto inminente docx
Lecciones 11 Esc. Sabática. El conflicto inminente docx
Alejandrino Halire Ccahuana
 
Sesión de clase: El conflicto inminente.
Sesión de clase: El conflicto inminente.Sesión de clase: El conflicto inminente.
Sesión de clase: El conflicto inminente.
https://gramadal.wordpress.com/
 
Clase Prensencial, Actividad 2.pdf.......
Clase Prensencial, Actividad 2.pdf.......Clase Prensencial, Actividad 2.pdf.......
Clase Prensencial, Actividad 2.pdf.......
LuanaJaime1
 
Módulo 1 de didactica de la lecto escritura
Módulo 1 de didactica de la lecto escrituraMódulo 1 de didactica de la lecto escritura
Módulo 1 de didactica de la lecto escritura
marilynfloresyomona1
 
Mundo ABC Examen 1 Grado- Tercer Trimestre.pdf
Mundo ABC Examen 1 Grado- Tercer Trimestre.pdfMundo ABC Examen 1 Grado- Tercer Trimestre.pdf
Mundo ABC Examen 1 Grado- Tercer Trimestre.pdf
ViriEsteva
 
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdfFEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
Jose Luis Jimenez Rodriguez
 
Mi Comunidad En El Sector Monterrey-Poste Blanco
Mi Comunidad En El Sector Monterrey-Poste BlancoMi Comunidad En El Sector Monterrey-Poste Blanco
Mi Comunidad En El Sector Monterrey-Poste Blanco
Ruth Noemí Soto Villegas
 
UrkuninaLab.pdfsadsadasddassadsadsadasdsad
UrkuninaLab.pdfsadsadasddassadsadsadasdsadUrkuninaLab.pdfsadsadasddassadsadsadasdsad
UrkuninaLab.pdfsadsadasddassadsadsadasdsad
JorgeVillota6
 
Camus, Albert - El Extranjero.pdf
Camus, Albert -        El Extranjero.pdfCamus, Albert -        El Extranjero.pdf
Camus, Albert - El Extranjero.pdf
AlexDeLonghi
 
Business Plan -rAIces - Agro Business Tech
Business Plan -rAIces - Agro Business TechBusiness Plan -rAIces - Agro Business Tech
Business Plan -rAIces - Agro Business Tech
johnyamg20
 
Evaluacion del tercer trimestre del 2023-2024
Evaluacion del tercer trimestre del 2023-2024Evaluacion del tercer trimestre del 2023-2024
Evaluacion del tercer trimestre del 2023-2024
israelsouza67
 
Evaluacion-Formativa-Nueva Escuela Mexicana NEM-ok.pdf
Evaluacion-Formativa-Nueva Escuela Mexicana NEM-ok.pdfEvaluacion-Formativa-Nueva Escuela Mexicana NEM-ok.pdf
Evaluacion-Formativa-Nueva Escuela Mexicana NEM-ok.pdf
EfranMartnez8
 
MATERIAL ESCOLAR 2024-2025 3 AÑOS CEIP SAN CRISTÓBAL
MATERIAL ESCOLAR 2024-2025 3 AÑOS CEIP SAN CRISTÓBALMATERIAL ESCOLAR 2024-2025 3 AÑOS CEIP SAN CRISTÓBAL
MATERIAL ESCOLAR 2024-2025 3 AÑOS CEIP SAN CRISTÓBAL
Ana Fernandez
 
Cronica-de-una-Muerte-Anunciada - Gabriel Garcia Marquez.pdf
Cronica-de-una-Muerte-Anunciada - Gabriel Garcia Marquez.pdfCronica-de-una-Muerte-Anunciada - Gabriel Garcia Marquez.pdf
Cronica-de-una-Muerte-Anunciada - Gabriel Garcia Marquez.pdf
RicardoValdiviaVega
 
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdfCarnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
EleNoguera
 
Manual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HCManual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HC
josseanlo1581
 
Los Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres VivosLos Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres Vivos
karlafreire0608
 
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZACORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
Sandra Mariela Ballón Aguedo
 

Último (20)

Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
 
Lecciones 11 Esc. Sabática. El conflicto inminente docx
Lecciones 11 Esc. Sabática. El conflicto inminente docxLecciones 11 Esc. Sabática. El conflicto inminente docx
Lecciones 11 Esc. Sabática. El conflicto inminente docx
 
Sesión de clase: El conflicto inminente.
Sesión de clase: El conflicto inminente.Sesión de clase: El conflicto inminente.
Sesión de clase: El conflicto inminente.
 
Clase Prensencial, Actividad 2.pdf.......
Clase Prensencial, Actividad 2.pdf.......Clase Prensencial, Actividad 2.pdf.......
Clase Prensencial, Actividad 2.pdf.......
 
Módulo 1 de didactica de la lecto escritura
Módulo 1 de didactica de la lecto escrituraMódulo 1 de didactica de la lecto escritura
Módulo 1 de didactica de la lecto escritura
 
Mundo ABC Examen 1 Grado- Tercer Trimestre.pdf
Mundo ABC Examen 1 Grado- Tercer Trimestre.pdfMundo ABC Examen 1 Grado- Tercer Trimestre.pdf
Mundo ABC Examen 1 Grado- Tercer Trimestre.pdf
 
A VISITA DO SENHOR BISPO .
A VISITA DO SENHOR BISPO                .A VISITA DO SENHOR BISPO                .
A VISITA DO SENHOR BISPO .
 
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdfFEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
 
Mi Comunidad En El Sector Monterrey-Poste Blanco
Mi Comunidad En El Sector Monterrey-Poste BlancoMi Comunidad En El Sector Monterrey-Poste Blanco
Mi Comunidad En El Sector Monterrey-Poste Blanco
 
UrkuninaLab.pdfsadsadasddassadsadsadasdsad
UrkuninaLab.pdfsadsadasddassadsadsadasdsadUrkuninaLab.pdfsadsadasddassadsadsadasdsad
UrkuninaLab.pdfsadsadasddassadsadsadasdsad
 
Camus, Albert - El Extranjero.pdf
Camus, Albert -        El Extranjero.pdfCamus, Albert -        El Extranjero.pdf
Camus, Albert - El Extranjero.pdf
 
Business Plan -rAIces - Agro Business Tech
Business Plan -rAIces - Agro Business TechBusiness Plan -rAIces - Agro Business Tech
Business Plan -rAIces - Agro Business Tech
 
Evaluacion del tercer trimestre del 2023-2024
Evaluacion del tercer trimestre del 2023-2024Evaluacion del tercer trimestre del 2023-2024
Evaluacion del tercer trimestre del 2023-2024
 
Evaluacion-Formativa-Nueva Escuela Mexicana NEM-ok.pdf
Evaluacion-Formativa-Nueva Escuela Mexicana NEM-ok.pdfEvaluacion-Formativa-Nueva Escuela Mexicana NEM-ok.pdf
Evaluacion-Formativa-Nueva Escuela Mexicana NEM-ok.pdf
 
MATERIAL ESCOLAR 2024-2025 3 AÑOS CEIP SAN CRISTÓBAL
MATERIAL ESCOLAR 2024-2025 3 AÑOS CEIP SAN CRISTÓBALMATERIAL ESCOLAR 2024-2025 3 AÑOS CEIP SAN CRISTÓBAL
MATERIAL ESCOLAR 2024-2025 3 AÑOS CEIP SAN CRISTÓBAL
 
Cronica-de-una-Muerte-Anunciada - Gabriel Garcia Marquez.pdf
Cronica-de-una-Muerte-Anunciada - Gabriel Garcia Marquez.pdfCronica-de-una-Muerte-Anunciada - Gabriel Garcia Marquez.pdf
Cronica-de-una-Muerte-Anunciada - Gabriel Garcia Marquez.pdf
 
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdfCarnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
 
Manual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HCManual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HC
 
Los Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres VivosLos Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres Vivos
 
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZACORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
 

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.