¿No CRA? ¿Y ahora qué?

Entonces, sí, no hay crear una aplicación React. ¿Qué hacemos ahora, verdad? Y si miras la documentación de React, y probablemente estés familiarizado con ella, sugieren ahora para aplicaciones adecuadas usar algún framework de calidad de producción, ¿verdad? Y estas son excelentes opciones, ¿verdad? Hay Remix, hay Next.js, Gatsby. Pero ¿qué pasa si aún no estás listo para usar un framework completo? Solo quieres explorar, comenzar con una aplicación React simple y pura. Tienen algunas opciones, de hecho, aquí abajo. Están un poco escondidas. Pero puedes usar, por ejemplo, Vite o Parcel para configurarlo. Y nuevamente, Vite, por ejemplo, tiene una configuración de plantilla realmente genial que puede ayudarte a comenzar. Pero son un tipo de empaquetadores genéricos, ¿verdad? Ese es el tema principal aquí.

Quiero mostrar cómo, por ejemplo, podrías hacer algo similar con Nx. Y es posible que conozcas Nx tal vez por un proyecto de monorepo. Tal vez algunos de ustedes estuvieron aquí ayer. Así que no voy a hablar de monorepos, sino de algo similar que hicimos, lo que llamamos aplicaciones independientes.

Nx tiene funciones incorporadas que no solo son útiles para una configuración de monorepo, sino que también pueden ayudarte a configurar algo muy similar a lo que hizo Create React app, pero con algunas características modernas. Puedes crear un nuevo espacio de trabajo como este aquí. Y esto te iniciará. Ya puedes ver que tienes diferentes opciones en términos de mecanismos de empaquetado, como V-to-APK o RSPEC.

Y ya hice esto, así que ahorramos algo de tiempo instalando cosas. Pero básicamente esto es lo que obtendrás de un espacio de trabajo como este. Ya puedes ver que es bastante similar a lo que podría ser una aplicación Create React. Así que tienes una carpeta de origen en la raíz, solo una aplicación. Hay algunas otras cosas aquí. Y literalmente puedes hacer un npm start, ¿verdad, y se iniciará tu aplicación en modo de desarrollo. Ahora aquí está Vite, y lo sirve en tu navegador. Ahora, ¿por qué elegirías esto? Como, estás dando un paso más. Porque, por ejemplo, viniendo un poco del escenario de monorepo, sugerimos a las personas modularizar sus aplicaciones.

En lugar de colocar todo en esta carpeta de origen, lo que puedes hacer en realidad es aprovechar algunos de los generadores de Nx y, digamos, configurar una nueva biblioteca aquí. Así que puedo decir que el complemento nx react proporciona tu generador de bibliotecas. Y déjame crear una biblioteca de productos. Y como directorio, voy a usar modules. Puedes elegir lo que quieras, realmente. Entonces, ¿qué prueba de ejecución quieres usar? ¿Quieres usar VTEST como el más rápido? No necesito un paquete en este momento. Y lo que sucederá aquí, puedes ver que he creado una biblioteca que me permite representar esa unidad o contexto empresarial para desarrollar productos. Puedes ver aquí, hay un punto de entrada claro que también me permite pensar en las API privadas y públicas. Y puedo expandirlo así. Si no conoces estos comandos, estos generadores de memoria, lo cual es totalmente comprensible, también tenemos una extensión para vscode y WebStorm. Y lo que podrías hacer aquí, por ejemplo, es ir aquí, decir generar biblioteca react. Digamos que también quiero una biblioteca de pedidos. Elige un montón de cosas y luego ejecuta solo un generador.

Y me recreará aquí una nueva biblioteca de pedidos también. Ahora, todas estas están expuestas a través de la configuración de tsbase, por lo que es muy fácil para mí importar porque es literalmente un alias que apunta a esa carpeta que acabamos de crear. Y así puedo ir a la aplicación aquí y decir importar de este paquete que acabamos de tener, pedidos, ¿verdad? Y podría hacer exactamente lo mismo para la biblioteca de productos y tenerla importada también, ¿verdad? Y así tengo ambas y puedo hacer referencia a ellas obviamente en mi aplicación y usarlas.

Incluso podemos visualizar esto tal como mostré ayer para aquellos de ustedes que han estado aquí en un gráfico de NX. Permítanme ayudarles un poco aquí. Básicamente, pueden ver aquí esta es la estructura de mi espacio de trabajo, me muestra que hay una prueba de extremo a extremo así como Cypress que se vincula a la aplicación Create React a la biblioteca de pedidos, la biblioteca de productos. Y así pueden tener una idea aproximada de cómo pueden modularizar estas cosas. Incluso hay características que permiten crear reglas de Lint de límites en torno a estas para asegurarse de qué importaciones están permitidas y cuáles no. Y así es como sugerimos a las personas escalar las cosas.

Ahora, viniendo del espacio de Monorepo, obviamente lo que podrían hacer como siguiente paso es una vez que tengan una aplicación construida y modularizada, ¿qué tal tener un Monorepo adecuado? ¿Verdad? Y así sería una posibilidad donde pueden actualizar este espacio de trabajo, moverlo a la estructura real de Monorepo donde pueden ver la misma aplicación aquí, ven la misma biblioteca de pedidos y productos allí. Y tal vez en este punto estén listos para agregar una aplicación NextJS o una aplicación Remix, ¿verdad? Ya he agregado eso en mi archivo package json, así que lo que hice fue agregar este complemento NxNext. En realidad, hay un montón de complementos de la comunidad disponibles también. Y así, lo que esto me permite ahora es hacer lo mismo. Puedo ir y generar aquí una aplicación con NxJS. Esos son los dos que tengo instalados aquí. Tengo aquí mi aplicación NxNext, ¿verdad? Ejecuto lo mismo. Ahora descargará los paquetes, los instalará y aquí, básicamente dentro de mi carpeta de aplicaciones obtendré mi aplicación NxNext y puedo hacer referencia a ella de la misma manera exacta como lo hice antes. ¿Verdad? Y así esto puede ser una estrategia de migración. Ahora dejaré que la instalación continúe. Esto puede ser una estrategia de modularización y también una estrategia de migración. Si tienes una aplicación React y quieres modularizarla lentamente hacia una aplicación más moderna y más completa que, por ejemplo, NxJS o Remix permitirían.

Y así, si estás pensando ahora, bueno, esto es genial y agradable, pero ya tengo una gran aplicación React, ¿cómo llego a algo como esto? Si vas a nuestra documentación, también tenemos algo como una migración automatizada. Nuestros generadores no solo pueden generar cosas nuevas, sino que también pueden tomar tu aplicación Create React existente, por ejemplo. Ejecutas mpx-nx en ella, entiende que es una aplicación Create React y puede migrar incluso esto de una configuración basada en Webpack Create React app a una configuración basada en Nx con React, ¿verdad? Así que esas son algunas posibilidades de cómo puedes migrar. Si esto es interesante, definitivamente ponte en contacto. También tenemos un stand afuera, así que podemos profundizar un poco más. Puedo mostrarte más detalles que van más allá de los siete minutos que tuve. ¡Así que gracias!