Benutzeroberflächen mit Komponenten erstellen

React-Kernkonzepte

Es gibt drei Kernkonzepte von React, die Sie kennen müssen, um mit dem Erstellen von React-Anwendungen zu beginnen:

• Komponenten
• Props
• State

In den nächsten Kapiteln gehen wir auf diese Konzepte ein und stellen Ressourcen bereit, mit denen Sie Ihr Wissen vertiefen können. Nachdem Sie mit diesen Konzepten vertraut sind, zeigen wir Ihnen, wie Sie Next.js installieren und neuere React-Funktionen wie Server- und Client-Komponenten nutzen.

Komponenten

Benutzeroberflächen können in kleinere Bausteine, sogenannte Komponenten, unterteilt werden.

Komponenten ermöglichen es Ihnen, eigenständige, wiederverwendbare Code-Snippets zu erstellen. Wenn Sie sich Komponenten als LEGO-Steine vorstellen, können Sie diese einzelnen Steine nehmen und zu größeren Strukturen kombinieren. Wenn Sie einen Teil der Benutzeroberfläche aktualisieren müssen, können Sie die entsprechende Komponente oder den entsprechenden Baustein anpassen.

Diese Modularität macht Ihren Code bei wachsender Größe besser wartbar, da Sie Komponenten hinzufügen, aktualisieren und entfernen können, ohne den Rest der Anwendung zu berühren.

Das Schöne an React-Komponenten ist, dass sie einfach JavaScript sind. Sehen wir uns an, wie Sie eine React-Komponente aus JavaScript-Perspektive schreiben können:

Komponenten erstellen

In React sind Komponenten Funktionen. Erstellen Sie innerhalb Ihres script-Tags eine neue Funktion namens header:

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

Eine Komponente ist eine Funktion, die UI-Elemente zurückgibt. Innerhalb des return-Statements der Funktion können Sie JSX schreiben:

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

Um diese Komponente im DOM zu rendern, übergeben Sie sie als ersten Parameter an die root.render()-Methode:

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

Aber Moment - wenn Sie den obigen Code im Browser ausführen, erhalten Sie einen Fehler. Damit dies funktioniert, müssen Sie zwei Dinge tun:

Erstens sollten React-Komponenten großgeschrieben werden, um sie von normalem HTML und JavaScript zu unterscheiden:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
// React-Komponente großschreiben
root.render(Header);

Zweitens verwenden Sie React-Komponenten auf die gleiche Weise wie reguläre HTML-Tags, mit spitzen Klammern <>:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Wenn Sie den Code jetzt im Browser ausführen, sollten Ihre Änderungen sichtbar sein.

Komponenten verschachteln

Anwendungen enthalten normalerweise mehr Inhalte als eine einzelne Komponente. Sie können React-Komponenten verschachteln, genau wie Sie es mit normalen HTML-Elementen tun würden.

In Ihrem Beispiel erstellen Sie eine neue Komponente namens HomePage:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Dann verschachteln Sie die <Header>-Komponente innerhalb der neuen <HomePage>-Komponente:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* Header-Komponente verschachteln */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Komponentenbaum

Auf diese Weise können Sie React-Komponenten weiter verschachteln, um einen Komponentenbaum zu bilden.

Beispielsweise könnte Ihre oberste HomePage-Komponente eine Header-, eine Article- und eine Footer-Komponente enthalten. Jede dieser Komponenten könnte wiederum eigene Unterkomponenten haben und so weiter. Zum Beispiel könnte die Header-Komponente eine Logo-, eine Title- und eine Navigation-Komponente enthalten.

Dieses modulare Format ermöglicht es Ihnen, Komponenten an verschiedenen Stellen Ihrer Anwendung wiederzuverwenden.

In Ihrem Projekt können Sie nun die <HomePage>-Komponente als oberste Komponente an die root.render()-Methode übergeben:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);

Weitere Ressourcen:

• Ihre erste Komponente
• Komponenten importieren und exportieren