Iniciar un nuevo proyecto de React

Si estás iniciando un nuevo proyecto, recomendamos usar una cadena de herramientas (toolchain) o un framework. Estas herramientas proporcionan un entorno de desarrollo cómodo, pero requieren una instalación local de Node.js.

Aprender√°s

  • En qu√© se diferencian las cadenas de herramientas de los frameworks
  • C√≥mo iniciar un proyecto con una cadena de herramientas m√≠nima
  • C√≥mo iniciar un proyecto con un framework con todas las funcionalidades
  • Qu√© hay dentro de las cadenas de herramientas y frameworks populares

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:

Terminal
npx create-react-app my-app

Ahora puedes ejecutar tu aplicación con:

Terminal
cd my-app npm start

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.

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.

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.