Sigamos construyendo nuestra aplicación.
creando un componente completamente nuevo
y echando un primer vistazo a la reutilización.
Pero primero, obtengamos los archivos iniciales para este proyecto.
de los archivos que descargamos de GitHub.
Aquí, en la carpeta de inicio,
toma estos tres, cópialos y luego ve a la carpeta de tu proyecto
y los copiaré por ahora aquí en la carpeta pública.
Entonces tenemos esta carpeta de imágenes de pizza,
tenemos estos datos de inicio y este index.CSS
que probablemente deberíamos mover a esta carpeta de origen.
Así que asegúrese de tener estos dos archivos aquí.
después de incluir los archivos de inicio.
Y ahora volvamos aquí.
y creemos ese nuevo componente
de lo que estaba hablando.
Entonces en React escribimos nuevos componentes usando funciones.
Así que funciona, y a esta la llamo pizza.
porque contendrá algunos datos sobre una pizza
y luego aquí por ahora
no tenemos parámetros para esta función
y luego el cuerpo de la función.
Ahora en React, hay dos reglas importantes.
cuando escribimos componentes como funciones.
Primero, el nombre de la función debe comenzar.
con una letra mayúscula como esta
y segundo, la función necesita devolver algún marcado.
Generalmente en forma de JSX,
pero ni siquiera podemos devolver nada, como devolver nulo.
Pero aquí, simplemente devolvamos algún elemento H2, por ejemplo.
y luego escribamos pizza.
Así que guárdalo, pero por supuesto no aparecerá nada aquí.
en la interfaz de usuario, y eso es
porque no incluiremos este nuevo componente en ninguna parte
e incluso ESLint nos advierte sobre eso aquí.
Entonces esta línea amarilla que dice pizza está definida,
pero nunca usado.
Nuevamente, no incluimos este componente de pizza.
en nuestro componente de aplicación, que es el componente
que se está representando actualmente en la pantalla.
Entonces podemos usar nuestro componente aquí así.
entonces pizza
y luego inmediatamente cerramos el elemento así.
Sin embargo esto nos dará un error.
Así que aquí, que ya vimos antes
y el motivo de este error
es que cada componente solo puede devolver exactamente un elemento,
no dos elementos como los que tenemos aquí.
Así que envolvamos esto aquí en un div.
y a veces puede resultar un poco molesto
que VS Code cierra automáticamente estos elementos por nosotros,
pero de todos modos, ahora tenemos nuestra pizza en la interfaz de usuario.
Y eso se debe a que ahora anidamos este componente de pizza.
dentro de este componente de la aplicación.
Y con anidamiento, quiero decir que básicamente usamos
o capté este componente aquí dentro de la aplicación.
¿Qué es muy, muy importante notar?
es que por anidar no queremos decir
que escribimos una función dentro de esta otra función.
Entonces lo que nunca deberíamos hacer
es anidar la declaración del componente en sí.
Así, esto todavía funciona en realidad,
pero es una muy, muy mala idea
por razones que conoceremos más adelante.
Así que nunca anide las declaraciones de funciones,
pero siempre declara todos tus componentes en el nivel superior.
Entonces así.
De nuevo, cuando decimos componentes anidados,
lo que queremos decir es que llamamos,
entonces incluimos un componente en otro como este.
Ahora, está bien, hagamos este componente de pizza aquí.
solo un poquito más interesante
y para eso usaremos nuestros datos iniciales aquí.
Así que abramos data.js
y todo lo que necesitamos es seleccionar todo, luego copiarlo
y luego peguémoslo aquí.
bueno.
Como puedes ver ahora mismo estamos haciendo todo el desarrollo.
de esta aplicación en un archivo grande.
Mientras que en el mundo real dividimos nuestro código en módulos
y luego incluir estos módulos entre sí,
pero aquí sólo quiero mantenerlo simple
entonces no vamos a hacer eso todavía.
Entonces, en realidad podemos eliminar este data.js.
y cierra esto.
Por ahora, simplemente usaremos esto aquí como ejemplo.
Así que ahora copiaré, pegaré, digamos esta pizza aquí.
y usa eso aquí como nombre
y luego tomemos también los ingredientes.
Así que copiemos y peguemos todo este texto.
y observe que en realidad solo me interesa el texto.
No necesitamos, por supuesto, estas citas.
porque, nuevamente, esto es como escribir HTML
y ahí tampoco necesitas comillas, ¿verdad?
Entonces aquí, creemos un párrafo.
e inmediatamente ves que tenemos este subrayado rojo aquí
lo cual se debe a que, nuevamente,
Estamos intentando devolver dos elementos aquí.
lo cual no está permitido.
Bien, esto es lo que me gusta hacer.
es luego subir esta línea aquí usando un atajo.
Así que veamos qué es eso para ti.
Entonces es esta alineación de movimientos.
Probablemente deberías acostumbrarte a este atajo.
y este donde movemos líneas hacia arriba y hacia abajo,
así por ejemplo,
eso es muy, muy útil
y vamos a hacer eso todo el tiempo.
Sólo necesitamos deshacernos de este punto y coma que tenemos aquí,
que estaba ahí mismo.
Bien, entonces tenemos algo de texto.
ahora también usemos esta imagen
que tenemos en la carpeta pública.
Entonces sí, este de aquí.
Así que recuerda lo que mencioné al principio.
que todos los activos de la aplicación
irá a esta carpeta pública porque Webpack,
entonces el paquete de módulos básicamente
obtenerlos automáticamente desde allí.
Y ahora podemos escribir una imagen aquí.
De nuevo, al igual que HTML,
y luego si escribimos una ruta a la imagen como esta,
espinacas.jpg,
entonces Webpack lo obtendrá automáticamente aquí
desde esta carpeta y veamos si funciona.
Y efectivamente, ahí va nuestra imagen.
Ahora tenemos estos subrayados amarillos aquí.
y eso se debe a que una regla de ESLint
que dice que las imágenes siempre deben tener un accesorio alternativo.
Así que agreguemos eso aquí.
Entonces, para hacerlo un poco más accesible,
pongamos aquí el nombre de la pizza
y luego ESLint está feliz.
Entonces tenemos este componente aquí.
y ahora hablemos de la idea de reutilizar este componente.
Y por ahora, todo lo que vamos a hacer es reutilizar este componente.
Básicamente es usarlo varias veces.
Así que hagámoslo tres veces para que puedas ver.
que ahora esta parte de la interfaz de usuario, que es el componente de pizza,
se incluirá tres veces.
Así que tres veces esta deliciosa pizza de espinacas.
lindo. Ahora por supuesto los datos aquí en todos ellos.
ahora es el mismo porque aún no personalizamos esos datos,
pero lo haremos más tarde, por supuesto,
cuando hablamos de accesorios.
por ahora,
Sólo quiero que entiendas este concepto realmente importante.
que podemos llamar a cada pieza de la interfaz de usuario
o en otras palabras, cada componente varias veces aquí
para poder reutilizarlo
y ese es un concepto fundamental
de escribir aplicaciones React.
Ahora, sólo una última cosa aquí,
y esto no tiene nada que ver con el código,
es que tal vez te hayas dado cuenta
que tenemos todas estas líneas de colores aquí en la barra lateral
e incluso aquí abajo.
Ahora la razón de esto es que cuando creamos un nuevo proyecto
con la aplicación Create-React,
En realidad, configurará automáticamente este proyecto.
como repositorio de GitHub.
Es por eso que aquí también obtienes todos estos colores diferentes.
y además aquí ves todos los cambios que hemos realizado
a los diferentes archivos.
Así que aquí eliminamos algunas cosas, modificamos algunas cosas,
y aquí estas imágenes aún no están rastreadas.
Ahora, como realmente no vamos a usar GitHub
mientras construimos estos pequeños proyectos,
De hecho, solo quiero eliminar estas líneas de colores aquí.
desde la cuneta, entonces desde este lugar,
y para eso podemos ir a nuestra configuración
y luego simplemente busque decoraciones diferentes.
Así que aquí el valor predeterminado es todo, así que configúrelo en ninguno.
Y entonces nuestro editor buscará
solo un poco más limpio aquí,
y podemos cerrar la barra lateral
y con esto terminamos esta conferencia
y estamos listos para seguir adelante.