Entdecke, was React ist, schreibe deine allererste Komponente und lerne die Grundregeln von JSX kennen.
Diese Lektion in Kodokon öffnenReact ist eine JavaScript-Bibliothek, also ein Werkzeugkasten mit fertigem Code, der für das Erstellen von Benutzeroberflächen gemacht ist: alles, was du auf dem Bildschirm siehst und womit du interagierst (Buttons, Menüs, Formulare...). Die einzige Voraussetzung für dieses Modul sind die JavaScript-Grundlagen (Variablen, Funktionen, Arrays). Um zu verstehen, warum React wichtig ist, schauen wir uns zuerst an, wie du eine Seite ohne React veränderst.
const el = document.getElementById("title");
el.textContent = "Hello!";
el.style.color = "green";Dieser Ansatz funktioniert, aber sobald die Seite wächst, musst du jedes Element aufspüren, es im richtigen Moment aktualisieren und darfst keines vergessen... Das wird schnell unübersichtlich. React bietet eine andere Idee: Teile die Oberfläche in Komponenten auf. Eine Komponente ist eine JavaScript-Funktion, die einen Teil der Oberfläche beschreibt (einen Button, eine Karte, ein Menü). Wie Lego-Steine setzt du sie zusammen, um eine ganze Seite zu bauen, und React kümmert sich darum, den Bildschirm für dich aktuell zu halten.
import { createRoot } from "react-dom/client";
function Hello() {
return <h1>Hello!</h1>;
}
const root = createRoot(document.getElementById("root"));
root.render(<Hello />);Die Funktion Hello ist eine Komponente: Sie gibt etwas zurück, das wie HTML aussieht, aber direkt in JavaScript geschrieben ist. Diese Syntax heißt JSX. Drei Regeln, die du dir merken solltest: Eine Komponente gibt ein einziges übergeordnetes Element zurück; manche Attribute ändern ihren Namen (class wird zu className); jedes Tag muss geschlossen werden (zum Beispiel <img />). JSX hat eine Superkraft: Mit geschweiften Klammern { } kannst du jeden JavaScript-Wert in die Ausgabe einfügen.
function Welcome() {
const firstName = "Sarah";
return <h2>Welcome, {firstName}!</h2>;
}