React-Installation (CDN)

React kann direkt heruntergeladen und verwendet werden; das Download-Paket enthält außerdem viele Lernbeispiele.

Dieses Tutorial verwendet React Version 18.2.0. Sie können die offizielle Websitehttps://reactjs.org/besuchen, um die neueste Version herunterzuladen.

Verwenden Sie die React-CDN-Bibliothek von ByteDance mit folgender Adresse:

Verwenden Sie die React-CDN-Bibliothek von Staticfile CDN mit folgender Adresse:

Die von der offiziellen Website bereitgestellte CDN-Adresse:

Hinweis:Die Verwendung von Babel zum Kompilieren von JSX im Browser ist sehr ineffizient.

Anwendungsbeispiel

Das folgende Beispiel gibt Hello, React! aus

React-Beispiel

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hallo React!</title> <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> </head> <body> <div id="example"></div> <script type="text/babel">// A simple React component function App() { return<h1>Hello, React!</h1>;<App />); </script> </body> </html> </script> </body> </html>

Selbst ausprobieren »

Beispielanalyse:

Im Beispiel haben wir drei Bibliotheken eingeführt: react.production.min.js, react-dom.production.min.js und babel.min.js:

react.min.js- React-Kernbibliothek
react-dom.min.js- Bietet DOM-bezogene Funktionalität
babel.min.js- Babel kann ES6-Code in ES5-Code umwandeln, sodass wir React-Code in Browsern ausführen können, die derzeit ES6 nicht unterstützen. Babel hat integrierte Unterstützung für JSX. Durch die Verwendung von Babel zusammen mit dem babel-sublime-Paket können Sie die Syntaxhervorhebung des Quellcodes auf ein ganz neues Niveau heben.

//Eine einfache React-Komponente function App() { return <h1>Hallo, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); //Die React-Komponente in das DOM rendern root.render(<App />);

Der obige Code fügt eine h1-Überschrift in den Knoten mit id="example" ein.

const root = ReactDOM.createRoot(document.getElementById("example"));

Den DOM-Container abrufen：document.getElementById("example")Es ruft ein DOM-Element mit id="example" ab.
Einen Root-Knoten erstellen：ReactDOM.createRootEs ist eine neue Methode, die in React 18 eingeführt wurde und dazu dient, einen React-Root-Knoten zu erstellen. In diesem Beispiel,rootDie Variable speichert diesen Wurzelknoten.

Hinweis:

Wenn wir JSX verwenden müssen, muss das type-Attribut des <script>-Tags auf text/babel gesetzt werden.

Andere Erweiterungen

React-Praxisprojekt

React-Installation (CDN)

Anwendungsbeispiel

React-Beispiel