Cursos Empresas Blog Live Conf Precios

Props: Comunicación entre Componentes

Clase 5 de 29 • Curso Práctico de React JS 2019

Clase anteriorSiguiente clase

Resumen

Las Props son la forma de enviar y recibir información en nuestros componentes. Son la forma de comunicar cada componente con el resto de la aplicación. Son muy parecidas a los parámetros y argumentos de las funciones en cualquier lenguaje de programación.

// Button.jsx
import React from 'react';

const Button = props => {
  return (
	<div>
	  <button type="button">{props.text}button>
	div>
  );
};

export default Button;

// index.jsx
import React from 'react';
import Button from './components/Button';

ReactDOM.render(
  <Button text="¡Hola!" />,
  document.getElementByid('root'),
);

Luis Rodriguez

student•

En VSC, deberían de poder agregar fácilmente constantes y el "import React from 'react'" simplemente escribiendo "rfc" ... o "rafc" para un "react arrow functional component" ...

espero les ayude!

Juan Jose Rojas Rojas

student•

Uso un plugin muy similar pero para WebStorm. Es bastante útil.

Juan Jose Vega

student•

@iamluisro qué extensión usas? No me funciona :(

Seba Cardoso

student•

Para complementar pueden hacer esto: En index.js

const texts = {
  text: 'Click',
  text2: 'Click2',
  text3: 'Click3'
}
ReactDOM.render(<Button {...texts} />, document.getElementById('root'));

En Button.jsx

const Button = props => {
  const { text, text2, text3 } = props
  return (
    <div>
      <button type="button">{text}</button>
      <button type="button">{text2}</button>
      <button type="button">{text3}</button>
    </div>
  )
}

Oscar Barajas Tavares

Team Platzi•

Un buen ejemplo, de cómo podemos pasar los props en los niveles que necesitemos y de una forma más entendible y amigable.

Gracias por compartirlo.

Christian Armando Consuelo Mayén

student•

Se ve bien. Pero en las últimas versiones de Eslint no recomienda el uso del "spread operator". Puede ayudar a mandar muchas props al mismo tiempo, pero también puede que pierdas la cantidad de datos que envías y puede resultar confuso para alguien que trate de extender el código del componente hijo saber cuáles pros son útiles y cuáles no.

Filiberto Santillán

student•

Para entender mejor la desestructuración:

Más a detalle: https://github.com/FiliSantillan/Bits/blob/master/BitSnack/Destructuring/destructuring.md

Bernardo Aguayo Ortega

student•

I like it very much!, thanks!

Moisés Abraham Croes Gómez

student•

Gracias por el aporte ;) te quedó genial

David Behar

student•

Props

Las props son la forma de enviar y recibir información en nuestros componentes, se podría decir que son los 'argumentos' que reciben un componente y se escriben como los atributos de html.

&lt;Componente atributo=&quot;valor&quot; /&gt;

. Estos props salen de los argumentos de nuestros componentes funcionales o de una variable de clase dentro de this.props y los valores son asignados directamente en el ReactDOM.render().

const ComponenteFuncional = (props) =&gt; { // &lt;-- Las props son el único argumento que recibe nuestra función
	...
}

class ComponenteClase extends React.Component {
	const {
		children,
		...
	} = this.props; // &lt;-- Una prop se llama con this.props
	...
}

Algunos atributos de html que funcionan como props serían por ejemplo: src, href, class, id, en React éstos pasan a ser props que pueden ser manejadas dentro de javascript tal cual como argumentos, por ejemplo podríamos hacer lo siguiente: .

const Padre = () =&gt; (&lt;Link to=&quot;/home&quot; /&gt;);
const Link = (props)=&gt;{
	return &lt;a href={props.to}&gt;{props.children}&gt;&lt;/a&gt;
}

