In dieser Übung erstellst du deine erste eigene React-Komponente und lässt sie im Browser anzeigen. Du lernst die grundlegende Struktur einer Komponente kennen und siehst sofort das Ergebnis.

## Schritt 1: Eine einfache Komponente erstellen

React-Komponenten sind JavaScript-Funktionen, die HTML-ähnlichen Code zurückgeben. Erstelle eine neue Datei `MeineKomponente.js` in deinem `src`-Ordner:

function MeineKomponente() {

  return 

Hallo, ich bin meine erste React-Komponente!
;

}
export default MeineKomponente;

> **Tipp:** Der Name deiner Komponente muss **immer** mit einem Großbuchstaben beginnen - das ist eine wichtige React-Regel!

## Schritt 2: Die Komponente in App.js einbinden

Öffne die `App.js` Datei und importiere deine neue Komponente. Dann verwendest du sie wie ein HTML-Element:

import MeineKomponente from './MeineKomponente';

function App() {

  return (

  );

}
export default App;

## Schritt 3: Das Ergebnis im Browser ansehen

Starte deinen Entwicklungsserver mit `npm start` (falls noch nicht gestartet) und öffne `http://localhost:3000` in deinem Browser. Du siehst jetzt deine Komponente!

> **Achtung:** Vergiss nicht den `/` am Ende des Komponenten-Tags: `` - das ist JSX-Syntax!

## Vollständiges Arbeitsbeispiel

So sieht deine komplette erste Komponente aus:

// MeineKomponente.js

function MeineKomponente() {

  return (


Meine erste React-Komponente
Das funktioniert super!

  );

}
export default MeineKomponente;

**Warum funktioniert das?** React wandelt deine JSX-Syntax (das HTML-ähnliche Zeug) in normales JavaScript um. Die Funktion gibt virtuelles HTML zurück, das React dann in echtes HTML im Browser verwandelt. Jede Änderung an deiner Komponente wird automatisch im Browser aktualisiert!