Eine kurze Einführung in React

1. CDN-Einführung

Wie gewöhnliche JS-Bibliotheken oder Frameworks kann auch React aus CDN importiert werden.

Bevor Sie CDN zum Importieren verwenden, müssen Sie zwei Arten von JS-Dateien verstehen, nämlich cjs und umd.

cjs: Der vollständige Name lautet CommonJS. Dies ist die von Node.js unterstützte Modulspezifikation.

umd: Der vollständige Name lautet Universal Module Definition. Dabei handelt es sich um eine einheitliche Moduldefinition, die von Node.js verwendete cjs umfasst und mit Modulspezifikationen einschließlich Browsern und Node.js kompatibel ist.

Neue Modulkonvention: Die neueste Modulkonvention besteht in der Verwendung der Schlüsselwörter „Import“ und „Export“.

Daher wird bei der Einführung von React im Allgemeinen zuerst die umd-Version verwendet, die sowohl Node.js als auch Browser unterstützen kann.

Die Einführung von Reacts CDN erfordert die Einführung von zwei JS-Bibliotheksdateien, react und react-dom. Hier nehmen wir die Einführung von BootCDN als Beispiel.

Bei den folgenden Importen wird auch die UMD-Version eingeführt, und die Importreihenfolge muss so sein, dass zuerst React und dann React-Dom eingeführt wird.

1.1 reagieren (zuerst importieren)

Hier gibt es Entwicklungs- und Produktionsversionen. Eine davon ist die Entwicklerversion und die andere die Produktversion. Beide sind in Ordnung. Die Produktversion hat möglicherweise umfassendere Funktionen als die Entwicklerversion, benötigt jedoch mehr Speicher. Hier nehmen wir als Beispiel die Einführung der Produktionsversion:

<script src="https://cdn.bootcss.com/react/16.13.1/umd/react.production.min.js"></script>

1.2 react-dom (später eingeführt)

Die Einführungsmethode von React und React-Dom ist ähnlich wie oben. Die Produktionsversion sollte die UMD-Version sein. Am besten ist es, wenn die Versionsnummer mit der von React übereinstimmt.

<script src="https://cdn.bootcss.com/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

1.3 Überprüfen Sie, ob die Reaktion erfolgreich eingeführt wurde

<Skript>
  Konsole.log(Reagieren);
  Konsole.log(ReactDOM);
</Skript>

Wenn Sie die beiden Objekte React und ReactDOM erfolgreich importieren können, war die Einführung erfolgreich!

2. Webpack-Einführung

Verwenden Sie import ... from in der Webpack-Konfigurationsumgebung. Der Befehl lautet wie folgt:

//Installieren Sie react react-dom
Garn hinzufügen reagieren reagieren-dom

//React react-dom einführen
React von „react“ importieren
ReactDOM von „react-dom“ importieren

Neben Webpack unterstützen auch Rollup und Parcel die oben genannte Importmethode.

3. Erstellen-Reagieren-App

Webpcak ist für Veteranen flexibler, um React einzuführen, aber für Anfänger ist die Konfiguration von Webpack sehr kompliziert. Um React einzuführen, muss das komplexe Webpack konfiguriert werden, was es schwieriger macht. Daher ist React, genau wie Vue mit Vue cli ausgestattet ist, auch mit einem Standardtool für die React-Entwicklung ausgestattet, nämlich dem Tool create-react-app, das Vue cli ähnelt. Beide haben integriertes Webpack, das uns bei der Konfiguration der React-Entwicklungsumgebung hilft und direkt verwendet werden kann.

Für Anfänger ist das Tool „Create-React-App“ einfacher zu verwenden.

// Create-React-App global installieren
yarn global hinzufügen erstellen-reagieren-App

// Überprüfen Sie die Versionsnummer create-react-app --version

// Erstellen Sie eine React-Datei, geben Sie das zu erstellende Verzeichnis ein und führen Sie den Befehl „create-react-app project name“ aus.

Das Obige ist eine kurze Einführung in die Details der Einführung von React. Weitere Informationen zur Einführung von React finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!