¿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.

¿Qué encontrarás en este post?

¿Cómo crear una aplicación con create-react-app?

Requisitos previos

Antes de comenzar, asegúrate de tener instalados los siguientes elementos en tu sistema:

Node.js (versión 16.13 o superior)
npm (viene incluido con Node.js) o yarn (opcional)

Instalación de create-react-app

Para instalar create-react-app, tienes dos opciones. Puedes instalarlo globalmente usando npm o utilizar npx para ejecutarlo sin instalación global.

Usando npx

npx create-react-app nombre-de-tu-aplicacion

Usando npm

npm install -g create-react-app
create-react-app nombre-de-tu-aplicacion

Creación de la aplicación

Una vez que hayas ejecutado uno de los comandos anteriores, create-react-app creará un nuevo directorio con el nombre de tu aplicación y descargará todas las dependencias necesarias, incluyendo React, ReactDOM y React-scripts.

Estructura de archivos

Después de la instalación, tendrás la siguiente estructura de archivos:

nombre-de-tu-aplicacion/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

public/: Contiene archivos públicos estáticos.
src/: Contiene los archivos fuente de tu aplicación.
package.json: Lista las dependencias de tu proyecto.

Comandos útiles

Al crear una aplicación con create-react-app, tendrás a tu disposición una serie de comandos:

npm start: Inicia la aplicación en modo de desarrollo.
npm test: Inicializa el test runner.
npm run build: Crea el JavaScript final preparado para producción.
npm run eject: Revela la configuración completa de webpack y Babel.

Ejemplo práctico

Después de instalar y crear tu aplicación, navega al directorio de tu proyecto y abre Visual Studio Code (o tu editor preferido):

cd nombre-de-tu-aplicacion
code .

Para iniciar tu aplicación en modo de desarrollo, ejecuta:

npm start

Esto abrirá una nueva pestaña en tu navegador con tu aplicación React en funcionamiento.

Configuración y personalización

Puedes personalizar tu configuración de create-react-app sin necesidad de ejecutar npm run eject. Por ejemplo, puedes añadir configuraciones específicas para ESLint o Babel utilizando archivos de configuración en el directorio raíz de tu proyecto.

Integración con otras herramientas

Para integrar Redux en tu aplicación, primero instala las dependencias necesarias:

npm install redux react-redux

Luego, configura tu store y provee el store a tu aplicación utilizando el componente Provider de React Redux.

Despliegue de la aplicación

Para desplegar tu aplicación, puedes usar servicios como GitHub Pages, Netlify o Vercel. Por ejemplo, para GitHub Pages:

Añade el paquete gh-pages a tu proyecto: npm install gh-pages --save-dev
Añade los siguientes scripts a tu package.json: "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }
Ejecuta el comando de despliegue: npm run deploy

Actualización de dependencias

Para mantener tu proyecto actualizado, revisa periódicamente las versiones de tus dependencias y actualízalas cuando sea necesario:

//crear una aplicación con create-react-app
npm outdated
npm update

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 Bootcamp Desarrollo Web. 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!