Es hora de presentar
Otro concepto fundamental de React, que son los accesorios.
Y los accesorios son esencialmente
cómo pasamos datos entre componentes.
Y en particular, de los componentes principales.
a componentes secundarios.
Entonces podemos imaginar que los accesorios son
como un canal de comunicación
entre un componente padre y un componente hijo.
Entonces, en la práctica, lo que vamos a hacer,
ahora es personalizar cada uno de estos componentes de pizza
que tenemos aquí mismo.
Entonces, recuerda cómo creamos el componente de pizza.
que tiene esta imagen, el nombre de la pizza y los ingredientes.
Pero ahora todas las pizzas son iguales.
porque pues no teníamos como pasar
diferentes datos en ellos para personalizar cada uno de ellos.
Pero ahora, a medida que aprendemos sobre accesorios,
podremos hacerlo.
Entonces, antes que nada, vamos
toma nuestro componente de pizza
y córtalo desde aquí y colócalo justo después del menú,
Sólo para que podamos ver lo que está pasando.
Y luego deshagámonos de esta repetición por ahora.
Así que por ahora solo queremos este componente de pizza aquí.
Bien, ahora es el momento de pasar los datos.
desde este componente principal aquí,
que es el menú en este caso, al componente de pizza.
Entonces, lo que queremos pasar es básicamente esta cadena de aquí.
Entonces, el enlace a la imagen,
luego el nombre de la pizza y los ingredientes.
Entonces, para definir los accesorios, lo hacemos en dos pasos.
Primero, pasamos los accesorios al componente,
y luego, segundo, recibimos los accesorios.
en el componente al que los pasamos.
Entonces, aquí es donde pasamos esos accesorios.
Y los escribimos así.
Entonces, como si fueran atributos normales.
entonces,
pizza de espinacas.
Ese es el primero.
Luego, definamos también un accesorio para el ingrediente.
Y, por cierto, prop simplemente significa propiedad.
Es solo una abreviatura de
sí, propiedad.
¿bueno?
Y finalmente, digamos la foto o el nombre de la foto.
Y luego tomemos este de aquí.
está bien.
Y tal vez pasemos también un precio.
Y por ahora también lo pasaré como cadena.
pero te mostraré algo en un minuto.
Entonces, por ahora, escríbelo así.
Guárdalo;
y luego Prettier formateará todo muy bien así.
Y ahora tenemos que ir al segundo paso,
que en realidad va a recibir los accesorios aquí
dentro del componente secundario.
Así que ahora mismo, por supuesto, el componente no tiene forma de saberlo.
que estos cuatro accesorios se han pasado.
Entonces, la forma en que lo hacemos es aceptar un parámetro de accesorios.
aquí en este componente.
Y luego, para empezar, bloqueemos estos accesorios.
a la consola; y echa un vistazo a lo que está pasando.
Y ya podemos ver algo aquí.
Entonces, estos accesorios son básicamente este objeto de aquí;
y tiene nombre, luego pizza de espinacas, que es exactamente esto.
Entonces, ¿qué pasó? Cuando React incluyó este componente de pizza,
Básicamente se llamaba disfunción en el pasado.
en este objeto de accesorios.
Y este objeto de accesorios está hecho de estos cuatro accesorios.
que pasamos al componente.
Y ahora podemos usar este objeto de accesorios.
para reemplazar todos estos valores aquí.
Ahora necesitamos sacar estos valores del objeto;
y por lo tanto, necesitamos JavaScript, ¿verdad?
Así que aquí ya no se trata de una cadena;
pero necesitamos ingresar al modo JavaScript nuevamente.
Entonces, el nombre de la foto de los puntos de utilería es este.
Y aquí está el nombre de la pizza.
Y nuevamente, necesitamos el modo JavaScript.
Entonces, nombre del punto de accesorios.
Lo mismo aquí abajo.
Entonces, nombre del punto de accesorios.
Y finalmente, aquí abajo, queremos los ingredientes de los puntos de utilería.
O en realidad, es un ingrediente.
Arreglemos eso aquí.
Ingredientes e ingredientes aquí abajo.
bueno.
Y claro, ahora todo sigue igual;
porque los datos que teníamos aquí antes,
Son exactamente los datos que tenemos aquí.
Pero ahora hagamos realidad algo de magia.
Entonces, creemos otro componente de pizza;
Y luego, aquí es donde veremos por qué los accesorios son tan útiles.
Entonces, creemos una pizza funghi.
Pongámosle algunos ingredientes.
Entonces tomate, digamos también champiñones.
Y esto no es importante aquí.
Esto es sólo para mostrarte
que ahora podemos personalizar completamente nuestros componentes.
A continuación, podemos definir el precio.
Y observe que lo estoy haciendo ahora en un orden diferente.
Así que aquí tenía primero una foto, el nombre y el precio.
Y esto es sólo para mostrarte
que el orden en el que pasamos los accesorios
es completamente irrelevante.
Entonces, el nombre de la foto es pizzas.
barra diagonal punto hongo jpg.
¿bueno? Y ahora necesitamos cerrar inmediatamente este componente.
justo como antes.
Y mientras lo guardo, miren lo que pasó aquí.
Y ahí está nuestro segundo componente de pizza.
ahora con datos completamente diferentes.
Y ahora, por primera vez, hemos reutilizado un componente.
y lo configuré de una manera que hace que cada componente sea único
y mostrar sus propios datos.
¿bueno? Y ahora mejoremos
Este componente de pizza aquí un poco.
Entonces, para empezar,
En nuestro CSS, en realidad tenemos un nombre de clase aquí.
Entonces un nombre de clase llamado pizza.
¿bueno? Y luego coloquemos también estos dos aquí,
dentro de su propio div,
para que estos datos puedan visualizarse en el sitio de la imagen.
Así como aquí en nuestro original.
Así que esto es lo que vamos a hacer.
Entonces aquí tenemos un div,
y luego otra vez, estoy usando ese truco
donde simplemente empujo hacia abajo esa línea.
Y esto ya tiene una pinta mucho mejor.
Finalmente agreguemos también el precio aquí.
y lo estoy haciendo como un lapso.
Así que el precio del punto de apoyo.
Y ahí está.
Pero ahora digamos que queríamos por alguna razón
para agregar un número aquí.
Entonces queríamos aumentar todos los precios en tres, digamos.
Pero mira lo que sucede cuando intentamos esto.
Entonces todos los precios más tres.
Entonces lo que pasa es que
React, o JavaScript, básicamente simplemente agregó los tres aquí
hasta el final de este número.
Y la razón de eso
es que aquí pasamos estos números como una cadena.
Y podemos ver eso también aquí en este resultado.
Entonces no queremos una cadena aquí.
En cambio, queremos un número.
Y entonces, la forma en que podemos lograrlo.
es ingresando nuevamente, al modo JavaScript.
Y en JavaScript, este es ahora un número real.
Y entonces observen lo que sucede.
De hecho, ahora tenemos 13;
que son los 10 que teníamos antes, más tres.
¿bueno? Entonces hagamos lo mismo aquí.
Y eso soluciona esto.
Entonces, es muy importante notar esto.
que cuando quieras pasar
algo que no es una cuerda,
simplemente usas, nuevamente, este modo JavaScript básicamente.
Porque, de hecho, puedes pasar cualquier cosa como accesorio.
Por tanto, no tiene por qué ser una cadena o un número.
Puedes pasar en una carrera.
u objetos o incluso otros componentes de React.
Entonces los accesorios son realmente muy poderosos.
y realmente una de las cosas más fundamentales en React.
Y ahora a revisar este concepto e ir incluso un poco más allá.
pasemos a la siguiente conferencia.