Generar una app React sin usar create-react-app - Tutorial de React.js

En esta lección, vas a ejecutar tu primera aplicación React. Te voy a mostrar cómo hacer. En este caso, estoy utilizando Visual Studio Code, así que voy a abrir la terminal. Para eso voy a la barra superior, presiono View y abro la terminal. En la terminal es donde vamos a incluir los comandos con los cuales vamos a generar y ejecutar nuestras aplicaciones basadas en React. Antes de ejecutar este comando, quisiera mencionarte las diferentes opciones que tienes para crear una aplicación en React. Tradicionalmente, hemos utilizado, y lo vas a encontrar dentro de mucha documentación y tutoriales antiguos, el comando npx create react-app. Este proyecto originalmente desarrollado por React, actualmente se encuentra desactualizado y la comunidad de React recomienda no utilizarlo. Así que cuando encuentres este comando, procura utilizar una versión más actualizada. Puedes encontrar diferentes opciones dentro de la documentación de React que puedes encontrarlo en el sitio react.dev. Acá la recomendación es que utilicemos frameworks de React. Recordemos que React es una librería y podemos utilizar estos frameworks para agregar librerías adicionales y además incluir herramientas, patrones comunes y decisiones de arquitectura ya tomadas para acelerar y hacer más consistente el proceso de desarrollo. Entre las opciones que tienes está Next.js, Remix o Gatsby. Puedes utilizar diferentes opciones y todas ellas te van a generar proyectos listos para producción. En el caso de este curso, utilizaremos la opción llamada Vite. Vite nos va a permitir crear una aplicación muy simple donde nos vamos a poder enfocar específicamente en React. Para crear un proyecto basado en Vite, simplemente vamos a volver a Visual Studio Code y vamos a ejecutar el comando npm create vite. Presionamos Enter, y acá nos va a aparecer un diálogo para configurar esta aplicación que estamos creando. Por ejemplo, vamos a definir el nombre. Vamos a llamar a nuestro proyecto my-project. Presionamos Enter. Acá podemos seleccionar las diferentes opciones que tenemos para crear el proyecto. En este caso, definitivamente vamos a seleccionar React. Y aunque puedes utilizar TypeScript y diferentes combinaciones, en este caso, te recomiendo que, al menos mientras estás dando tus primeros pasos, seleccionemos la opción JavaScript. Listo, ahora tenemos creado un proyecto React utilizando JavaScript. Para entrar y generar los comandos donde vamos a poder trabajar con nuestro proyecto, primero necesitamos acceder a la carpeta en la que está almacenado el código, vemos que acá se encuentra una carpeta llamada My Project, donde está el código que generó Vite. Entonces, entramos a la carpeta con el comando cd y el nombre del proyecto. Ahora vamos a instalar las dependencias relacionadas con este proyecto. Lo hacemos con el comando npm install. Una vez finalizado el proceso de instalación, encontraremos que se acaba de crear una carpeta llamada node_modules. Acá se encuentran todas las dependencias de desarrollo para poder gestionar mi proyecto. Estamos listos, entonces, para ejecutarlo. Para ejecutar nuestro proyecto utilizando Vite, vamos a hacerlo con el comando run npm run , y con el comando, también, dev. Presionamos Enter. Y listo. Con npm run dev, vamos a compilar la aplicación en React y la vamos a tener disponible dentro de un servidor local. En este caso, acá me aparece dentro de la dirección localhost, y me aparece un puerto específico. Pon atención porque posiblemente dentro de tu equipo aparezca con un puerto diferente. Vamos a abrir este enlace y, ahora sí, ya tenemos ejecutándose dentro de un servidor local nuestra primera aplicación React. ¡Felicidades! Acabas de crear tu primera aplicación en React, sin esfuerzo.