Muy bien. Y sí, June, tienes razón. Siempre hay 100 opciones para hacer lo mismo para todo, especialmente en el mundo del front end. Creo que todos ustedes lo saben. OK, ahora en este punto, todo mi software ha sido instalado. Voy a redimensionar todo esto y quiero ejecutar algo. Quiero ejecutar algo que está en mi archivo package.json. Sospecho que la fuente es un poco pequeña. Déjame hacerla un poco más grande. OK, Create
React App genera un package.json con algunas cosas en él. Pero lo interesante es que ha movido mucha de la configuración y muchos de los scripts a software que puede ser actualizado más tarde sin que tengas que cambiar tu package.json o las dependencias o cualquier otra cosa. Ahora podría seguir adelante y empezar esto usando la
terminal. Y lo haré, diré
NPM Ejecutar script start. Y esta es la forma en que probablemente estás acostumbrado a hacerlo. Es decir, abrir una
terminal. Y luego veamos que abriste Chrome. Voy a cambiar mi navegador. Para ser el primero en la lista de Firefox. Sí, eso está bien. Entonces, esto necesita venir aquí. Correcto. Quería que estuvieras en Firefox, pero está bien. Estamos bien.
npm start ejecuta un servidor de desarrollo.
Vale, gracias por publicar los enlaces sobre la entrada del calendario y cómo entrar aquí. Es cierto que Next.js se ha vuelto muy popular. Pero creo que si vas a las páginas de React en sí, todavía apuntan a Create React App. El Proyecto React considera a Create React App como el iniciador oficial. Next.js añade algunas cosas relacionadas con el enrutamiento y otras cosas que lo hacen más opinado. Así que ejecutamos NPM start, y está ejecutando un webpack Dev Server. Está haciendo todas las cosas en una ventana, y puedo demostrar que está haciendo lo que quiero que haga yendo a app.tsx, que está en SRC. Y si cambio algo como aquí para ser exclamación, verás que va a recargar, se va a actualizar, y cuando vuelva a Chrome, veré esto en vivo. Y si tuviera suficiente espacio en mi pantalla, cambiaría a 720p, si tuviera suficiente espacio en mi pantalla, podrías ver que estas cosas están sucediendo una al lado de la otra. Ahora, eso está muy bien, pero no tienes que ejecutar en una terminal. Somos un IDE. Los IDEs tienen algo de automatización para integrar tu entorno de desarrollo, así que si quisiera integrar mi entorno de desarrollo, podría hacer un par de cosas. Podría ejecutar - por cierto, tengo las pestañas desactivadas. Las volveré a activar para que se vea un poco más familiar para ti. Si quisieras, sin embargo, podrías ejecutar nuestra herramienta npm y obtener una lista navegable de cosas para ejecutar. Y luego lo ejecutará en una ventana de herramientas para el ID. Chris, estamos en la configuración del proyecto, que es el primer enlace, bajo show me a page. Entonces, podríamos usar esta herramienta npm que expone todos los scripts en tu package.json, que es la forma en que solía hacerlo todo el tiempo. La forma en que lo hago ahora, sin embargo, es que dejo mi package.json por ahí, y tenemos estas decoraciones de canalón que me permiten ejecutar scripts, no sólo ejecutarlos, también puedo ejecutarlos bajo el depurador, lo cual es también útil. Así que, simplemente voy a ejecutar esto aquí, y lo que obtengo en lugar de la ventana de la terminal es esta ventana de herramientas de ejecución que está dedicada para que el IDE capture la salida y te permita hacer ciertos tipos de cosas con ella. Muy bien, veamos, Alexis. Hola, Alexis. Actualmente estamos allí. Ahora, la misma clase de cosa. Verás que estamos ejecutando la misma cosa debajo. Si vuelvo a WebStorm y luego voy a mi componente, y minimizaré esto, y quitaré esto y pondré el punto de nuevo y lo guardaré, hace la recarga en vivo. Así que, debajo del capó, sigue siendo el equivalente moral de npm start. Así que eso nos lleva a través de la creación del proyecto, show me a page, estamos ejecutando el script para start. Eso no es lo único que podemos hacer, sin embargo. Lo que estamos ejecutando es un servidor de desarrollo. No es la calidad de construcción de producción. No está minimizando todo y dividiéndolo en rutas de carga perezosa, y todos los milagros de la ciencia moderna que el moderno React te da. Lo que queremos ejecutar es el script de construcción. Y de nuevo, esto es algo realmente agradable que Create React App ha hecho por nosotros. Tienen un script que ellos manejan en su propio paquete, y cuando encuentran un error, lo arreglan, y yo no tengo que volver a escribir algo de mi lado. Está gestionado por el paquete. Así que si quiero ejecutar la construcción de producción, lo mismo de siempre. Vengo al canalón, hago clic en ejecutar, va a abrir una ventana de herramientas. Va a tomar un tiempo, y el ventilador de mi CPU se va a encender un poco. Para la herramienta NPM si no puedes encontrarla, espero que puedas hacer find action para llegar a ella. O si haces find files, espero que esté listado aquí. Si no, es posible que no tengas el plugin activado. Gracias, Sherry. Creo que respondí a la pregunta que se hizo. Si estoy mirando una pregunta diferente, avísame. Parece que Sherry también respondió a la pregunta allí. Si eso no responde a la pregunta sobre dónde encontrarlo en IntelliJ, avísame. Vale. Así que generamos un directorio de construcción. ¿Qué significa eso? Generamos un directorio de construcción. Eso es lo que significa. Esta es una versión exportada de mi proyecto React, lista para ser servida en un servidor de archivos estáticos de una manera muy alta performance. El mínimo JavaScript, todas esas otras cosas. Y si miro aquí, veré que tengo un index.html, tengo algunas variaciones de mi logo, otras cosas que coinciden con lo que estaba obteniendo en un servidor de desarrollo. Una cosa que es interesante acerca de esto es que el IDE lo ha marcado como excluido, lo cual es bueno. No quiero que esté reindexando eso constantemente y dándome dos opciones para navegar a un símbolo o algo así. Bueno, eso está haciendo construcciones. Pasemos a lo que queremos hablar, que es testing. Otra cosa que el create React app hace por nosotros es un andamio.
Vale, muy bien. Así que estoy mostrando en WebStorm, pero si vas a Find Files, espero que lo tengas aquí. Si no lo tienes aquí, entonces es posible que no esté instalado correctamente. Vale, cerraré esta ventana de herramientas de construcción. Y estamos hablando de testing. Y entonces lo que queremos ejecutar es este script de ejecución para test. ¿Ahora qué está haciendo realmente? De nuevo, create React App es como el andamio oficial para el proyecto React. Y ha tomado algunas decisiones sobre testing. Ha tomado la decisión de que Jest es el corredor de pruebas oficial.
Comments