Deine erste React-App mit Vite

Zeig mir das: Projekt einrichten

Vite (ausgesprochen „veet”, Französisch für schnell) ist ein Werkzeug, das dir ein fertiges React-Projektgerüst vorbereitet. Öffne das Terminal und wechsle dorthin, wo das Projekt leben soll (z. B. dein Desktop):

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite fragt vielleicht etwas – bestätige mit Enter. Dann:

cd my-react-web
npm install
npm run dev -- --port 3901

• npm install lädt alles herunter, was das Projekt braucht (dauert einen Moment – React und Helfer landen im Ordner node_modules).
• npm run dev -- --port 3901 startet den Entwicklungsserver. Im Terminal erscheint die Adresse http://localhost:3901. Öffne sie im Browser.

Siehst du ein sich drehendes Logo und die Überschrift „Vite + React”? Glückwunsch – deine erste React-App läuft! 🎉

Rundgang durch das Projekt

Öffne den Ordner my-react-web in VS Code (File → Open Folder). Es sieht nach vielen Dateien aus, aber nur drei sind gerade wichtig:

Ignoriere den Rest vorerst (öffne oder lösche nie node_modules, package.json ist eine Liste der Projekt-Pakete).

Deine erste Code-Änderung

Öffne src/App.jsx. Lösche alles und schreib:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Speichern – und die Seite im Browser hat sich von selbst geändert. Das siehst du:

• Die App-Komponente ist eine Funktion, die HTML zurückgibt (diese Schreibweise heißt JSX).
• {name} – geschweifte Klammern fügen JavaScript in HTML ein. Alles: eine Variable, eine Rechnung {2 + 3}, sogar eine Bedingung.
• export default App – „Ich stelle diese Komponente anderen Dateien zur Verfügung” (main.jsx ist die, die sie übernimmt).

JSX hat zwei Eigenheiten, an die du dich gewöhnst: Statt class schreibst du className (class ist in JavaScript reserviert), und eine Komponente muss ein umschließendes Element zurückgeben (deshalb der <div> um alles).

Jetzt du 💪

1. Richte das Projekt nach der Anleitung ein und bring es zum Laufen.
2. Bearbeite App.jsx: eine Überschrift mit deinem Namen, ein Absatz darüber, was du baust, und eine Variable age, die du im Satz I am {age} years old anzeigst.
3. Lösche absichtlich ein schließendes Tag und schau, wie der Fehler aussieht – Vite zeigt ihn direkt im Browser mit Zeilennummer. Dann repariere ihn.
4. Stoppe den Server (Ctrl+C im Terminal) und starte ihn neu (npm run dev -- --port 3901) – damit du den ganzen Ablauf im Griff hast.

Das nimmst du aus dieser Lektion mit

• npm create vite@latest richtet ein Projekt ein, npm install lädt Pakete, npm run dev startet localhost.
• Du schreibst Code in src/App.jsx: eine Komponente ist eine Funktion, die JSX zurückgibt, {} fügt JavaScript in HTML ein.
• In JSX: className statt class, immer ein umschließendes Element.

© 2026 Ing. Martin Polak / AlgoRhino · Nutzungsbedingungen für Inhalte