. En el ejemplo anterior manejamos una prop nativa de React que son los children, mismos que serían los hijos de nuestro componente, osea todo lo que está dentro del componente <Componente> hijos </Componente> . Cuando creamos un componente propio en React, no se manejan los childrens, pero cuando creamos elementos de html, éstos se manejan tal cual como funciona html, así que es completamente posible que un componente que creemos y le pongamos hijos no renderice ninguno de éstos. . Lectura, escritura, reactividad, no reactividad de props . React es bastante flexible pero no permite a los componentes modificar sus propias props, pero sí se lo permite al componente padre.

const Componente = (props)=&gt;{
	// props.name = `${props.name} el mejor` // No hacer ésto
	name = `${props.name} el mejor`
	return (
		&lt;div&gt;
			{name}
		&lt;/div&gt;
	)
}

. Que un componente padre pueda modificar las props de sus hijos, pero éstos no puedan es lo correcto, porque las props son la manera de comunicación entre el componente padre y sus hijos y si se pudieran modificar no sabríamos quien generó este mensaje, generando un problema de reactividad por la propagación de los cambios.

const Padre = () =&gt; {
	const droidName = `C${Math.random()*100}`PO;
	const changeName=()=&gt;{...} // de alguna manera cambiar el nombre del hijo
	return (
		&lt;Hijo onClick={changeName} nombre={droidName} /&gt;
	)
}

. Podríamos decir que un componente sin estado (stateless) funciona como una función puras, ya que siempre regresará algo, pero ésto no se modificará a menos que se modifiquen los argumentos. . Tales funciones son llamadas por que no tratan de cambiar sus entradas, y siempre devuelven el mismo resultado para las mismas entradas.

Cesar Augusto Barco de Gouveia

student•

Acá está la recolección de notas e información conseguida en Internet para complementar este curso.

Si ayudas a agregar información o investigación extra estaría genial.

Componentes y propiedades

Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.Esta página proporciona una introducción a la idea de los componentes. Puedes encontrar una API detallada sobre componentes aquí.

Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas “props”) y devuelven a React elementos que describen lo que debe aparecer en la pantalla.

Componentes funcionales y de clase

La forma más sencilla de definir un componente es escribir una función de JavaScript:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Esta función es un componente de React válido porque acepta un solo argumento de objeto “props” (que proviene de propiedades) con datos y devuelve un elemento de React. Llamamos a dichos componentes “funcionales” porque literalmente son funciones JavaScript.

También puedes utilizar una clase de ES6 para definir un componente:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Los dos componentes anteriores son equivalentes desde el punto de vista de React.

Las clases tienen algunas características adicionales que veremos en las próximas secciones. Hasta entonces, usaremos componentes funcionales por su brevedad.

Renderizando un componente

Anteriormente, sólo encontramos elementos de React que representan las etiquetas del DOM:

const element = <div />;

Sin embargo, los elementos también pueden representar componentes definidos por el usuario:

const element = <Welcome name="Sara" />;

Cuando React ve un elemento representando un componente definido por el usuario, pasa atributos JSX a este componente como un solo objeto. Llamamos a este objeto “props”.

Por ejemplo, este código muestra “Hello, Sara” en la página:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Pruébalo en CodePen

Recapitulemos lo que sucede en este ejemplo:

Llamamos a ReactDOM.render() con el elemento <Welcome name="Sara" />.
React llama al componente Welcome con {name: 'Sara'} como “props”.
Nuestro componente Welcome devuelve un elemento <h1>Hello, Sara</h1> como resultado.
React DOM actualiza eficientemente el DOM para que coincida con <h1>Hello, Sara</h1>.

Nota: Comienza siempre los nombres de componentes con una letra mayúscula.

React trata los componentes que empiezan con letras minúsculas como etiquetas del DOM. Por ejemplo, <div /> representa una etiqueta div HTML pero <Welcome /> representa un componente y requiere que Welcome esté definido.

Para saber más sobre el razonamiento detrás de esta convención, puedes consultar JSX en profundidad.

Composición de componentes

Los componentes pueden referirse a otros componentes en su salida. Esto nos permite utilizar la misma abstracción de componente para cualquier nivel de detalle. Un botón, un cuadro de diálogo, un formulario, una pantalla: en aplicaciones de React, todos son expresados comúnmente como componentes.

