Aprender React Integración con TypeScript

La 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.