Crear un proyecto React con Vite y TypeScript
Para practicar usaremos Vite, una herramienta que prepara el proyecto y ofrece un servidor de desarrollo. React sigue siendo la biblioteca que construye la interfaz. Utilizaremos TypeScript para detectar errores en los datos que pasan entre componentes.
Crear y ejecutar #
Instala una versión LTS de Node.js compatible con Vite. Comprueba node --version y npm --version en una terminal. Si la herramienta indica que necesitas una versión superior, actualiza Node.js antes de continuar.
Ejecuta estos comandos en la carpeta donde guardas tus proyectos:
1npm create vite@latest mi-react -- --template react-ts 2cd mi-react 3npm install 4npm run dev
react-ts selecciona la plantilla de React con TypeScript. npm install descarga las dependencias declaradas en package.json. Abre la dirección que indique la terminal; normalmente empieza por http://localhost:5173, aunque el puerto puede cambiar si está ocupado.
Archivos que vas a utilizar #
| Archivo | Para qué sirve |
|---|---|
index.html | Contiene el elemento donde se monta la aplicación |
src/main.tsx | Conecta React con ese elemento mediante createRoot |
src/App.tsx | Contiene el componente principal de partida |
src/App.css | Define estilos del ejemplo inicial |
package.json | Declara dependencias y comandos |
Sustituye el contenido de src/App.tsx por:
1export default function App() { 2 return <h1>Mi primer proyecto React</h1>; 3}
Guarda y comprueba que el navegador muestra el cambio. En los temas siguientes puedes copiar cada ejemplo principal a App.tsx. El nombre de su función puede ser distinto de App si mantiene la exportación por defecto. Cuando se indican varios archivos, crea todos respetando sus rutas e importaciones.
Desarrollo y producción #
1npm run build 2npm run preview
build genera los archivos de producción en dist. preview permite revisarlos localmente; no sustituye un despliegue. Para detener el servidor de desarrollo, usa Ctrl+C en su terminal.
La plantilla puede envolver la aplicación en StrictMode. En desarrollo esto añade comprobaciones y puede repetir renders y un ciclo de preparación y limpieza de efectos. Lo estudiaremos al llegar a useEffect.
Prueba tú #
Añade un párrafo a App.tsx dentro de un fragmento y comprueba el resultado. Después genera la versión de producción.
Consulta la guía oficial de Vite para los requisitos de la versión que estés instalando.
Cuestionario del tema #
Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.