React Grundlagen: UI mit JavaScript aktualisieren

In diesem Kapitel beginnen wir mit dem Aufbau unseres Projekts, indem wir JavaScript und DOM-Methoden verwenden, um ein h1-Tag zu Ihrem Projekt hinzuzufügen.

Öffnen Sie Ihren Code-Editor und erstellen Sie eine neue index.html-Datei. Fügen Sie in der HTML-Datei folgenden Code ein:

index.html

<html>
  <body>
    <div></div>
  </body>
</html>

Weisen Sie dem div dann eine eindeutige id zu, damit Sie es später ansprechen können.

index.html

<html>
  <body>
    <div id="app"></div>
  </body>
</html>

Um JavaScript in Ihrer HTML-Datei zu schreiben, fügen Sie ein script-Tag hinzu:

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

Jetzt können Sie innerhalb des script-Tags eine DOM-Methode, getElementById(), verwenden, um das <div>-Element anhand seiner id auszuwählen:

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

Sie können weiterhin DOM-Methoden verwenden, um ein neues <h1>-Element zu erstellen:

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // Wählen Sie das div-Element mit der 'app'-id aus
      const app = document.getElementById('app');
 
      // Erstellen Sie ein neues H1-Element
      const header = document.createElement('h1');
 
      // Erstellen Sie einen neuen Textknoten für das H1-Element
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
 
      // Fügen Sie den Text zum H1-Element hinzu
      header.appendChild(headerContent);
 
      // Platzieren Sie das H1-Element innerhalb des div
      app.appendChild(header);
    </script>
  </body>
</html>

Um sicherzustellen, dass alles funktioniert, öffnen Sie Ihre HTML-Datei in Ihrem bevorzugten Browser. Sie sollten ein h1-Tag sehen, das 'Develop. Preview. Ship.' anzeigt.

HTML vs. DOM

Wenn Sie sich die DOM-Elemente in Ihren Browser-Entwicklertools ansehen, werden Sie feststellen, dass das DOM das <h1>-Element enthält. Das DOM der Seite unterscheidet sich vom Quellcode – mit anderen Worten, von der ursprünglichen HTML-Datei, die Sie erstellt haben.

Zwei nebeneinander angeordnete Diagramme, die die Unterschiede zwischen den gerenderten DOM-Elementen und dem Quellcode (HTML) zeigen

Das liegt daran, dass das HTML den anfänglichen Seiteninhalt darstellt, während das DOM den aktualisierten Seiteninhalt repräsentiert, der durch den von Ihnen geschriebenen JavaScript-Code geändert wurde.

Das Aktualisieren des DOM mit reinem JavaScript ist sehr mächtig, aber umständlich. Sie haben all diesen Code geschrieben, um ein <h1>-Element mit etwas Text hinzuzufügen:

index.html

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

Mit zunehmender Größe einer App oder eines Teams kann es immer schwieriger werden, Anwendungen auf diese Weise zu erstellen.

Bei diesem Ansatz verbringen Entwickler viel Zeit damit, Anweisungen zu schreiben, die dem Computer mitteilen, wie er Dinge tun soll. Aber wäre es nicht schön, einfach zu beschreiben, was Sie anzeigen möchten, und den Computer herausfinden zu lassen, wie das DOM aktualisiert wird?

Imperative vs. deklarative Programmierung

Der obige Code ist ein gutes Beispiel für imperative Programmierung. Sie schreiben die Schritte für wie die Benutzeroberfläche aktualisiert werden soll. Aber wenn es um die Erstellung von Benutzeroberflächen geht, wird oft ein deklarativer Ansatz bevorzugt, da er den Entwicklungsprozess beschleunigen kann. Anstatt DOM-Methoden schreiben zu müssen, wäre es hilfreich, wenn Entwickler einfach deklarieren könnten, was sie anzeigen möchten (in diesem Fall ein h1-Tag mit etwas Text).

Mit anderen Worten: Imperative Programmierung ist wie einem Koch Schritt-für-Schritt-Anweisungen zu geben, wie er eine Pizza machen soll. Deklarative Programmierung ist wie eine Pizza zu bestellen, ohne sich um die Schritte zu kümmern, die zur Herstellung der Pizza erforderlich sind. 🍕

React ist eine beliebte deklarative Bibliothek, die Sie zur Erstellung von Benutzeroberflächen verwenden können.

React: Eine deklarative UI-Bibliothek

Als Entwickler können Sie React mitteilen, was mit der Benutzeroberfläche passieren soll, und React wird die Schritte herausfinden, wie das DOM in Ihrem Namen aktualisiert wird.

Im nächsten Abschnitt werden wir untersuchen, wie Sie mit React beginnen können.

Zusätzliche Ressourcen:

HTML vs. DOM

Wie sich deklarative UI mit imperativer vergleicht

UI mit JavaScript aktualisieren

HTML vs. DOM

Imperative vs. deklarative Programmierung

React: Eine deklarative UI-Bibliothek

On this page