React-Tutorial

React ist eine JAVASCRIPT-Bibliothek zum Erstellen von Benutzeroberflächen.

React wird hauptsächlich verwendet, um UI zu erstellen. Viele Menschen betrachten React als das V (View) in MVC.

React entstand aus einem internen Facebook-Projekt, das zum Erstellen der Instagram-Website verwendet wurde, und wurde im Mai 2013 als Open Source veröffentlicht.

React hat eine hohe Leistung und eine sehr einfache Codelogik. Immer mehr Menschen beginnen, es zu beachten und zu verwenden.

React-Merkmale

  • 1. Deklaratives Design−React verwendet ein deklaratives Paradigma, wodurch sich Anwendungen leicht beschreiben lassen.

  • 2. Effizient−React minimiert die Interaktion mit dem DOM, indem es das DOM simuliert.

  • 3. Flexibel−React lässt sich gut mit bekannten Bibliotheken oder Frameworks kombinieren.

  • 4.JSX− JSX ist eine Erweiterung der JavaScript-Syntax. Für die React-Entwicklung ist JSX nicht unbedingt erforderlich, aber wir empfehlen die Verwendung.

  • 5. Komponenten− Das Erstellen von Komponenten mit React macht Code leichter wiederverwendbar und lässt sich gut bei der Entwicklung großer Projekte einsetzen.

  • 6. Unidirektionaler reaktiver Datenfluss− React implementiert einen unidirektionalen reaktiven Datenfluss und reduziert dadurch doppelten Code. Deshalb ist es einfacher als traditionelle Datenbindung.

Bevor Sie dieses Tutorial lesen, sollten Sie Folgendes wissen:

Bevor Sie mit dem Lernen von React beginnen, benötigen Sie die folgenden Grundkenntnisse:

React: Erstes Beispiel

In jedem Kapitel können Sie Beispiele online bearbeiten und dann auf eine Schaltfläche klicken, um die Ergebnisse anzuzeigen.

Dieses Tutorial verwendet React Version 18.2.0. Sie können die offizielle Website besuchen, umhttps://react.dev/die neueste Version herunterzuladen.

React-Beispiel

<div id="example"></div> <script type="text/babel">// Einfache React-Komponente function App() { return<h1>Hallo, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); // React-Komponente in DOM rendern root.render(<App />); </script>

Ausprobieren »

Externe Skripte importieren:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>

Diese drei Codezeilen importieren jeweils die Bibliotheken React, ReactDOM und Babel Standalone.

  • React wird verwendet, um Benutzeroberflächen zu erstellen.
  • ReactDOM wird verwendet, um React-Komponenten im Browser zu rendern.
  • Babel Standalone wird verwendet, um JSX-Syntax im Browser zur Laufzeit zu kompilieren.

Oder verwenden Sie die mit dem Tool create-react-app erstellte React-Entwicklungsumgebung (im nächsten Kapitel vorgestellt):

Beispiel

import React from "react";
import ReactDOM from "react-dom/client";

function Hello(props) {
  return <h1>Hello World!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);

Öffnen Sie zu diesem Zeitpunkt den Browserhttp://localhost:3000/Es wird Folgendes ausgegeben:

Hello World!

Referenzen

Weitere Erweiterungen