Lección 2 de 13 · Lectura y práctica
Configurando tu proyecto React
Creando tu primer proyecto React Antes de escribir componentes necesitas un proyecto configurado: un servidor de desarrollo, un empaquetador y la estructura de archivos. Hoy la forma recomendada es usar Vite, una herramienta.
Del concepto a la práctica
Taller de esta lección
Configurar un proyecto no consiste solo en ejecutar un comando: también debes comprobar qué archivo inicia la aplicación y qué script reproduce el arranque. Trabaja con una carpeta vacía y conserva el nombre del proyecto para que los comandos sean repetibles.
Ejemplo resuelto
npm create vite@latest biblioteca-local -- --template react
cd biblioteca-local
npm install
npm run devDespués identifica el punto de entrada y el componente principal en el árbol de archivos. No necesitas cambiar la configuración para crear el primer flujo; basta con localizar dónde se monta la aplicación y dónde se edita la vista.
Pruébalo
Crea el proyecto con el nombre indicado.
Instala dependencias dentro de esa carpeta.
Arranca el servidor de desarrollo.
Cambia el texto visible del componente principal.
Comprueba tu resultado
La página debe mostrar el texto nuevo tras guardar el archivo y el proceso debe seguir activo.
Error frecuente: ejecutar npm install en la carpeta padre; corrígelo entrando primero en biblioteca-local y verifica que allí exista package.json. No afirmes que el servidor está funcionando si no lo has iniciado localmente.
Versión y evidencia del arranque
La guía actual de Vite exige Node20.19+ o22.12+, y algunas plantillas pueden pedir una versión superior: Node18 del texto histórico ya no basta para vite@latest. Usa una versión LTS compatible y atiende engines del proyecto generado. Registra node --version, npm --version y las versiones resueltas en package.json/lockfile para poder repetir el ejercicio; latest es una selección móvil, no un entorno fijado para siempre.
En la plantilla React de Vite, index.html referencia el módulo src/main.jsx y este monta App en el nodo root. Cambia src/App.jsx para mostrar Biblioteca local y confirma la URL real que imprime el servidor:5173 es habitual, pero puede elegirse otro puerto si está ocupado. La comprobación tiene tres piezas: proceso activo, navegador con el texto nuevo y consola sin error del ejercicio. Una carpeta generada no acredita ninguna de ellas. npm run dev inicia desarrollo, no publica una web. Guarda los archivos y detén solo tu proceso al terminar. Requisitos y scripts de Vite.
Mapa de prácticaUna condición decide qué camino ejecuta el programa. Un bucle repite una operación mientras queden elementos, y termina cuando la lista se agota. Separar ambas ideas ayuda a seguir el flujo y comprobar casos límite.
Ver la infografía en tamaño completo ↗Creando tu primer proyecto React
Antes de escribir componentes necesitas un proyecto configurado: un servidor de desarrollo, un empaquetador y la estructura de archivos. Hoy la forma recomendada es usar Vite, una herramienta moderna y muy rápida.
Nota
Necesitas tener instalado Node.js (versión 18 o superior). Comprueba tu versión con node -v en la terminal.
Opción recomendada: Vite
Vite crea el proyecto, instala lo mínimo necesario y arranca un servidor con recarga instantánea:
# 1. Crear el proyecto con la plantilla de React
npm create vite@latest mi-app -- --template react
# 2. Entrar a la carpeta
cd mi-app
# 3. Instalar las dependencias
npm install
# 4. Arrancar el servidor de desarrollo
npm run devAl terminar verás una URL como http://localhost:5173. Ábrela en el navegador y tendrás tu aplicación funcionando con recarga en caliente.
Estructura típica del proyecto
mi-app/
├── node_modules/ (dependencias instaladas)
├── public/ (archivos estáticos)
├── src/
│ ├── App.jsx (componente principal)
│ ├── App.css
│ ├── main.jsx (punto de entrada)
│ └── index.css
├── index.html
├── package.json (scripts y dependencias)
└── vite.config.jsLos archivos clave
main.jsx: el punto de entrada
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)App.jsx: tu componente principal
function App() {
return (
<div>
<h1>¡Hola, React!</h1>
</div>
)
}
export default App¿Vite o Create React App?
Durante años se usó create-react-app (CRA), pero hoy está prácticamente sin mantenimiento y es notablemente más lento al arrancar y recompilar. Para proyectos nuevos, usa Vite. Verás CRA en proyectos antiguos, pero no es la recomendación actual.
Extensiones útiles para VS Code
- ES7+ React/Redux snippets: atajos como
rafcepara crear componentes al instante. - Prettier: formatea el código automáticamente al guardar.
- ESLint: detecta errores y malas prácticas mientras escribes.
¿Qué comando arranca el servidor de desarrollo en un proyecto creado con Vite?
dev, así que se arranca con npm run dev. npm start es el de Create React App.Ejercicio práctico
Objetivo: crear y arrancar tu propio proyecto React desde cero.
- Crea un proyecto llamado
mi-primer-reactcon Vite. - Instala dependencias y arráncalo con
npm run dev. - Edita
App.jsxpara que muestre tu nombre dentro de un<h1>y guarda: observa la recarga en caliente.
Entregable: una captura de pantalla del navegador mostrando tu nombre y el contenido final de App.jsx.
Para recordar
- Vite es la forma recomendada hoy para crear proyectos React nuevos.
main.jsxes el punto de entrada que monta<App />en el DOM.- El servidor de desarrollo se arranca con
npm run devy ofrece recarga en caliente.
Sigue con React Fundamentals
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.