Por ejemplo, podemos crear un componente App que renderiza Welcome muchas veces:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Pruébalo en CodePen

Por lo general, las aplicaciones de React nuevas tienen un único componente App en lo más alto. Sin embargo, si se integra React en una aplicación existente, se podría empezar de abajo hacia arriba con un pequeño componente como Button y poco a poco trabajar el camino a la cima de la jerarquía de la vista.

Extracción de componentes

No tengas miedo de dividir los componentes en otros más pequeños.

Por ejemplo, considera este componente Comment:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

Pruébalo en CodePen

Acepta author (un objeto), text (un string), y date (una fecha) como props, y describe un comentario en una web de redes sociales.

Este componente puede ser difícil de cambiar debido a todo el anidamiento, y también es difícil reutilizar partes individuales de él. Vamos a extraer algunos componentes del mismo.

Primero, vamos a extraer Avatar:

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

El Avatar no necesita saber que está siendo renderizado dentro de un Comment. Esto es por lo que le dimos a su propiedad un nombre más genérico: user en vez de author.

Recomendamos nombrar las props desde el punto de vista del componente, en vez de la del contexto en el que se va a utilizar.

Ahora podemos simplificar Comment un poquito:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

A continuacion, vamos a extraer un componente UserInfo que renderiza un Avatar al lado del nombre del usuario:

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

Esto nos permite simplificar Comment aun más:

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

Pruébalo en CodePen

Extraer componentes puede parecer un trabajo pesado al principio, pero tener una paleta de componentes reutilizables vale la pena en aplicaciones más grandes. Una buena regla en general es que si una parte de su interfaz de usuario se usa varias veces (Button, Panel, Avatar), o es lo suficientemente compleja por sí misma (App, FeedStory, Comment), es buen candidato para ser un componente reutilizable.

Las props son de solo lectura

Ya sea que declares un componente como una función o como una clase, este nunca debe modificar sus props. Considera esta función sum :

function sum(a, b) {
  return a + b;
}

Tales funciones son llamadas “puras” por que no tratan de cambiar sus entradas, y siempre devuelven el mismo resultado para las mismas entradas.

En contraste, esta función es impura por que cambia su propia entrada:

function withdraw(account, amount) {
  account.total -= amount;
}

React es bastante flexible pero tiene una sola regla estricta:

Todos los componentes de React deben actuar como funciones puras con respecto a sus props.

Bernardo Aguayo Ortega

student•

thanks bro!

Samuel Miranda Martínez

student•

Por cosas de la vida no me funcionó

  const { text } = props.text;

Pero si

  const text = props.text;

Esto es porque le estaba pasando solo un parámetro?

Francisco Ponce

student•

Hola Sam,

Me parece que estas destructurando de una manera errónea

Podrías intentar

const { text } = props

Samuel Miranda Martínez

student•

OMG!

Muchas gracias Francisco, falle en entender el concepto de la destructuración.

Jhon Carlos Colorado Angulo

student•

Props: Podemos pasar propiedades a nuestros componentes. No importa si es de tipo clase o presentacional. Estas propiedades son solo de lectura. Ahora si se quiere modificar se deben instanciar en una nueva variable.

Wladimir Rocha

student•

Todos los componentes reciben o envían argumentos o propiedades que pueden ser posteriormente usados. En el caso del que reciben se declara de la siguiente forma:

import React from 'react'
const  Button = props =>{
	return(
		<div>
			<button> type='button'> {props.text}</button>
		<div>
	)
};
export default Button;

otra forma de hacer esto último con destructuring

import React from 'react'
const  Button = props =>{
	const = { text } = props;
	return(
		<div>
			<button> type='button'> { text }</button>
		<div>
	)
};
export default Button;

Donde vas a importar el componente en el render solo llamas al componentes colocas el nombre de la propiedad y la igualas al texto u objeto de propiedades que deseas

<button text='Dame Click!'

Ricardo Lugo Recillas

student•

