Installation de React (CDN)

React peut être téléchargé et utilisé directement ; le package de téléchargement fournit également de nombreux exemples d'apprentissage.

Ce tutoriel utilise React version 18.2.0. Vous pouvez visiter le site officielhttps://reactjs.org/pour télécharger la dernière version.

Utilisez la bibliothèque CDN React de ByteDance, avec l'adresse comme suit :

Utilisez la bibliothèque CDN React de Staticfile CDN, avec l'adresse comme suit :

L'adresse CDN fournie par le site officiel :

Remarque :Utiliser Babel pour compiler du JSX dans le navigateur est très inefficace.

Exemple d'utilisation

L'exemple suivant affiche Hello, React !

Exemple React

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Bonjour 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>Bonjour, React !</h1>;<App />); </script> </body> </html> </script> </body> </html>

Essayez-le vous-même »

Analyse de l'exemple :

Dans l'exemple, nous avons introduit trois bibliothèques : react.production.min.js, react-dom.production.min.js et babel.min.js :

react.min.js- Bibliothèque principale de React
react-dom.min.js- Fournit des fonctionnalités liées au DOM
babel.min.js- Babel peut convertir le code ES6 en code ES5, ce qui nous permet d'exécuter du code React sur des navigateurs qui ne prennent actuellement pas en charge ES6. Babel dispose d'une prise en charge intégrée de JSX. En utilisant Babel avec le paquet babel-sublime, vous pouvez porter la coloration syntaxique du code source à un tout nouveau niveau.

//Un composant React simple function App() { return <h1>Bonjour, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); //Afficher le composant React dans le DOM root.render(<App />);

Le code ci-dessus insère un titre h1 dans le nœud avec id="example".

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

Obtenir le conteneur DOM：document.getElementById("example")Il récupère un élément DOM avec l'id "example".
Créer un nœud racine：ReactDOM.createRootIl s'agit d'une nouvelle méthode introduite dans React 18, utilisée pour créer un nœud racine React. Dans cet exemple,rootla variable stocke ce nœud racine.

Remarque :

Si nous devons utiliser JSX, l'attribut type de la balise <script> doit être défini sur text/babel.

Autres extensions

Projet pratique React

Installation de React (CDN)

Exemple d'utilisation

Exemple React