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

Wenn du ein React-Projekt mit Vite erstellst, generiert es eine Reihe von Dateien und Ordnern, die die **Projektstruktur** bilden. Auf den ersten Blick kann diese Struktur überwältigend wirken, aber du musst nicht alles sofort verstehen.

Untersuche, wofür jeder Hauptordner und jede Datei verwendet wird und mit welchen Teilen du am häufigsten arbeiten wirst.

## Übersicht über das Projektverzeichnis
Ein Vite React-Projekt enthält typischerweise die folgenden Elemente auf der obersten Ebene:
- node_modules;
- public;
- src;
- index.html;
- package.json;
- package-lock.json;
- vite.config.js;
- eslint.config.js;
- .gitignore;
- README.md;

Im Folgenden werden die wichtigsten davon erläutert.

Enthält alle externen Pakete und Abhängigkeiten. Wird automatisch nach dem Ausführen von `npm install` erstellt. **Nicht bearbeiten** und in der Regel von der Versionskontrolle ausschließen.

Speichert statische Ressourcen wie Bilder und Icons. Dateien in diesem Ordner sind direkt über den Browser zugänglich.

Der Hauptordner, in dem sich dein React-Code befindet. Enthält Komponenten, Styles und Anwendungslogik. **Dies ist der Ordner, in dem du am meisten arbeiten wirst.**

Der einzige HTML-Einstiegspunkt der App. React rendert die gesamte Anwendung in diese Datei mithilfe eines Root-Elements.

Beschreibt die Projektkonfiguration. Enthält Abhängigkeiten und Skripte wie `npm run dev`.

Fixiert exakte Abhängigkeitsversionen. Sorgt für konsistente Installationen auf verschiedenen Rechnern.

Konfigurationsdatei für Vite. Steuert, wie die App gebaut und bereitgestellt wird. Wird von Einsteigern in der Regel nicht verändert.

Legt fest, welche Dateien und Ordner von Git ignoriert werden sollen.

Definiert Regeln für Codequalität und Linting.

Grundlegende Projektdokumentation und Anweisungen.

Welcher Ordner enthält den Großteil des Codes Ihrer React-Anwendung?

Erkunden Sie die Grundlagen der Erstellung von Benutzeroberflächen mit React. Schwerpunkt auf Komponenten, JSX, Datenfluss, Zustand und Nebenwirkungen, wie sie in alltäglichen React-Anwendungen verwendet werden.

Untersuchung von React und dessen Rendering von Benutzeroberflächen. Schwerpunkt auf Komponenten, JSX-Syntax und der Anzeige von Elementen auf dem Bildschirm.

Vertiefung der Datenübergabe zwischen Komponenten und Steuerung der UI-Ausgabe. Schwerpunkt auf Props, bedingtem Rendern und dem Rendern von Datenlisten.

Erfahren Sie, wie Benutzerinteraktionen und externe Daten die Benutzeroberfläche im Laufe der Zeit verändern. Schwerpunkt auf dem Verwalten von Zustand und dem Umgang mit Seiteneffekten mithilfe von React Hooks.

Untersuchung gängiger Methoden zur Gestaltung von React-Komponenten. Schwerpunkt auf der Anwendung von Stilen mittels Inline-Styles und externer CSS.

Erfahren Sie, wie ein React-Projekt ausgeführt wird und wie dessen Struktur aufgebaut ist. Schwerpunkt auf dem Starten eines Projekts mit Vite und dem Navigieren durch die Projektdateien.

Understanding der React-Projektstruktur

Übersicht über das Projektverzeichnis