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 grundlegende Idee ist einfach: Statt eine riesige Seite zu schreiben, baust du kleine, wiederverwendbare Teile, die Komponenten genannt werden. Ein Button ist eine Komponente. Eine Profilkarte ist eine Komponente. Eine ganze Seite besteht just aus Komponenten innerhalb von Komponenten.

Eine Komponente ist nichts Beängstigendes: Sie ist eine JavaScript-function, 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 main component 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 dein first React component, already für dich geschrieben.

Was zu tun ist:

Lies App.jsx: Es ist eine function, die JSX returns.
Drücke die Schaltfläche Run.
Beobachte, wie die Vorschau auf der rechten Seite das rendert, was das component zurückgegeben hat.

That ist der gesamte React-Ablauf: Ein component returns JSX, 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>