⚡ Cómo empezar con React

⚡ Cómo empezar con React

Aprende a configurar tu entorno, elegir una herramienta de compilación y crear tu primera aplicación React desde cero.

---

📌 Índice de esta entrada:

1. 🖥️ Configuración del entorno (Node.js y npm)
2. ⚙️ Elegir una herramienta de compilación (Vite o Create React App)
3. 🚀 Crear la aplicación React
4. 📦 Instalar dependencias
5. 💻 Ejecutar la aplicación React
6. 🔧 Próximos pasos

---

🖥️ Configuración del entorno

Para usar React en producción, necesitas Node.js que incluye npm. Puedes verificar la instalación ejecutando en tu terminal:

node -v
    

Si Node.js está instalado, verás un número de versión, por ejemplo: v22.15.0. Si no, deberás instalar Node.js desde https://nodejs.org/.

⚙️ Elegir una herramienta de compilación

Existen varias formas de crear un proyecto React. Las más populares son:

• Create React App: clásico y sencillo para principiantes.
• Vite: más rápido y moderno, ideal para proyectos nuevos.

En este tutorial usaremos Vite. Instálalo globalmente ejecutando:

npm install -g create-vite
    

🚀 Crear la aplicación React

Ejecuta el siguiente comando para crear una nueva aplicación llamada my-react-app usando la plantilla de React:

npm create vite@latest my-react-app -- --template react
    

Presiona y y luego Enter si te solicita instalar paquetes adicionales. Al finalizar, tendrás la estructura básica de tu proyecto lista para instalar dependencias.

📦 Instalar dependencias

Ve al directorio del proyecto y ejecuta:

cd my-react-app
npm install
    

Esto instalará todos los paquetes necesarios para que tu aplicación funcione correctamente.

💻 Ejecutar la aplicación React

Para arrancar tu aplicación en desarrollo, ejecuta:

npm run dev
    

Esto levantará un servidor local. Abre tu navegador en http://localhost:5173/ y verás tu primera aplicación React funcionando.

🔧 Próximos pasos

• Familiarízate con la estructura de carpetas de React y Vite.
• Aprende a crear componentes y usar JSX.
• Explora las props y el estado para hacer tu app dinámica.
• Practica creando pequeños proyectos antes de pasar a aplicaciones más grandes.

---

💡 Consejo: Mantén tu entorno actualizado y el flujo de trabajo limpio. Vite es ideal para proyectos modernos debido a su rapidez y facilidad de configuración.

← Volver al índice