Was ist React?

Teil des Abschnitts Grundlagen der React-Journey von Coddy. Lektion 1 von 42.

React ist die weltweit beliebteste Bibliothek zum Erstellen von Benutzeroberflächen. Facebook, Netflix, Airbnb: Die interaktiven Teile des Webs, die du täglich nutzt, werden damit erstellt.

Die Grundidee ist einfach: Statt eine riesige Seite zu schreiben, erstellst du kleine, wiederverwendbare Elemente, die Komponenten genannt werden. Eine Schaltfläche ist eine Komponente. Eine Profilkarte ist eine Komponente. Eine ganze Seite besteht einfach aus Komponenten in Komponenten.

Eine Komponente ist nichts Beängstigendes: Sie ist eine JavaScript-Funktion, die zurückgibt, was auf dem Bildschirm erscheinen soll:

function App() {
    return <h1>Hello, React!</h1>;
}

Dieses HTML-ähnliche Ding innerhalb von JavaScript nennt man JSX. Damit kannst du den Bildschirm genau dort beschreiben, wo die Logik liegt. React nimmt das, was deine Komponenten zurückgeben, und hält die tatsächliche Seite synchron. Du beschreibst, was du möchtest, und React ermittelt, wie der Browser aktualisiert werden muss.

In diesem Kurs bearbeitest du App.jsx, die Hauptkomponente einer kleinen React-App. Die Vorschau auf der rechten Seite zeigt deine App live, während du tippst. Lass uns etwas erstellen.

Aufgabe

Anfänger

Hier ist deine erste React-Komponente, die bereits für dich geschrieben wurde.

Was zu tun ist:

Lies App.jsx: Es handelt sich um eine Funktion, die JSX zurückgibt.
Drücke die Schaltfläche Run.
Beobachte, wie die Vorschau rechts das rendert, was die Komponente zurückgegeben hat.

Das ist der gesamte React-Ablauf: Eine Komponente gibt JSX zurück, und React zeigt es auf dem Bildschirm an. Ab der nächsten Lektion schreibst du das JSX selbst.

Probier es selbst

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>