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

Lorsque vous créez un projet React avec Vite, un ensemble de fichiers et de dossiers est généré pour constituer la **structure du projet**. À première vue, cette structure peut sembler complexe, mais il n'est pas nécessaire de tout comprendre immédiatement.

Découverte de l'utilité de chaque dossier et fichier principal, ainsi que des parties avec lesquelles vous travaillerez le plus souvent.

## Aperçu de la racine du projet
Un projet Vite React contient généralement les éléments suivants à la racine :
- node_modules ;
- public ;
- src ;
- index.html ;
- package.json ;
- package-lock.json ;
- vite.config.js ;
- eslint.config.js ;
- .gitignore ;
- README.md ;

Présentation des éléments les plus importants.

Contient tous les paquets tiers et dépendances. Créé automatiquement après l'exécution de `npm install`. **Ne pas modifier** ce dossier et généralement à exclure du contrôle de version.

Stocke les ressources statiques telles que les images et les icônes. Les fichiers ici sont accessibles directement par le navigateur.

Dossier principal contenant le code React. Inclut les composants, les styles et la logique de l'application. **C'est le dossier dans lequel vous travaillerez le plus.**

Point d'entrée HTML unique de l'application. React rend toute l'application dans ce fichier à l'aide d'un élément racine.

Décrit la configuration du projet. Contient les dépendances et les scripts comme `npm run dev`.

Verrouille les versions exactes des dépendances. Garantit des installations cohérentes sur différentes machines.

Fichier de configuration pour Vite. Contrôle la façon dont l'application est construite et servie. Généralement non modifié par les débutants.

Spécifie les fichiers et dossiers à ignorer par Git.

Définit les règles de qualité et de vérification du code.

Documentation de base du projet et instructions.

Quel dossier contient la majorité du code de votre application React ?

Découvrez les principes fondamentaux de la création d'interfaces utilisateur avec React. Concentrez-vous sur les composants, le JSX, le flux de données, l'état et les effets secondaires utilisés dans les applications React courantes.

Découvrez ce qu'est React et comment il génère des interfaces utilisateur. Mise en avant des composants, de la syntaxe JSX et de l'affichage des éléments à l'écran.

Approfondissement du passage de données entre les composants et du contrôle de l'affichage de l'interface utilisateur. Accent mis sur les props, le rendu conditionnel et le rendu de listes de données.

Découvrez comment les interactions utilisateur et les données externes modifient l'interface utilisateur au fil du temps. Accent mis sur la gestion de l'état et le traitement des effets secondaires avec les hooks React.

Explorer les méthodes courantes de stylisation des composants React. Mettre l'accent sur l'application des styles à l'aide de styles en ligne et de CSS externe.

Découvrez comment exécuter un projet React et comprendre sa structure. Concentrez-vous sur le démarrage d’un projet avec Vite et la navigation dans les fichiers du projet.

Compréhension de la Structure d'un Projet React

Aperçu de la racine du projet