Estructura del proyecto

Ahora que hemos creado nuestro nuevo proyecto React con Vite, vamos a explorarlo un poco para saber de qué está compuesto el proyecto y donde podemos trabajar.

node_modules

La primer carpeta que encontramos es node_modules, en esta carpeta se instalan todas las bibliotecas que lleguemos a ocupar y las que ya ocupa actualmente Vite. Nunca tendrás que tocar esta carpeta en este curso, esta carpeta es 100% administrada por Vite npm.

public

La siguiente carpeta es public, aquí es donde colocaremos nuestros assets como imagenes, videos, fuentes o cualquier otro recurso público, hasta PDFs.

src

La siguiente carpeta es src o source. En esta carpeta, como su nombre lo dice, se encuentra el código fuente de nuestra aplicación. Aquí encontraremos el componente principal que es App.tsx.

Ahora, no tienes que preocuparte por el código que ya se encuentra aquí, porque vamos a borrarlo por completo para sustituirlo por el que escribirás tú mismo. Lo único que hay que notar es el único componente que es el componente App.

Fuera

Fuera de la carpeta encontraremos algunos otros archivos, como index.html. Este archivo es el archivo de entrada de nuestra aplicación, aquí podemos ver el div con id root que React utiliza para colocar el componente App.

Debajo de ese div, tenemos enlazado el archivo de nuestro código.

También encontraremos el archivo package.json, en este archivo podemos encontrar información acerca de nuestro proyecto, como el nombre, descripción, scripts que podemos ejecutar y todas las dependencias instaladas. Esta es la función de este archivo, contener las listas de información del proyecto.

Podemos observar las dos dependencia que ahora mismo tiene nuestro proyecto, React que usaremos para construir componentes y ReactDOM que lo que usamos para dibujar nuestros componente en el HTML. Las devDependencies son librerías que solo se usarán en nuestra computadora, estas dependencias no serán publicadas con tu proyecto en producción, solo son para nuestro uso mientras programamos.

config files

Por ultimo, tenemos los archivos de configuración tanto de TypeScript como de Vite. Realmente nunca tendrás que tocar estos archivos, a menos claro que seas un usuario avanzado.

Y ya está, esta es la estructura básica de un proyecto Vite con React.