¿Sabes cómo crear una aplicación con create-react-app? React es una librería JavaScript que nos permite crear y diseñar interfaces de usuario en el proceso de desarrollar aplicaciones de una sola página. Aunque podemos crear estas aplicaciones desde cero con el uso de webpack, la herramienta create-react-app nos facilita este proceso al darnos un ambiente con toda la configuración que necesitamos ya determinada. En este post, te enseñaremos a crear una aplicación con create-react-app para que puedas empezar tus proyectos inmediatamente.
¿Cómo crear una aplicación con create-react-app?
Para crear una aplicación con create-react-app, lo primero que debemos hacer es instalar esta herramienta en nuestro terminal. Para ello, tenemos dos opciones. Podemos coger el código del paquete npm que nos sugiere create-react-app.dev e instalarlo a nivel global con npm install-g o podemos utilizar el npx. Esta segunda opción debería funcionarte si tienes instalado Node desde la versión 16.13. Entonces, utilizando Node, podemos escribir npx create-react-app y darle el nombre a la carpeta que va a contener nuestra aplicación.
Una vez tengamos el código de instalación, nuestra terminal creará un directorio a la carpeta que hemos definido y empezará a descargar los paquetes necesarios para crear nuestra aplicación. Ten presente que, al crear una aplicación con create-react-app, esta herramienta se encargará de instalar React, ReactDOM y React-scripts, por lo que no necesitas haber instalado estos paquetes previamente. Cuando veas este proceso de instalación, notarás que no ves herramientas como webpack o babel. Esto sucede porque create-react-app maneja todas estas herramientas internamente a través de React-scripts.
Una vez tengamos instalados los paquetes anteriores, tendrás a tu disposición una serie de comandos. A continuación, te explicamos cuáles son los comandos que encontrarás al crear una aplicación con create-react-app:
- npm start: este comando nos permite iniciar la aplicación en modo de desarrollo. Ten presente que puedes utilizar npm o yarn para acceder a este comando. Sin embargo, si ya tienes Node, será más fácil utilizar npm, pues viene por defecto con esta herramienta, mientras que yarn debe instalarse.
- npm test: este comando inicializa el test tunner.
- npm run build: este comando crea el JavaScript final preparado para producción. Es decir, este comando coge todo el código que le hemos metido a nuestra aplicación y nos genera los estáticos finales para el entorno de producción.
- npm run eject: al crear una aplicación con create-react app, no vemos toda la configuración que sucede con Babel y webpack. El comando npm run eject nos permite revelar toda esta configuración para acceder a ella y modificarla. Este comando no es muy utilizado, pues una vez lo insertamos no podemos dar vuelta atrás. Es decir, una vez has definido el eject no puedes regresar al estado anterior.
Una vez que están instalados los paquetes y creada la aplicación, podemos acceder a nuestra carpeta insertando cd nombre de la carpeta y abrir nuestro código. En nuestro caso, hemos abierto este código en Visual Studio Code. Allí, encontramos un ambiente con el nombre que le hemos dado a la carpeta. Dentro de este ambiente, verás una carpeta llamada node-modules. En este ambiente, también se ha hecho la instalación de todas las librerías necesarias para crear una aplicación. Finalmente, también verás tu archivo package.json, en donde podrás leer todas las dependencias instaladas por create-react-app.
Para conocer más sobre lo que encontrarás en este ambiente, te recomendamos leer nuestro post sobre el código de una aplicación creada con create-react-app.
Ahora que sabes cómo crear una aplicación con create-react-app, ¡es el momento de dar un paso más y empezar a usar esta herramienta para tus propios proyectos! Aun así, todavía queda mucho por conocer para convertirte en un experto del desarrollo web.
Para aprender cómo desarrollar todo tipo de aplicaciones, no solo con React sino también con otros lenguajes de programación para la web como JavaScript, CSS y HTML, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. En este programa de formación intensiva aprenderás la teoría detrás de estos lenguajes de programación y los pondrás en práctica al crear tus propios proyectos en compañía de nuestros profesores. ¡Te esperamos!
