¿Cómo utilizar las props para comunicar componentes en React?
En el desarrollo de aplicaciones, es común que los componentes necesiten comunicarse y compartir información. React nos ofrece una solución simple y efectiva para lograrlo, denominada "props". Este recurso permite que los componentes presenten datos dinámicos, en lugar de contenido estático o "hardcoded". Pero, ¿cómo funcionan exactamente y cómo las implementamos?
¿Qué son las props y cómo se implementan?
Las props (propiedades) son similares a los parámetros en funciones, pero aplicadas a componentes. Se envían como atributos en el JSX:
<TodoCountercompleted={16}total={25}/>
Aquí, TodoCounter recibe dos props: completed y total. Estas se accesan en el componente mediante la destructuración:
constTodoCounter=({ completed, total })=>(<h1>Has completado {completed} de {total} todos</h1>);
¿Cómo se utilizan las props para incrementar la reutilización?
Un componente que acepta props se vuelve más reutilizable, ya que se adapta a distintos datos sin modificar su estructura base:
Con esto, un mismo componente es capaz de mostrar diferentes resultados de acuerdo a las props que recibe.
¿Qué es la prop children y cómo se usa?
La prop children es una propiedad especial que automáticamente encapsula todo lo que está entre las etiquetas de apertura y cierre de un componente:
<TodoList><TodoItem.../><TodoItem.../></TodoList>
React convierte automáticamente el contenido en la prop children, que podemos utilizar dentro de nuestro componente:
constTodoList=({ children })=>(<ul>{children}</ul>);
React Fragments: ¿Cómo evitar elementos innecesarios?
React Fragments (<React.Fragment>) permiten retornar múltiples elementos sin producir nodos extra en el DOM. Es útil para no llenar nuestro HTML de div innecesarios y puede verse así:
De este modo, se mantiene una estructura limpia y clara en el DOM.
Renderización de arrays y property key
Cuando trabajamos con listas, es esencial proporcionar una prop key única para cada elemento. Esto facilita la eficiencia y orden del sistema de renderizado de React:
const todos = defaultTodos.map((todo, index)=>(<TodoItemkey={index}text={todo.text}completed={todo.completed}/>));
Aquí, nos aseguramos de que cada TodoItem tenga una key única, usando un índice o algún identificador único relevante.
¿Por qué es necesaria la key?
La key ayuda a React a identificar qué elementos han cambiado, añadido o eliminado. Esto optimiza la actualización de listas y es una práctica recomendada para evitar advertencias en la consola y mejorar el rendimiento de la aplicación.
Convertir información estática en dinámica con props
Las props transforman componentes con datos estáticos en entidades dinámicas y personalizables. Este uso, combinado con herramientas como React Fragments y la renderización mediante arrays, proporciona un marco flexible y poderoso para el desarrollo de aplicaciones React. Con práctica, podrás crear interfaces de usuarios dinámicas y eficientes.
¿Qué sigue después de manejar las props?
Una vez dominadas las props, el siguiente paso es personalizar el aspecto de tu aplicación con CSS. Aprende a combinar React y estilos CSS para llevar tus interfaces cerca del diseño original. ¡Continúa explorando y prueba nuevas técnicas para enriquecer tus habilidades en React!
Me salvaste de ir a buscar respuesta en otro lado, no me funcionaba pero tu sugerencia lo arregló! 10 de 10.
me gusta mas <></>
Componentes => Reciben Propiedades.
Elementos => Reciben Atributos.
...
Hay que tener en cuenta que en JSX, la sintaxis entre atributos y propiedades es muy parecida, ya que escribimos el valor de las props en los componentes como si fueran atributos, pero estos no lo son..
...
Las props son variables que declaramos en nuestro componente como si fueran parámetros de una función, podemos declarar una unica (Prop) o declarar varias Props utilizando la {Desestructuración}.
Para luego posteriormente darles un valor como si fueran argumentos, pero utilizando otro tipo de sintaxis, que es muy parecida a la de los atributos de los elementos HTML, con la diferencia que el otorgamos el valor entre {llaves}.
...
En cuanto a la propiedad "props.children" esta hace referencia a que React transforma automáticamente a todo lo que se encuentre dentro del componente padre en un elemento "children" , es decir todo lo que se encuentre dentro de una etiqueta de apertura <Component> y una etiqueta de cierre </Component> para React será "Children".
..
Por otro lado existe <React.Fragment> o su sintaxis más corta " <> </> " que es un contenedor invisible que tiene como objetivo envolver todos los componentes JSX dentro de un contenedor padre, esto es debido a que React necesita envolver esos componentes para renderizarlos, y asi no crear nodos innecesarios en el DOM.
..
Por ultimo, debemos tener en cuenta que podemos renderizar elementos a través de un Array, utilizando en este caso el metodo .map(), y devolviendo el componente "TodoItem" por cada uno de los objetos del array..
Es necesario que le pasemos las props "key={todo.text} text={todo.text}" al componente para que nos muestre un contenido distinto por cada objeto de este array.
..
La prop "Key" funciona como un Identificador para objeto del array y es necesaria cuando utilizamos el metodo .map()
Buen resumen de la clase, se agradece
El mejor resumen de esta clase que he leído hasta ahora 👍
Juan normalmente me gustan tus clases con tus ocurrencias mantienes el interés en los alumnos pero esta vez déjame quitarme el sombrero no se si todo en si fue obra tuya pero quisiera aprovechar de agradecer a todo el equipo de Platzi por este curso es espectacular ojala sigan actualizando los curso y le den este mismo formato.
Algo que personalmente me ha gustado es destructurar las props y a que evitan el estar repitiendo el props.text y hacen que el código sea más legible.
desde mi punto de vista es menos legible en otras propiedades
Clase 4 Como se comunican los componentes? Props y atributos
Nuestro componente TodoCounter recibira 2 propiedades destructuras total, completed, modificamos el componente de manera de el texto hardcodeado quede asi {completed} y {total} para hacer dinamico nuestro componente.
Ahora dentro del componente App.js donde invocamos al componente TodoCounter lo definimos: <TodoCounter completed={16} total={25}/>.
Estos cambios podemos verlos con las devtools del navegador ya que las props no se muestran como atributos en el HTML.
Propiedad Children
React automaticamente define como elementos hijo a los componentes y/o elementos que estan dentro de dos etiquedas jsx.
React.Fragment
Por defecto todo componente require ser exportado a un solo objeto, por esto es que los componentes deben estar encapsulados en una etiqueta:
<React.Fragment>.........</React.Fragment>
Envio de arrays
Para poder enviar array definimos:
const defaultTodos =[{text:'Diseño de proyecto',completed:false},{text:'Diseño de Base de datos',completed:false},{text:'Recopilación de requerimientos',completed:false},{text:'Desarrollo',completed:false},{text:'Implementación',completed:false},]
Y luego dentro de nuestro componente App vamos definiendo las props que necesitaremos ver con TodoItem:
realmente felicitaciones por la nueva forma de mostrar los cursos
Con las nuevas versiones de React ya no es necesario nombrar el componente <React.Fragment> para encapsular el resto de componentes que necesitemos, En su lugar simplemente podemos crear un 'elemento vacío' para encapsular el resto de compomentes de la siguiente manera:
functionApp(){return(<>//... todos los componentes que vayamos a encapsular dentro del componente App()</>
a alguien mas le pasa que cuando compila sale esto
webpack compiled successfully
pero en el navegador sale en blanco
El mío sale así, sin embargo todo funciona bien. Manda foto a ver o no se si ya lo solucionaste xd jajajaj
hi!, no se si ya lo solucionaste espero que si porque fue hace un tiempo moderado, para los que están empezando como yo, entiendo que se debe a que instalamos las versiones mas actualizadas de node, npm y nvm, causando que se creen vulnerabilidades en varias dependencias, lo probé en otro pc solo instalando lo necesario y me esta corriendo adecuadamente.
Me gusta su forma de programar, es bastante logica !!
Mis notas📝
Hola! Cuando cambio el div App por React.Fragment eslint me devuelve un error de 'React is not defined' en la linea de la imagen
¿Qué estoy haciendo mal?
Te falta importar React al inicio del archivo: import React from 'react'
Necesitas colocar la siguiente linea de codigo junto con los imports:
import React from 'react';
A la hora de renderizar múltiples elementos dentro de uno sólo, ¿hay alguna diferencia entre hacerlo con etiquetas
<React.Fragment>
o con
<></>
?
Son lo mismo. La segunda solo es syntax sugar de la primera. :D
Me lo imaginaba, gracias por confirmarlo :)
Como yo entendí los props
.
Los React Props son la forma en la que se mandan propiedades (valores) a los elementos dentro de un componente, para que de esta forma el mismo sea interactivo y podamos interactuar para cambiar algún valor por medio de eventos en el DOM u otro método.
.
Para pasarle un prop a un componente hacemos lo siguiente, por ejemplo;
Tengo un componente título que lleva la cuenta de cuántas tareas se han cumplido, esto hace parte de una aplicación de TO-DO. Como parámetro le estamos pasando un objeto en el que usamos la desestructuración, esto para traer las propiedades específicas que necesita el componente. Luego del primer ejemplo muestro cómo quedaría si usamos el parámetro “props”
// Esta sintaxis solo trae los props que necesitamos por medio de
// desestructuración.
function TodoTitle({ total, completed }) {
return (
<h2>
Has completado {completed} de {total} TO-DOs
</h2>
)
}
// Esta sintaxis nos trae todos los props que le pasemos al elemento
// del componente padre, pero tendremos que escribir "más código"
function TodoTitle(props) {
return (
<h2>
Has completado {props.completed} de {props.total} TO-DOs
</h2>
)
}
En el componente App, vamos al elemento que queremos pasarle los props, en este caso el elemento TodoTitle
functionApp(){return(<React.Fragment>// Acá le definimos al elemento las siguientes propiedades:<TodoTitle completed={16} total={25}/>// Estas propiedades serán los argumentos que reciba el componente// TodoTitle<TodoSearch/><TodoList><TodoItem/><TodoItem/><TodoItem/></TodoList><CreateTodoButton/></React.Fragment>);}
una forma mas cómoda de exportar los componentes es
