| title |
|---|
Iniciar un nuevo proyecto de React |
Si estás aprendiendo React o estás considerando añadirlo a un proyecto existente, puedes comenzar rápidamente por añadir React a cualquier página HTML con etiquetas script. ¡Si tu proyecto va a necesitar muchos componentes y muchos archivos, podría ser hora de que consideres la opción que hay debajo!
React es una biblioteca que te permite organizar código de UI al separarla en piezas que se nombran componentes. React no se preocupa por el enrutamiento o el manejo de datos. Para estas funcionalidades necesitarás usar bibliotecas de terceros o escribir tus propias soluciones. Esto significa que hay varias formas de comenzar un proyecto en React:
- 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.
- Comenzar con un framework más rígido con funcionalidades comunes ya incluidas.
Ya sea que estás comenzando a aprender, que estás buscando construir algo grande o que quieres configurar tu propia cadena de herramientas, esta guía te indicará el camino apropiado.
Si justo estás aprendiendo a usar React, te recomendamos Create React App, la forma más popular de probar las funcionalidades de React y una forma magnífica de construir una aplicación de una sola página del lado del cliente. Create React App es una cadena de herramientas sin demasiadas opiniones y configurada solo para React. Las cadenas de herramientas te ayudan con cosas como:
- Escalar a muchos archivos y componentes
- Usar bibliotecas de terceros de npm
- Detectar errores comunes de forma temprana
- Editar CSS y JS en vivo en un entorno de desarrollo
- Optimizar el resultado para producción
¡Puedes iniciarte con Create React App con una sola línea de código en tu terminal! (¡Asegúrate de tener instalado Node.js!).
npx create-react-app my-app
Ahora puedes ejecutar tu aplicación con:
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; solo crea una línea de construcción. Esto significa que puedes utilizar cualquier backend que desees. ¡Pero si estás buscando más funcionalidades como enrutamiento y lógica del lado del servidor, continúa leyendo!
Create React App es magnífica para iniciar a trabajar con React, pero si quisieras una cadena de herramientas aún más ligera, puedes probar alguna de estas otras que son populares:
Si estás pensando en construir un proyecto más grande 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.
Comienza a construir con Next.js usando la guía oficial.
- Gatsby te permite generar sitios web estáticos con React y GraphQL.
- Razzle es un framework para el renderizado del lado del servidor que no requiere ninguna configuración, pero ofrece más flexibilidad que Next.js.
Puede que prefieras crear y configurar tu propia cadena de herramientas. Una cadena de herramientas de construcción para JavaScript consiste en:
- Un manejador de paquetes-te permite instalar, actualizar y manejar paquetes de terceros. Yarn y npm son dos manejadores de paquetes populares.
- Un bundler (empaquetador)-te permite escribir código modular y mezclarlo en pequeños paquetes para optimizar los tiempos de carga. Webpack, Snowpack y Parcel son varios bundlers populares.
- Un compilador-te permite escribir código moderno de JavaScript que funciona en navegadores más antiguos. Babel es un ejemplo.
En un proyecto más grande, puede que también quieras tener una herramienta que maneje múltiples paquetes en un solo repositorio. Nx es un ejemplo de este tipo de herramienta.
Si prefieres configurar tu propia cadena de herramientas desde cero, consulta esta guía que recrea algunas de las funcionalidades de CreateReactApp.