Iniciar un nuevo proyecto de React

Escoge tu propia aventura

React es una biblioteca que te permite organizar código de UI al separarla en piezas llamadas componentes. React no se preocupa por el enrutamiento o el manejo de datos. Esto significa que hay varias formas de comenzar un proyecto en React:

• Comenzar con un archivo HTML y una etiqueta script. Esto no requiere una configuración de Node.js, pero ofrece funcionalidades limitadas.
• Comenzar con una configuración mínima con solo una cadena de herramientas (toolchain) y añadir funcionalidades a tu proyecto mientras se hagan necesarias. (Estupendo para aprender)!
• Comenzar con un framework más rígido con funcionalidades comunes ya incluidas.

Iniciándote con una cadena de herramientas de React

Si estás aprendiendo React, te recomendamos Create React App. Es la forma más popular de probar React y de construir una nueva aplicación de una sola página del lado del cliente. Está hecha para React pero sin opiniones para el enrutamiento o la carga de datos:

Primero, instala Node.js. Luego abre tu terminal y ejecuta esta línea para crear un proyecto:

Ahora puedes ejecutar tu aplicación con:

Para más información, consulta la guía oficial.

Create React App no maneja la lógica del backend o las bases de datos. Puedes usarla con cualquier backend. Cuando construyes un proyecto, obtendrás una carpeta con código estático de HTML, CSS y JS. Dado que Create React App no puede beneficiarse de lo que ofrece el servidor, no proporciona el mejor rendimiento. Si buscas mejores tiempos de carga y funcionalidades integradas como enrutamiento y lógica del lado de servidor, recomendamos que uses en su lugar un framework.

Alternativas populares

• Vite
• Parcel

Construir con un framework con todas las funcionalidades

Si estás pensando en comenzar un proyecto listo para producción, Next.js es un muy buen lugar para comenzar. Next.js es un framework popular y ligero para aplicaciones hechas con React ya sean estáticas o renderizadas del lado del servidor. Viene preempaquetado con funcionalidades como enrutamiento, estilos, y renderizado del lado del servidor, lo que permite comenzar un proyecto rápidamente.

El tutorial Next.js Foundations es una estupenda introducción a cómo construir con React y Next.js.

Alternativas populares

• Gatsby
• Remix
• Razzle

Cadenas personalizadas

Puede que prefieras crear y configurar tu propia cadena de herramientas. Una cadena de herramientas generalmente está compuesta por:

• Un manejador de paquetes te permite instalar, actualizar y manejar paquetes de terceros. Manejadores de paquetes populares: npm (integrado en Node.js), Yarn, pnpm.
• Un compilador te permite compilar para los navegadores funcionalidades modernas del lenguaje y sintaxis adicional como JSX o anotaciones de tipo. Compiladores populares: Babel, TypeScript, swc.
• Un bundler (empaquetador) te permite escribir código modular y mezclarlo en paquetes más pequeños para optimizar el tiempo de carga. Bundlers populares: webpack, Parcel, esbuild, swc.
• Un minificador hace tu código más compacto para que cargue más rápido. Minificadores populares: Terser, swc.
• Un servidor maneja las peticiones al servidor para que puedas renderizar componentes en HTML. Servidores populares: Express.
• Un linter chequea tu código buscando errores comunes. Linters populares: ESLint.
• Un test runner (sistema de ejecución de pruebas) te permite ejecutar tus pruebas contra tu código. Test runners populares: Jest.

Si prefieres configurar tu propia cadena de herramientas desde cero, consulta esta guía que recrea algunas de las funcionalidades de Create React App. Un framework usualmente también proporcionará una solución para enrutamiento y carga de datos. En un proyecto más grande, puede que también quieras manejar múltiples paquetes en un solo repositorio con una herramienta como Nx o Turborepo.