Empezando con React Typescript Vite: nuevo proyecto, ejemplos, estructuras de carpetas

Hay muchas maneras de empezar un proyecto React. En este post, vamos a desglosar cómo crear un nuevo proyecto React Typescript utilizando la moderna herramienta de construcción Vite.

1. Comprueba las herramientas que estás utilizando y sus versiones

Para nuestro proyecto, vamos a utilizar un entorno Node.js, el gestor de paquetes pnpm, y la herramienta de construcción vite, cuyas versiones se muestran a continuación. Trabajaremos en MacOS, pero también debería funcionar en Windows.

Comprobar versiones de node, pnpm, vite

2. Creando un nuevo proyecto con vite

vite soporta el comando create de cualquier gestor de paquetes. Así que puedes ejecutar el siguiente comando para crear un nuevo proyecto sin una instalación global.

Si usas npm, npm create vite@latest.
Si usas yarn, yarn create vite.
Si usas pnpm, pnpm create vite.

A medida que escribas los comandos, se te preguntará paso a paso el nombre de tu proyecto, las librerías que estás utilizando y el lenguaje que estás usando. Al introducir las opciones para cada pregunta se creará un nuevo proyecto basado en la plantilla correspondiente.

Primero introduzca un nombre de proyecto y escriba

Nueva pantalla de presentación del proyecto vite - configuración del nombre

Después de seleccionar react de la lista de librerías,

seleccionar build vite framework

Selecciona Typescript + SWC como lenguaje (si necesitas usar Babel, selecciona Typescript) Esto creará un nuevo proyecto.

select create vite language

SWC es una moderna herramienta de desarrollo JS/TS escrita en Rust de la que se dice que compila entre 20x y 70x más rápido que Babel, que antes se encargaba del desarrollo de React. También tiene otras ventajas como el soporte de WebAssembly y mejoras en el rendimiento de Jest.

Abre el proyecto creado en VScode. La estructura de carpetas tendrá este aspecto

estructura de carpetas del proyecto React creado por create vite

Ahora escribe el comando [package_manager_name] install para instalar el paquete de dependencias escrito en package.json. Cuando finalice la instalación, deberías ver una pantalla como la siguiente.

Ejecuta el resultado: pnpm install result

Si alguno de los paquetes es actualizable, actualice a la última versión como se muestra arriba.

Si utiliza npm, ejecute npm update.
Con yarn, yarn upgrade.
Con pnpm, pnpm upgrade.

Resultado de la ejecución: pnpm upgrade result

Por último, ejecuta el servidor de desarrollo de vite con el comando [nombre_del_gestor_de_paquetes] run dev.

Ejecuta el resultado: pnpm run dev result cli

Si visitas esta URL en un navegador web, verás la página de ejemplo.

react typescript vite sample page

Ahora ya has creado un proyecto básico.

3. Describir los directorios y archivos incluidos en la plantilla

Cuando creas un proyecto a partir de una plantilla, te darás cuenta de que varios directorios y archivos ya están creados para ti. Esto le ahorra la molestia de crearlos desde cero. Sin embargo, es importante entender lo que hace cada uno para que puedas continuar desarrollando, así que vamos a echarles un vistazo uno por uno.

3.1. Paquetes

node_modules/ : Este es el directorio donde están instalados todos los paquetes de dependencias utilizados por este proyecto.
package.json : Un archivo de configuración básico que contiene información como el nombre de este proyecto, versión, tipo de módulo, comandos, y una lista de los paquetes de dependencia que utiliza.

3.2. Relacionados con la aplicación web

src/ : Un directorio que contiene todo el código fuente, incluyendo los archivos .tsx que componen la aplicación web.
public/ : Este directorio contiene todos los archivos estáticos como imágenes, fuentes, etc. utilizados por la aplicación web.
dist/ : Este es el directorio creado cuando se ejecuta una compilación con el comando [nombre_del_gestor_de_paquetes] run build. Después de compilar, empaquetar, etc., aquí es donde se encuentran los archivos desplegables.
index.html : El archivo .html en el que se basa la aplicación web. La aplicación React que construyas se renderizará a través de este archivo.

3.3. Ficheros de configuración

.gitignore: Una lista de directorios y archivos en tu proyecto que Git excluirá. Con la excepción del código fuente y ciertos archivos de configuración, la mayoría de los archivos no necesitan o no quieren ser versionados, así que los ponemos en este archivo.
package-lock.json, yarn.lock, pnpm-lock.yaml: Los archivos de bloqueo para cada gestor de paquetes. Estos archivos mantienen un registro de las versiones exactas instaladas de los paquetes que has instalado y de los paquetes de los que dependen, ayudando a todos en el proyecto a desarrollar en el mismo entorno.
tsconfig.json: Este es el archivo de configuración para el compilador TS, que es responsable de varios ajustes como la versión JS con la que compilar, el directorio desde el que compilar, etc. Su objetivo principal son los archivos .ts que funcionan en el navegador.
tsconfig-node.json : Fichero de configuración para el fichero .ts que se ejecuta en el runtime de Node.js, principalmente. Se crea para configurar el entorno Node en el que se ejecuta vite.
vite.config.ts : Un archivo que puede ser configurado con respecto al proceso de construcción de vite, servidor de desarrollo, etc.

React: Intro