Configurar un frontend moderno ya no implica pelear con archivos de configuración interminables. Con React, TypeScript y Vite puedes levantar un proyecto en minutos usando un asistente de línea de comandos que automatiza la estructura, los paquetes y la compilación. Esta guía te muestra el flujo completo, paso a paso, desde la terminal hasta ver tu sitio corriendo en el navegador.

¿Qué es Vite y por qué usarlo con React y TypeScript?

Vite es una herramienta que genera plantillas de proyectos previamente construidos para acelerar el arranque de un frontend. Combinada con React, te permite trabajar con archivos .tsx en lugar de .ts, lo que abre la puerta a JSX dentro de TypeScript [03:30].

¿Qué es JSX? Es una metodología de trabajo basada en JavaScript XML que permite escribir estructuras tipo HTML dentro de archivos JavaScript o TypeScript. React la usa de forma nativa y por eso los archivos llevan la extensión .tsx.

La ventaja es clara: en lugar de configurar manualmente compilador, paquetes y estructura, recibes todo listo desde el primer comando.

¿Cómo crear el proyecto React paso a paso?

El flujo arranca en VS Code con una carpeta nueva llamada react. Desde la terminal, ubicado en esa carpeta, ejecutas el asistente de Vite y respondes unas preguntas rápidas.

Comandos para inicializar la plantilla

Estos son los pasos exactos que debes seguir en orden:

1. npm create vite@latest para lanzar el asistente.
2. Escribir el nombre del proyecto, por ejemplo plantilla-platzi.
3. Confirmar el nombre del paquete que aparece en package.json.
4. Seleccionar la opción React dentro de los frameworks disponibles (Vanilla, Vue, React).
5. Elegir la variante TypeScript + SWC, que es la opción número dos.

Una vez creada la plantilla, el propio asistente te indica los siguientes movimientos: entrar a la carpeta del proyecto, instalar dependencias y ejecutar el servidor de desarrollo.

Comandos para instalar y ejecutar

Dentro de la carpeta plantilla-platzi corres:

• npm install para descargar los paquetes que la plantilla necesita. En el ejemplo se agregaron 141 paquetes [01:50].
• npm run dev para levantar el servidor local.

La terminal te devuelve una URL con el puerto donde tu aplicación está corriendo. Puedes abrirla directamente desde VS Code o copiarla en el navegador. Verás la plantilla por defecto con un botón contador que incrementa en uno cada clic.

¿Cómo está organizada la estructura de un proyecto Vite con React?

Al expandir la carpeta plantilla-platzi encuentras dos directorios clave: src y public. Dentro de src vive el archivo App.tsx, que contiene el HTML dinámico que se despliega en el navegador.

¿Para qué sirve App.tsx? Es el componente raíz donde defines la estructura visual de tu aplicación React. Modificar su contenido cambia lo que ves en el navegador, casi siempre con recarga automática.

Si te ubicas en la línea 22 de App.tsx verás el texto count is junto al contador. Cambiarlo por contador: y guardar basta para que el sitio se actualice al refrescar el navegador [03:50].

Archivos de configuración tsconfig

El archivo tsconfig.json aquí no tiene la estructura tradicional. En su lugar, referencia dos archivos: tsconfig.app.json y tsconfig.node.json. Cada uno declara sus propias compilerOptions y paquetes específicos.

• tsconfig.app.json: configura la compilación del código de la aplicación.
• tsconfig.node.json: maneja la configuración del entorno de Node usado por Vite.
• tsconfig.json: actúa como orquestador que llama a los dos anteriores.

Esta separación mantiene limpio el setup y permite ajustar cada parte sin tocar la otra.

¿Qué hace el comando build en package.json?

Dentro de package.json, en la sección scripts, vive el comando build que ejecuta tsc. Ese es el compilador de TypeScript, y es el responsable de transformar todo tu código .tsx y .ts en JavaScript listo para producción [05:30].

La cadena funciona así: cuando corres npm run dev, package.json dispara la compilación apoyándose en los tsconfig para saber cómo procesar cada archivo. Todo este encadenamiento queda transparente para ti como desarrollador, que es justo el valor de usar un framework como React con Vite.

¿Qué ventajas ofrece esta plantilla frente a configurar todo a mano?

Montar un proyecto sin plantilla implica configurar compilador, instalar paquetes uno por uno y conectar manualmente HTML, CSS y JavaScript. Con esta plantilla obtienes lo siguiente desde el primer minuto:

• Archivos .tsx ya listos para JSX y React.
• Configuración de TypeScript dividida en app y node.
• Servidor de desarrollo con recarga automática vía npm run dev.
• Comando de compilación build enlazado a tsc.
• Estructura src y public que separa código fuente de assets estáticos.

La plantilla es un punto de partida, no una camisa de fuerza. Puedes quitar componentes, agregar librerías o reorganizar carpetas según lo que tu proyecto necesite.

¿Ya intentaste levantar tu primera plantilla con Vite y React? Cuéntame en los comentarios qué cambiarías del setup por defecto.