Curso #24: Estructurando los directorios de un proyecto con React y Vite

Posted by

React + Vite Curso #24

Estructura de directorios de un proyecto

En este curso #24 de React + Vite, vamos a hablar sobre la estructura de directorios que se debe seguir al crear un proyecto con estas tecnologías.

Directorio raíz

El directorio raíz de un proyecto en React + Vite debe contener los siguientes archivos y carpetas:

  • index.html: Este archivo es el punto de entrada de la aplicación y debe contener el elemento <div id="app"></div> donde se montará la aplicación.
  • package.json: Este archivo es el manifiesto del proyecto y debe incluir las dependencias y scripts necesarios.
  • node_modules: Esta carpeta contiene las dependencias de la aplicación instaladas a través de npm.
  • src: Esta carpeta es donde se almacenará el código fuente de la aplicación, incluyendo componentes, estilos, imágenes, etc.

Dentro de la carpeta src

Dentro de la carpeta src, se deben seguir las siguientes convenciones de estructura de directorios:

  • components: En esta carpeta se deben guardar los componentes de React de la aplicación.
  • styles: En esta carpeta se deben guardar los estilos CSS de la aplicación.
  • assets: En esta carpeta se deben guardar las imágenes, fuentes u otros recursos estáticos de la aplicación.
  • pages: En esta carpeta se deben guardar las páginas principales de la aplicación, organizadas por rutas.

Conclusion

Seguir una estructura de directorios clara y definida en un proyecto de React + Vite es crucial para mantener un código organizado y fácil de mantener. Siguiendo estas convenciones, será más sencillo para otros desarrolladores entender el proyecto y colaborar en su desarrollo.