React Grundlagen: Erste Schritte mit React

Um React in Ihrem neu erstellten Projekt zu verwenden, laden Sie zwei React-Skripte von einer externen Website namens unpkg.com:

react ist die React-Kernbibliothek.
react-dom stellt DOM-spezifische Methoden bereit, die es Ihnen ermöglichen, React mit dem DOM zu verwenden.

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <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>
  </body>
</html>

Anstatt das DOM direkt mit reinem JavaScript zu manipulieren, entfernen Sie die zuvor hinzugefügten DOM-Methoden und fügen Sie die Methode ReactDOM.createRoot() hinzu, um ein bestimmtes DOM-Element anzusprechen und eine Wurzel zu erstellen, in der Ihre React-Komponenten angezeigt werden. Dann fügen Sie die Methode root.render() hinzu, um Ihren React-Code im DOM zu rendern.

Dies weist React an, unseren <h1>-Titel innerhalb unseres #app-Elements zu rendern.

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

Wenn Sie versuchen, diesen Code im Browser auszuführen, erhalten Sie einen Syntaxfehler:

Terminal

Uncaught SyntaxError: expected expression, got '<'

Das liegt daran, dass <h1>...</h1> kein gültiges JavaScript ist. Dieser Code ist JSX.

Was ist JSX?

JSX ist eine Syntaxerweiterung für JavaScript, die es Ihnen ermöglicht, Ihre Benutzeroberfläche in einer vertrauten HTML-ähnlichen Syntax zu beschreiben. Das Schöne an JSX ist, dass Sie abgesehen von den drei JSX-Regeln keine neuen Symbole oder Syntax außerhalb von HTML und JavaScript lernen müssen.

Aber Browser verstehen JSX nicht von Haus aus, daher benötigen Sie einen JavaScript-Compiler wie Babel, um Ihren JSX-Code in reguläres JavaScript umzuwandeln.

Hinzufügen von Babel zu Ihrem Projekt

Um Babel zu Ihrem Projekt hinzuzufügen, kopieren Sie das folgende Skript und fügen Sie es in Ihre index.html-Datei ein:

index.html

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Zusätzlich müssen Sie Babel mitteilen, welchen Code es transformieren soll, indem Sie den Skripttyp auf type=text/jsx ändern.

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Babel-Skript -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

Um zu bestätigen, dass es korrekt funktioniert, öffnen Sie Ihre HTML-Datei im Browser.

Vergleicht man den deklarativen React-Code, den Sie gerade geschrieben haben:

index.html

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

mit dem imperativen JavaScript-Code aus dem vorherigen Abschnitt:

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>

können Sie erkennen, wie die Verwendung von React es Ihnen ermöglicht, viel repetitiven Code einzusparen.

Und genau das macht React – es ist eine Bibliothek mit wiederverwendbaren Code-Schnipseln, die Aufgaben für Sie übernehmen – in diesem Fall die Aktualisierung der Benutzeroberfläche.

Zusätzliche Ressourcen:

Sie müssen nicht genau wissen, wie React die Benutzeroberfläche aktualisiert, um es zu verwenden, aber wenn Sie mehr erfahren möchten, finden Sie hier einige zusätzliche Ressourcen:

UI-Bäume

Schreiben von Markup mit JSX

react-dom/server-Abschnitte in der React-Dokumentation.

Wesentliches JavaScript für React

Während Sie JavaScript und React gleichzeitig lernen können, kann die Vertrautheit mit JavaScript den Lernprozess von React erleichtern.

In den nächsten Abschnitten werden Sie einige Kernkonzepte von React aus einer JavaScript-Perspektive kennenlernen. Hier ist eine Zusammenfassung der erwähnten JavaScript-Themen:

Während dieser Kurs nicht in JavaScript eintaucht, ist es eine gute Praxis, mit den neuesten Versionen von JavaScript auf dem Laufenden zu bleiben. Aber wenn Sie sich in JavaScript noch nicht sicher fühlen, lassen Sie sich davon nicht davon abhalten, mit dem Bauen mit React zu beginnen!

Erste Schritte mit React

Was ist JSX?

Hinzufügen von Babel zu Ihrem Projekt

Wesentliches JavaScript für React

On this page