Summary  
This chapter explains how a Vite-generated React project is organized, detailing the purpose of key files and folders (like src, public, configuration files, and dependencies) and highlighting the parts developers work with most.  

General domain of usage  
Front-end web development

Cuando creas un proyecto de React con Vite, este genera un conjunto de archivos y carpetas que conforman la **estructura del proyecto**. A primera vista, esta estructura puede parecer abrumadora, pero no es necesario comprender todo de inmediato.

Explora para qué se utiliza cada carpeta y archivo principal y cuáles son las partes con las que trabajarás con mayor frecuencia.

## Descripción general de la raíz del proyecto
Un proyecto de Vite React normalmente contiene los siguientes elementos en el nivel raíz:
- node_modules;
- public;
- src;
- index.html;
- package.json;
- package-lock.json;
- vite.config.js;
- eslint.config.js;
- .gitignore;
- README.md;

Analicemos los más importantes.

Contiene todos los paquetes y dependencias de terceros. Se crea automáticamente después de ejecutar `npm install`. **No editar** esta carpeta y normalmente se excluye del control de versiones.

Almacena recursos estáticos como imágenes e iconos. Los archivos aquí pueden ser accedidos directamente por el navegador.

La carpeta principal donde reside el código de React. Contiene componentes, estilos y lógica de la aplicación. **Esta es la carpeta en la que trabajarás más.**

El único punto de entrada HTML de la aplicación. React renderiza toda la aplicación en este archivo utilizando un elemento raíz.

Describe la configuración del proyecto. Contiene dependencias y scripts como `npm run dev`.

Bloquea las versiones exactas de las dependencias. Garantiza instalaciones consistentes en diferentes equipos.

Archivo de configuración para Vite. Controla cómo se construye y sirve la aplicación. Normalmente no es modificado por principiantes.

Especifica qué archivos y carpetas debe ignorar Git.

Define reglas de calidad de código y linting.

Documentación básica del proyecto e instrucciones.

¿Qué carpeta contiene la mayor parte del código de tu aplicación React?

Explora los fundamentos de la creación de interfaces de usuario con React. Enfócate en componentes, JSX, flujo de datos, estado y efectos secundarios utilizados en aplicaciones React cotidianas.

Explora qué es React y cómo renderiza interfaces de usuario. Enfoque en componentes, sintaxis JSX y visualización de elementos en pantalla.

Profundización en el paso de datos entre componentes y el control de la salida de la interfaz de usuario. Enfoque en props, renderizado condicional y renderizado de listas de datos.

Aprenda cómo las interacciones del usuario y los datos externos modifican la interfaz de usuario a lo largo del tiempo. Enfoque en la gestión del estado y el manejo de efectos secundarios con hooks de React.

Explora formas comunes de estilizar componentes de React. Enfoque en la aplicación de estilos mediante estilos en línea y CSS externo.

Aprenda cómo ejecutar un proyecto React y comprender su estructura. Enfoque en iniciar un proyecto con Vite y navegar por los archivos del proyecto.

Comprensión de la Estructura del Proyecto React

Descripción general de la raíz del proyecto