Props

Clase 12 de 37 • Curso de React.js 2019

Resumen

Los props que es la forma corta de properties son argumentos de una función y en este caso serán los atributos de nuestro componente como class, src, etc.

Estos props salen de una variable de la clase que se llama this.props y los valores son asignados directamente en el ReactDOM.render().

Leandro Videla

student•

Para no escribir tantas veces "this.props...":

class Badge extends React.Component {
  render() {
    const {
	firstName,
	lastName,
	avatarUrl,
	jobTitle,
	twitter
    } = this.props;
    return (
      <div className="Badge">
        <div className="Badge__header">
          <img src={confLogo} alt="Logo de la conferencia" />
        </div>

        <div className="Badge__section-name">
          <img
            className="Badge__avatar"
            src={avatarUrl}
            alt="Avatar"
          />
          <h1>
            {firstName} <br /> {lastName}
          </h1>
        </div>

        <div className="Badge__section-info">
          <h3>{jobTitle}</h3>
          <div>@{twitter}</div>
        </div>

        <div className="Badge__footer">#platziconf</div>
      </div>
    );
  }
}

Julian Andres Cañaveral Valencia

student•

Es buena idea, eso se llama destructuring

Wilson Alejandro Gonzalez Gaitan

student•

Me gusta esta forma es como un constructor con referencia de this

Aseret Jimenez

student•

Lo que se conoce como atributos en HTML, se llama propiedades en JSX. Los atributos son los que ayudan a personalizar las etiquetas HMTL mediante cierta información adicional llamada atributo, existen diferentes tipos de atributos, como lo son:

Atributos básicos: Se pueden utilizar prácticamente en todas las etiquetas HTML. Los atributos básicos son: id, class, style y title.
Atributos para internacionalización: Son utilizados por las paginas que muestran su contenido en varios idiomas. lang, xml:lang y dir.
Atributos de eventos: Sólo se utilizan en las paginas web dinamicas en donde su hace uso de JavaScript. Algunos de estos atributos son: onchange, onclick, onfocus, onkeypress.
Atributos de focos: Relacionado principalmente con la accecibilidad de los sitios web, estoso son: accesskey, tabindex y onfocus.

Bernardo Aguayo Ortega

student•

gracias!

Matías Wasiak

student•

Buen aporte!

Juan Pablo Giraldo Giraldo

student•

El gravatar se puede sacar a partir del hash md5 de un email

Pueden sacar el gravatar de un email especificado en los props: npm i md5

<img
    className="Badge_Avatar"
    src={`https://www.gravatar.com/avatar/${md5(this.props.email)}?s=120`}
    alt="Avatar"
/>

Eduardo Flores

student•

hay que importar md5 en el Badge

import md5 from 'md5';

Luis Abdel Rangel Castro

student•

npm i md5

Sandra Menendez Alonso

student•

Recomiendo esta clase https://platzi.com/clases/1651-react-ejs/21930-props-comunicacion-entre-componentes/. Otra explicación excelente sobre props. "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." Y para más detalles: https://platzi.com/clases/1651-react-ejs/21950-proptypes/ ;)

David Behar

student•

Vientos, si está buena!

Pedro Moreno

student•

Muchas gracias!

Alexei Alvarez

student•

Los porps son propiedades = argumentos de una función. Para evitar usar this.props siempre podemos desestructurar

const {name,lastName,jobTitle,twitter} = this.props

Luego al llamarlo

&lt;p&gt;{name}&lt;/p&gt;

Jhon Carlos Colorado Angulo

student•

Buen aporte. Gracias.

Seba Cardoso

student•

Otra forma de pasar props es de esta manera:

data = {
	name: 'Lily',
	lastName: "kafman"
}
<Component unaPror={...data} />

Baltazar Ortega

student•

No entiendo. Se está pasando un objeto? o se van a "crear" las props de name y lastname?

César Palma

student•

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Macarena Ugarte

student•

Me encanta el carisma del prof!

Alfonso Camp

student•

chupasela jaja

David Behar

student•

Hey, esta es una comunidad profesional y este comentario es vulgar, por favor quita tu comentario platzerito 😡

David De Freitas

student•

Pickle Rick!

Marco Antonio Macedo Preciado

student•

Tambien podemos pasar variables como props. :) En este caso yo pasé la imagen local.

import avatar from './images/avatar.jpg';


ReactDOM.render(<Badge 
    firstName="Marco" 
    lastName= "Macedo"
    avatar= {avatar}
    jobTittle= "Kickass Developer" 
    twitter="marcosiegman"/>, 
container
);

Willy David Da Conceicao Lozada

student•

![](

Grace Nikole Avarado

student•

LUIS MIGUEL GUERRERO GUTIERREZ

student•

Esto es como todo , depende también de quien lo enseñe para que sea mas ameno , afortunadamente este man es muy teso y tiene esa simpatía para enseñar , muchas gracias Richard.Enserio que estoy aprendiendo mucho

Roberto Del Valle

student•

Tambien se puede utilizar destructuring para no estar repitiendo tantas veces this.props

Félix Alejandro Zelaya Orellana

student•

Qué hermoso!! Vengo de angular y esta metodología de React realmente me encanta!!

Ricardo Lugo Recillas

student•

Props
- son argumentos a una funcion, los atrivotos de un componente

Christopher Alexander Pereira Guzman

student•

tenia mucho miedo de react antes de entrar en el por todo el tiempo que me me habia tomado estudiando y practicando js pero ahora viendolo se me hace mucho mas facil que lo que se me hizo aprender js xD

René Antonio González

student•

¿Puedo pasar un componente por medio de las props? Es que quiero hacer un componente que sea una card, y que dentro de esa Card vaya otros componentes dentro (que ya he creado anteriormente). Pero siempre respetando el tema de abstracción que no voy a modificar el código de ambos componentes porque como ya vimos, deben ser reutilizables.

Sería como querer hacer esto (obvio no funciona así, solo es para que me entiendan)

<Card>
	<Producto title="Macbook Pro" price="$1299.99" img="img-sjdhd.jpg"/>
</Card>

Xamir E Rojas

student•

Si puedes, en la sección de React Router del curso explican que debes usar el atributo children de props de la siguiente manera

<ComponentePadre>
	<ComponenteHijo/>
</ComponentePadre>

luego en el jsx de tu componente lo llamas como

return(
	<OtrosComponentes />
	{this.props.children}
);

También depende de si es un componente funcional... para una explicación detallada ve al video de Mejorando la User Interface con un Layout

René Antonio González

student•

Muchas gracias, me ha funcionado!

Hernando Rincón

student•

Los atributos de HTML son los Propos de JSX en React, como className.

Johan Manuel Perez Soto

student•

Es cierto

Roberto Del Valle

student•

React es Genial!

Hernando Rincón

student•

Los props son argumentos que se pasan a una función, como los atributos del componente.

Props

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión