Erste Komponente und erstes Rendering
Schreiben Sie Ihre erste Komponentenfunktion, rendern Sie sie mit createRoot in das DOM und erleben Sie Hot Reload in Aktion.
Erste Komponente und erstes Rendering ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Überblick
Ziel: Schreiben Sie Ihre erste React-Komponente, mounten Sie sie mit createRoot und überprüfen Sie Hot Reload.
Funktionskomponenten
Eine React-Komponente ist einfach eine Funktion, die JSX zurückgibt. Beispiel: function App() { return <h1>Hi</h1> }.
Mit createRoot mounten
Verwenden Sie ReactDOM.createRoot mit document.getElementById("root") und rufen Sie anschließend root.render(<App/>) auf.
Codedemo
Ihr erstes Rendering: Mounten Sie App und klicken Sie, um Zustandsaktualisierungen zu sehen.
<div id="root"></div>
Grundlagen des Hot Reloads
Hot Reload: Speichern Sie eine Datei; der Dev-Server erstellt sie neu und die UI wird aktualisiert, ohne den State zu verlieren.
Tipps für erste Apps
Tipps:
- Halten Sie Komponenten klein.
- Verwenden Sie klare Namen wie App.
- Überprüfen Sie bei fehlgeschlagenem Rendering die Konsole auf Fehler.
Root-Erstellung prüfen
Zusammenfassung
Zusammenfassung: Definieren Sie App(), mounten Sie mit createRoot und nutzen Sie Hot Reload für sofortiges Feedback.
Häufig gestellte Fragen
Ist die Lektion „Erste Komponente und erstes Rendering“ kostenlos?
Ja — der vollständige Text von „Erste Komponente und erstes Rendering“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Erste Komponente und erstes Rendering“?
Schreiben Sie Ihre erste Komponentenfunktion, rendern Sie sie mit createRoot in das DOM und erleben Sie Hot Reload in Aktion. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.
Wie lange dauert die Lektion „Erste Komponente und erstes Rendering“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- React-Einstieg: Konzepte und Einrichtung
- Projekteinrichtung: Vite, Layout und Dev-Server
- Erste Komponente und erstes Rendering