¿Cómo se comunican los componentes? Props y atributos

Resumen

¿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:

<TodoCounter completed={16} total={25} />

Aquí, TodoCounter recibe dos props: completed y total. Estas se accesan en el componente mediante la destructuración:

const TodoCounter = ({ 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:

<TodoCounter completed={8} total={10} />
<TodoCounter completed={3} total={5} />

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:

const TodoList = ({ 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í:

return (
  <React.Fragment>
    <Header />
    <MainContent />
    <Footer />
  </React.Fragment>
);

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) => (
  <TodoItem key={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!

Sebastián Esteban López Moran

student•

Cuando se utiliza:

<React.Fragment></React.Fragment>

Es necesario importar, para que funcione:

import React from 'react';

Pablo Fernando Arango Ríos

student•

Me salvaste de ir a buscar respuesta en otro lado, no me funcionaba pero tu sugerencia lo arregló! 10 de 10.

Juan Marcelo Arteaga Gutierrez Marcelo Arteaga Gutierrez

student•

me gusta mas <></>

Jonathan Guidi

student•

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()

Angel Matias Rodriguez

student•

Buen resumen de la clase, se agradece

Julio Peña

student•

El mejor resumen de esta clase que he leído hasta ahora 👍

Jose Alejandro Boscan Nava

student•

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.

José Fabián Beltrán Meza

student•

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.

function TodoItem({text, completed}) {
 
    return (
        <li className="TodoItem">
            <span>✔</span>
            <p>{text}</p>
            <span>⚔</span>
        </li>
    );
}

Angel Matias Rodriguez

student•

idem

Joel Angel David Barrantes Palacios

student•

desde mi punto de vista es menos legible en otras propiedades

Dave Juanes

student•

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:

<TodoList>
  {defaultTodos.map(todo => (
    <TodoItem
      key={todo.text}
      text={todo.text}
      completed={todo.completed}
    />
  ))}
</TodoList>

Ahora en TodoItem iremos definiendo las props que necesitaremos (en mi caso tuve que destructurarlas por unos errores que me mostraban las devtools):

function TodoItem({text, completed}) {
  return (
    <li>
      <span>V {completed}</span>
      <p>{text}</p>
      <span>X</span>
    </li>
  );
}

RICHARD FLORES

student•

Porque también en mi Caso no pude hacerlo como esta marcado en el video lo tuve que hacer como tu por errores que me marcaba el navegador

Eduardo Antonio Hidalgo García

student•

Aquí mi componente de las tareas , lo hice un poco diferente al profesor utilizando solo un span y condicionando si la tarea esta completada o no.

import React from 'react'

export const ListItem = ({task,checked}) => {
  return (
    <>
    <span>{checked? '✔': 'X'}</span>
    <p>{task}</p>
    </>
  )
}

ALINA BONILLA PAREDES

student•

Bueniiiisima forma de mostrar el completed, yo hice lo mismo

FELIPE CESAR paez ILLERA

student•

De los mejores profes de platzi!

Ulises Guarneros

student•

Hostia Juan, me encanta tu forma de explicar descomponiendo poco a poco cada definición para no saturarnos de info. n.n

Juan Sifontez

student•

Una forma de utilizar React.Fragment sin tener que importarlo. Es utilizando su shorcut de un tag vacío: <> ... </>.

Sino las formas de utilizar Fragment serian:

Import React from 'react';

...
<React.Fragment>
</React.Fragment>
...

import { Fragment } from 'react';

...
<Fragment>
</Fragment>
...

Eduardo Zegers

student•

realmente felicitaciones por la nueva forma de mostrar los cursos

Diego Cáceres Cardoza

student•

Para los que esten acostumbrados a usar:

items.map(item => {
  // codigo
})

Y les de el error de "array.prototype.map() expects a return value from arrow function", se soluciona con:

items.map(item => (
  // codigo
))

Fernando Francisco López Mauro

student•

Sip, es que al usar () hacemos el return implicito, pero de igual manera podemos utilizar llaves y hacer un return explicito:

{
defaultTodos.map(({text}) => {
		return(
			<TodoItem text={text} />
		)}
	)
}

Benji Uribe

student•

Gracias!

César Pedetta

student•

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:

function App() {
  return (
    <>
	//... todos los componentes que vayamos a encapsular dentro del componente App()
    </>

kenry paredes

student•

a alguien mas le pasa que cuando compila sale esto webpack compiled successfully pero en el navegador sale en blanco

Marcelo Vinicio Chavarría Ugalde

student•

El mío sale así, sin embargo todo funciona bien. Manda foto a ver o no se si ya lo solucionaste xd jajajaj

Marlon jhesid Miranda contreras

student•

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.

Mauricio Combariza

student•

Me gusta su forma de programar, es bastante logica !!

Sebastian Hugo Sanchez

student•

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?

Juan Castro

teacher•

Te falta importar React al inicio del archivo: import React from 'react'

Valeria Alcalá Guillén

student•

Necesitas colocar la siguiente linea de codigo junto con los imports:

import React from 'react';

Jorge Enríquez

student•

A la hora de renderizar múltiples elementos dentro de uno sólo, ¿hay alguna diferencia entre hacerlo con etiquetas

<React.Fragment>

o con

<></>

Juan Castro

teacher•

Son lo mismo. La segunda solo es syntax sugar de la primera. :D

Jorge Enríquez

student•

Me lo imaginaba, gracias por confirmarlo :)

Héctor Galindo

student•

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

function App() {
	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>
	);
}

Juan Omar Palma álvarez

student•

una forma mas cómoda de exportar los componentes es

export function CreateTodoButton() {
    return (
        <button>Agregar Todo</button>
    );
}

Joseph Vallejo

student•

a mi personalmente me gusta hacer un destructuring

function TodoCounter(props) {
  const {total, completed} = props
  return (
      <h2>
        Has creado {completed} de {total} TODOs
      </h2>
  )
}

Alicia Rivas

student•

!Lo mismos pasos y un poco diferente [](