Las Props son la forma de enviar y recibir información entre componentes, es la forma de comunicacion de cada componente con toda la aplicacion

import React from 'react';

const Button = props => {
    const {texto} = props;
    return (
        <div>
            <button type="button">{ props.texto }</button>
            <button type="button">{ texto }</button>
        </div>
    )
};
export default Button;

Manuel Rivera

student•

También lo podemos hacer directamente

const example = ({ text, text1, text2 }) =&gt; {
  return (
    &lt;div&gt;
      &lt;h1&gt;{text} &lt;/h1&gt;
      &lt;p&gt;{text2} &lt;/p&gt;
      &lt;button&gt; {text1} &lt;/button&gt;
    &lt;/div&gt;
  );
};

export default example;```

Julián Ernesto Cuervo León

student•

Alguien sabe por qué los cambios que hago no se muestran automáticamente en la pagina, los guardo, pero tengo que volver a correr npm run start para que aparezcan

Juan Castro

teacher•

Hola. La respuesta la encuentras en esta otra pregunta que hiciste: https://platzi.com/comentario/778811/.

Evita repetidos. Así no hay que contestarte dos veces. :wink:

Oscar Román

student•

Pero que Profesor más amargo el que respondió, bastaba con decirle donde se encontraba la respuesta.

Joel alexander

student•

porqué el return va como return (), porqué entra paréntesis??

Martín David Roldán

student•

Hola! :D

En las funciones flecha (arrow functions) el return se puede volver implícito si no se agrega los corchetes. Lo ejemplifico con código.

En este primer ejemplo, se colocan los corchetes y dentro el código. Si quieres retornar algo debes agregar el return.

const funcion1 = () => {
	// ... Code
}

En este caso, si el código es corto o solo si fuese para retornar algo simple, se puede escribir en la misma línea, sin colocar los corchetes. Por defecto va a retornar el código de manera automática.

const funcion2 = () => // ... Code

En este ultimo ejemplo es casi idéntico al anterior solo con la diferencia de que tu código sera mucho mas grande y abarcada más líneas. Declaras la función, y le colocas los paréntesis para hacer el return de manera implícita. Es el mismo ejemplo que se esta utilizando en el curso.

const funcion3 = () => ( 

)

Oscar Armando Del Angel Casillas

student•

para que se nombra una constante con llaves??

const { text } = props;```

Cristian Andres Bustos Ayala

student•

Porque esta trayendo los elementos necesarios, template literals es el nobre que se le da, tambien es una manera de escribir mas variables o lementos en una sola linea {var1, var2, etc..}

René Sanchez

student•

Esto se le llama destructuracion de objetos en javascript, un ejemplo de para que sirve esto es para declarar las variables y sacar lo necesario que vas a utilizar como bien indica @andresayala

EJ:

const persona = {
	name: 'Rene',
	edad: 20
};

const { name } = persona;
console.log(name); // Rene

//Esto es igual a la manera tradicional 
const name_dos = persona.name;
console.log(name_dos); // Rene

Jhonatan David Ibarra Lavado

student•

buen ala verdad me perdí un poco entre jsx y js

Gabriel De Andrade

student•

Hola! No te preocupes demasiado por las extensiones de los archivos, lo que tienes que tener en cuenta es que jsx es una forma de escribir un lenguaje muy parecido a HTML pero dentro de JS. Quizás en esta clase lo entiendas mejor JSX :D

Karen Paola Diaz Duarte

student•

Genial!!

Wilson Delgado

student•

++Documentación para **desestructuración **de objetos++ https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment

Juan Esteban Mejia Ortiz

student•

Este profesor es excelente, directo al grano

Andrés Felipe Eslava Zuluaga

student•

Repasando 3.0

Jair Neri

student•

Llevo pocas clases, pero es muy sencillo, creo que incluso que las explicaciones de los cursos de Fundamentos de Js , y jQuery a Js. Son mas profundos pero me costaba mas trabajo

Brayhan Andres Jaramillo Castaño

student•

Muy buena explición