bienvenido de nuevo.
Ahora que sabemos que queremos usar Create-React-App
para proyectos de cursos pequeños,
De hecho, configuremos nuestro primer proyecto ahora.
con la herramienta Create-React-App.
Ahora, Create-React-App es una herramienta de interfaz de línea de comandos.
Y ahora necesitamos una terminal.
o un símbolo del sistema como se llama en Windows.
Entonces, si estás en Windows,
adelante y abre tu símbolo del sistema,
y si estás en una Mac, abre tu terminal.
Bien, hagamos esto un poco más grande.
Y no hay muchas cosas
que necesitas saber sobre la terminal.
Entonces todo lo que necesitas saber es que en la terminal,
o también en el símbolo del sistema,
que voy a usar indistintamente,
siempre estás en una carpeta.
Y esa carpeta normalmente se muestra aquí.
en el símbolo del sistema.
Ahora, este símbolo del sistema aquí, entonces esta cosa,
probablemente se vea muy diferente para ti
de lo que me parece, pero eso es sólo
porque tengo este tipo de extensión aquí instalada.
Entonces para ti probablemente sea todo negro.
Y lo más probable es que veas la carpeta.
que estás actualmente aquí.
Entonces estoy actualmente en esta carpeta,
que es básicamente sólo la carpeta de inicio.
Y puedes ver el contenido de la carpeta.
escribiendo ls en Mac.
Y en Windows, lo mismo ocurre con dir,
que significa directorio.
Así que de nuevo, con esto puedes ver el contenido.
del directorio actual.
Entonces lo que quiero hacer ahora es
para navegar a otro directorio,
que es donde finalmente quiero
para ejecutar la herramienta Create-React-App.
Entonces, para mí, ese es nuevamente el Escritorio.
Y entonces puedo escribir CD.
y luego el nombre de la carpeta y presione Enter.
Y este comando es exactamente el mismo en Windows.
Entonces eso también es cd.
Y entonces asegúrese de navegar a la carpeta
en el que desea crear el nuevo proyecto.
Nuevamente, para mí, eso está en el escritorio.
Y sólo para asegurarme, sí,
estas son las dos carpetas que están en mi escritorio,
¿Cuáles son exactamente estos dos, verdad?
Ahora, más adelante, usaremos la terminal.
que está integrado en VS Code,
por ejemplo, para iniciar y detener la aplicación.
Pero para crear una aplicación,
Siempre seguiremos usando esta terminal aquí.
porque la terminal que está en VS Code
Por lo general, está vinculado a la carpeta del proyecto.
Pero aquí todavía no tenemos una carpeta de proyecto.
En su lugar, ahora lo crearemos usando Create-React-App.
Una vez que estés en la carpeta
donde desea crear el nuevo proyecto,
escriba npx y luego cree-react-app
y luego el nombre de la aplicación que desea crear.
Ahora bien, en nuestro caso,
Ese será el menú de pizza.
porque este es nuestro primer proyecto
que vamos a construir en este curso
en la siguiente sección.
Sin embargo, todavía no estamos listos para ejecutar esto.
porque quiero que uses la versión cinco
de Crear-Reaccionar-Aplicación.
Así que por favor escribe esta @ y luego 5
para bloquear la versión cinco de Create-React-App.
Y eso es importante
porque esta herramienta probablemente cambiará en el futuro,
y luego podría funcionar de una manera ligeramente diferente
que el que les muestro aquí.
Pero para no tener ningún problema,
arreglemos esto en la versión cinco
para el resto del curso.
Y luego, si quieres construir tus propios proyectos.
fuera del curso, tú, por supuesto,
Ya no necesito esto.
Luego simplemente ejecutará Create-React-App así
sin el número de versión.
Pero aquí, hagámoslo así.
Entonces, una vez que lo haya escrito así, simplemente presione Enter,
y esto tardará mucho en descargarse.
Bueno, en realidad, primero,
me pregunta si quiero continuar.
Así que simplemente escriba y y luego Ingrese o regrese.
Y sí, ahora está empezando a descargarse como,
miles de paquetes,
lo cual llevará mucho tiempo.
Pero ves que ya creó la carpeta.
con el nombre de la aplicación que especificamos aquí,
menú de pizza.
Así que continúa y pausa el vídeo ahora mismo.
y volveré aquí una vez que descargue todo
de estos paquetes ha terminado.
bueno. Y ya está, instalando todos los paquetes.
Y ahora podemos cerrar esta terminal.
o el símbolo del sistema.
Ahora, antes de abrir esta carpeta aquí,
Cambiaré rápidamente el nombre de esta carpeta
para que permanezcan en el orden que quiero que estén.
Pero esto es totalmente opcional.
Entonces el número dos será para la siguiente sección.
Por eso este es el número tres.
bueno.
Y ahora estamos listos para abrir este proyecto.
como carpeta de proyecto en VS Code.
Y así una vez más,
Lo arrastraré y lo soltaré en el ícono de VS Code aquí abajo,
u opcionalmente, también puedes abrir una nueva ventana de VS Code
y luego abra la carpeta del proyecto aquí mismo.
Pero de todos modos, exploremos ahora la estructura del archivo.
que ha sido creado para nosotros por Create-React-App.
Y ya podemos ver
que en realidad esto es solo un proyecto npm normal
que también podríamos haber creado manualmente usando
el comando de inicio npm.
Entonces tenemos un archivo package.json aquí,
que contiene el nombre de la aplicación, la versión,
las dependencias y también los scripts npm.
está bien.
Y también tenemos la carpeta node_modules,
que es donde se instalaron todos los paquetes npm.
Y ves que hay cientos,
tal vez miles de ellos,
pero solo estoy buscando los de React aquí.
Y sí, aquí están.
Entonces aquí está el paquete de reacción,
y aquí, el paquete reaccionar-dom.
Y recuerda que estos dos son exactamente los
que también incluimos en nuestro archivo
en la conferencia pura de React, ¿verdad?
Pero lo hicimos en aquel entonces usando la etiqueta script,
y por supuesto, no usar npm install, ¿verdad?
Ahora, si todo este concepto aquí del proyecto npm,
entonces este node_modules y el package.json,
Es un poco extraño para ti, entonces no te preocupes.
Realmente no necesitas entender todo eso.
Pero si quieres, puedes intentarlo.
para leer algo en él o ver un vídeo,
o también te lo explico todo en mi curso completo de JavaScript.
Pero repito, no es realmente necesario.
Solo debes saber que esto es muy, muy estándar.
en básicamente todos los proyectos JavaScript modernos
que tienen una herramienta de construcción asociada.
¿bueno?
Pero de todos modos, ahora revisemos estas otras carpetas.
que han sido creados para nosotros.
Ahora, la mayor parte de nuestro trabajo de desarrollo,
o básicamente todo el desarrollo,
Sucederá aquí dentro de la carpeta de origen.
Aquí tenemos un montón de archivos,
donde la mayoría de ellos en realidad no los necesitamos.
Y así nos desharemos de ellos pronto.
Pero por ahora dejemos todo aquí como está.
y revisando la otra carpeta,
que es la carpeta pública.
Y aquí es donde básicamente todos los activos
eso terminará en la aplicación final.
Entonces todas las imágenes, como el favicon,
y también el archivo index.html.
Y si abrimos eso,
tenemos un montón de cosas aquí
y, bueno, todos estos comentarios aquí,
que puedes leer si quieres.
Pero solo quería llamar tu atención.
a este div con la identificación de root.
¿Te resulta familiar?
Sí, escribimos exactamente lo mismo.
en la conferencia pura de React
y usé esto como raíz de nuestra aplicación.
Y aquí se ha utilizado exactamente la misma convención.
por Create-React-App.
Entonces se creó la aplicación Create-React-App
Este archivo index.html ya está para nosotros.
Y luego, si abrimos index.js,
ves que aquí también selecciona ese elemento raíz,
entonces el elemento con el id de root,
y luego crea la raíz
usando ReactDOM.createRoot
y luego renderiza la aplicación en él.
Exactamente como lo hicimos en la conferencia pura de React.
Pero más sobre todo esto.
al comienzo de la siguiente sección,
cuando realmente comencemos a construir este proyecto.
Por ahora solo quiero explorar
La estructura del archivo aquí un poco.
Ahora, lo que quiero decir en este video.
es que todos estos archivos
y toda esta estructura de archivos aquí ha sido creada
por Create-React-App de una manera
que sus desarrolladores pensaron que era mejor.
Pero todo podría ser completamente diferente.
Este index.html podría estar aquí,
o podría estar aquí dentro,
o tal vez podríamos no tener ninguna carpeta,
porque a React realmente no le importa nada de eso.
Y la prueba de ello es que en la conferencia pura de React,
No necesitábamos nada de esto, ¿verdad?
Todo lo que teníamos era un index.html con algo de JavaScript.
en el que básicamente teníamos esto.
Entonces esta parte aquí es React real,
y es esta parte la que se encarga
de representar este componente de la aplicación en el DOM.
Entonces este componente de la aplicación está aquí dentro de este archivo de la aplicación.
Pero abriremos todos estos archivos.
y limpiarlos, también,
una vez que comencemos a construir la aplicación.
Por ahora, sólo quería explorar esto un poco.
y además, realmente quería iniciar esta aplicación ahora.
Entonces, para iniciar una aplicación Create-React,
Podemos usar este script npm aquí mismo.
Entonces esta ejecución de npm comienza.
Así que abramos la terminal nuevamente.
Pero como dije al principio,
ahora usaremos el terminal integrado
que viene con VS Code.
Entonces, para eso, abre la terminal aquí mismo.
Y ahora la gran ventaja aquí es
que ya estamos automáticamente dentro de nuestra carpeta de proyecto.
Entonces, si ejecutamos ls aquí, o dir en Windows,
entonces verás exactamente los mismos archivos y carpetas
que tenemos aquí en la barra lateral.
Pero de todos modos, ahora, para empezar el proyecto,
todo lo que tenemos que hacer es ejecutar npm run start
porque así es como ejecutas estos comandos aquí.
Entonces escribes npm run
y luego el nombre de uno de estos cuatro, en este caso.
Y también podríamos crear el nuestro propio,
pero no es necesario.
Ahora, en el caso del comando de inicio,
en realidad ni siquiera necesitamos escribir ejecutar.
Simplemente puedo escribir npm start, presionar Enter,
y eso luego iniciará nuestra aplicación
e incluso abrir una nueva pestaña del navegador.
Y ahí está.
Entonces Create-React-App creó un servidor web para nosotros.
e hicimos que nuestra aplicación se ejecutara aquí
en el puerto localhost 3000.
¿bueno?
Ahora, volvamos aquí una vez más.
y abra este componente de la aplicación.
Entonces este componente de la aplicación aquí está dentro del archivo de la aplicación.
Bueno, tomemos todo aquí.
y muy rápidamente escribe h1,
Hola reacciona!
Guárdalo.
Y luego, una vez que volvamos,
debería haberse actualizado automáticamente.
Y efectivamente así fue.
Entonces esta era una de las cosas que nos faltaban.
en la conferencia pura de React,
pero ahora estamos usando un servidor web.
Y con eso obtenemos un reemplazo de módulo en caliente.
excelente.
Así que felicidades, acabas de crear
su primera aplicación Create-React-App.
Y con esto llegamos al final.
de la sección Primer vistazo a React.
Ahora, la siguiente sección es una revisión rápida.
del JavaScript esencial que necesitas para React.
Y así podrás ver si necesitas alguna de esas conferencias.
Pero si no, pase a la siguiente sección.
donde luego comenzaremos a construir este menú de pizza
que comenzamos aquí para aprender todos los fundamentos de React.
Espero verte allí muy pronto.