Entonces, con nuestro proyecto ahora instalado,
Comencemos construyendo el diseño estático.
de la aplicación.
Y como siempre, comencemos por conseguir
estos archivos de inicio
que en este caso es sólo este archivo CSS.
Por supuesto, no tenemos que escribir ningún estilo.
nosotros mismos.
Luego colóquelo aquí en la fuente.
Ahora ya habrá uno
así que reemplaza eso
y como ya estamos aquí
podemos deshacernos de todo
la basura que no necesitamos.
Entonces todos estos,
así que al final
solo tenemos app.js, index.CSS e index.js.
bueno. Luego simplemente cambiar el nombre
Esto aquí una vez más.
Y luego vamos a arrastrarlo y soltarlo.
en el icono del código VS.
Bien, aquí ya tenemos nuestros archivos.
Como siempre, tenemos que limpiar este de aquí.
porque estamos importando algunos archivos que
Básicamente ya no tenemos.
Pero eso es todo.
Y una vez más, si te apetece
De hecho, puedes eliminar todo esto.
y escribe el código tú mismo
sólo para practicar cómo podemos configurar
Sube esta aplicación React
desde cero.
Pero dejaré esto aquí.
porque al final
cuando construyes tus propias aplicaciones
siempre te irás
esto aquí también.
No siempre vas a escribir todo desde cero
pero aquí en realidad quieres borrar todo
y empezar desde cero.
entonces exportar
por defecto
aplicación de función.
Así que esto suele ser siempre
Lo mismo también aquí.
Para que siempre tengas el componente principal de tu aplicación
que incluirá todos los demás componentes.
Y de hecho comencemos con estos otros componentes.
Entonces solo los componentes
de lo que hablamos
en la conferencia anterior.
Entonces esa es la función,
logo.
Y ahora simplemente duplicaré rápidamente
este código aquí
sólo para hacer esto un poco más rápido.
Así que lista de equipaje.
Y también tenemos nuestras estadísticas.
Estos son los cuatro grandes componentes
que identificamos
en la última conferencia,
¿recuerda eso?
Y entonces escribamos ahora un poquito.
de JSX para cada uno de ellos
comenzando con el Logotipo.
Entonces el logo es muchas veces una imagen,
pero en este caso
solo tendremos un encabezado principal
y diremos lejos.
Y luego agreguemos algunos emoji aquí.
Ahora la forma en que escribimos emojis
en Mac es presionando
barra espaciadora de comando de control.
Y en Windows, el acceso directo es Windows.
más punto.
Entonces así,
entonces la tecla de Windows y luego más este punto.
Muy bien, entonces usemos una palmera.
Así que este aquí
y luego una bolsa.
Así como esto.
Y en caso de que no puedas conseguir
estos emojis para trabajar
siempre puedes simplemente copiarlos
de los archivos finales de este proyecto.
O, por supuesto, también puedes ignorarlos.
Entonces estos son solo para hacer el diseño.
un poquito mejor.
Bien, eso es suficiente para el logo.
Entonces escribiremos algunos muy simples.
arrancador JSX aquí
para cada componente
ya que básicamente estamos armando este diseño.
Así que aquí, volvamos
un div con la clase de add-form.
Y de nuevo, por supuesto que puedes.
explorar el archivo CSS
y ver todo el CSS que escribí
para estos nombres de clases
que vamos a importar aquí.
Así que aquí más tarde tendremos
estos elementos de forma
como el cuadro de selección,
el cuadro de entrada y ese botón.
Pero por ahora sólo escribiremos el texto.
entonces qué necesitas
para tu viaje?
Y aquí también teníamos algunos emoji,
agreguemos eso también.
Y en realidad ya está aquí abajo.
bueno.
Y fíjate como se queja Eslint.
que no estamos usando estas variables aquí.
Pero por supuesto lo haremos pronto.
incluyéndolos todos aquí
en el componente principal global.
Así que aquí en esta aplicación.
Pero repito, dejemos eso para más adelante.
Entonces lo hacemos al final.
Por ahora, sólo escribimos la parte estática.
de todos los componentes.
Y esta es la lista.
De nuevo, como un marcador de posición allí.
Y hagamos este aquí
un elemento de pie de página.
Así que recuerda cómo son realmente las estadísticas.
al final de la página,
por lo que un pie de página parece una buena opción aquí.
Así que escribamos Tienes
y aquí al final tendremos un número.
Entonces usemos una X por ahora.
elementos en tu lista
y ya empacaste
y luego otra vez, una X,
que es el X por ciento del total.
Entonces aquí también tuvimos
algunos emojis
Como este otro bolso de aquí.
y si,
Creo que este también fue formateado.
Entonces usemos énfasis aquí.
Vos tambien.
Y ahora con eso,
Vayamos aquí a nuestro componente de aplicación.
y utilícelos todos aquí en nuestro diseño.
y si tu quieres,
De hecho puedes pasar el video aquí.
y hacerlo como un desafío.
Entonces solo crea un elemento div
con la clase de aplicación
y luego incluir los cuatro componentes
ahí si quieres.
así que esto
así es como se hace eso.
Entonces con la clase de aplicación.
y luego uno por uno,
uno después del otro
simplemente los incluimos aquí.
Primero un logo,
luego la forma.
Así que en realidad exactamente
en la forma en que los definimos en nuestro código.
Y por cierto, en aplicaciones más reales,
y también un poco más adelante en el curso,
comenzaremos a colocar
cada uno de estos componentes aquí
en un archivo individual.
Entonces tendremos un archivo llamado app js
para este componente, uno llamado logo js para este
y así sucesivamente y así sucesivamente.
Pero aquí, ya que todavía estamos aprendiendo
Creo que es más fácil construirlos todos aquí.
en el mismo archivo
porque sino estamos saltando
alrededor de todos los tiempos
a través de estos archivos.
Y entonces eso hace que todo
mucho más confuso
especialmente cuando llegamos
en temas como la comunicación entre padres e hijos.
Pero sí, habrá más información sobre eso muy pronto.
Entonces para terminar las estadísticas.
y eso es.
Entonces ningún componente
aquí ya es amarillo
y eso significa que no nos olvidamos de ninguno.
Y sí, con esto hemos terminado.
Así que abramos nuestra terminal integrada.
como esto.
Y ya estamos en la carpeta correcta.
Entonces npm comienza
y esperémoslo.
hermoso.
Bueno aquí parece
nos perdimos alguna clase.
Hagamos esto más pequeño nuevamente.
está bien.
Y entonces este pie de página aquí necesita el
clase de estadísticas.
Sí, maravilloso.
Entonces así es como se supone que debe verse
y se ve exactamente como nuestra demostración.
Bueno, excepto, por supuesto, por estos detalles aquí.
del cual nos encargaremos
comenzando en la próxima conferencia.
A continuación, comenzaremos a renderizar.
Algunos elementos estáticos aquí.
Así que todavía no lo haremos dinámicamente.
agregar nuevos elementos a la lista
pero renderizaremos algunos elementos estáticos
desde una matriz aquí en la interfaz de usuario.