React: Integración con TypeScript
Aprende cómo integrar TypeScript en proyectos React 19 siguiendo las mejores prácticas y recomendaciones actuales para 2024.
Aprende React GRATIS y certifícateLa combinación de React 19, TypeScript y Vite permite crear aplicaciones web eficientes y mantenibles. En esta lección, exploraremos cómo configurar un proyecto de React 19 con TypeScript usando Vite, una herramienta de construcción rápida y moderna.
Requisitos previos
Antes de comenzar, asegúrate de tener instalados Node.js y npm. También necesitarás conocimientos básicos de React y TypeScript.
Instalación de Vite
Para iniciar un proyecto con Vite, abre tu terminal y ejecuta el siguiente comando:
npm create vite@latest my-react-app --template react-ts
Este comando crea un nuevo proyecto de React con soporte para TypeScript. Navega al directorio del proyecto:
cd my-react-app
Instala las dependencias necesarias:
npm install
Configuración de TypeScript
Vite ya incluye TypeScript por defecto cuando usas la plantilla react-ts
. Sin embargo, es importante verificar la configuración de tsconfig.json
para asegurarnos de que esté optimizada para React 19:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "react-jsx",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"]
}
Estructura del proyecto
La estructura del proyecto generado por Vite es la siguiente:
my-react-app/
├── node_modules/
├── public/
├── src/
│ ├── App.tsx
│ ├── main.tsx
│ └── vite-env.d.ts
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
Integración de componentes con TypeScript
Vamos a crear un componente funcional simple en TypeScript. Crea un archivo Hello.tsx
dentro del directorio src
:
import React from 'react';
interface HelloProps {
name: string;
}
const Hello: React.FC<HelloProps> = ({ name }) => {
return <h1>Hola, {name}!</h1>;
};
export default Hello;
Este componente acepta una propiedad name
de tipo string
y la muestra en un encabezado.
Uso del componente en la aplicación principal
Modifica App.tsx
para utilizar el nuevo componente Hello
:
import React from 'react';
import Hello from './Hello';
const App: React.FC = () => {
return (
<div>
<Hello name="Mundo" />
</div>
);
};
export default App;
Ejecución del proyecto
Para ejecutar el proyecto, utiliza el siguiente comando:
npm run dev
Vite iniciará un servidor de desarrollo y podrás ver tu aplicación en el navegador accediendo a http://localhost:3000
.
Beneficios de usar Vite con React 19 y TypeScript
- Velocidad: Vite es extremadamente rápido gracias a su enfoque en la compilación instantánea.
- Modularidad: La configuración de TypeScript en Vite es sencilla y permite una integración fluida con React 19.
- Mantenibilidad: TypeScript añade tipado estático, facilitando la detección de errores y mejorando la calidad del código.
Con esta configuración, estarás listo para desarrollar aplicaciones de React 19 utilizando TypeScript y Vite, optimizando tanto el rendimiento como la mantenibilidad del código.
Lecciones de este módulo de React
Lecciones de programación del módulo Integración con TypeScript del curso de React.