1. Introduction pour réagir
Site officiel : React (docschina.org)
React est un framework js développé et maintenu par l'équipe de développement front-end de Facebook
La fonction d'implémentation de React est similaire à celle de VUE. Cependant, en raison des styles de développement étrangers, les étapes de rendu des données ne sont pas encapsulées dans React. Les développeurs doivent utiliser davantage de syntaxe es6 pour terminer manuellement le rendu des données. Par conséquent, le code est plus difficile que VUE.haut.
2. Avantages et inconvénients de réagir
avantage:
1. Tout est un composant : presque tout le développement dans React est effectué à l'aide de composants. Avantages : améliore la réutilisabilité et la maintenabilité du code.
2. Rapide : le mécanisme DOM virtuel (DOM virtuel) est fourni en réaction
3. Compatibilité entre navigateurs : l'utilisation du DOM virtuel dans React n'analyse pas directement le DOM réel, ce qui résout le problème de compatibilité des navigateurs entre domaines et peut même être utilisé dans IE8.
4. Isomorphisme, JavaScript pur : presque tous les projets sont développés en utilisant JavaScript
5. Flux de données unidirectionnel : React propose deux architectures : flux et redux pour créer un flux de données unidirectionnel.
défaut:
1. Pas un cadre complet
2. React est tout au plus considéré comme la couche V (couche de vue) dans MVC et doit généralement être combiné avec ReactRouter et Redux pour créer un projet complet.
3. Installation et utilisation de React
cdn : Entrez sur le site officiel et cliquez dans l'ordre des images
Après cela, un document HTML apparaîtra, qui est le document d'utilisation de base de React. Vous pouvez cliquer avec le bouton droit de la souris et sélectionner Enregistrer sous pour enregistrer sur votre bureau (ou n'importe quel dossier).
La case rouge entourée est le lien cdn de réaction en ligne , qui ne peut être utilisé sans connexion Internet. Vous pouvez également copier le contenu dans la zone rouge et l'ouvrir sur une nouvelle page, et enregistrer tout le code localement.
Ouvrez ce fichier html avec vscode et vous verrez l'effet suivant
L'intégralité du code HTML à l'heure actuelle est (les annotations sont pour ma compréhension personnelle)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div> <!-- 声明需要渲染的区域 -->
<script type="text/babel">
function MyApp() {
return <h1>Hello, world!</h1>;
}
const container = document.getElementById('root'); // 捕获渲染区域
const root = ReactDOM.createRoot(container); //创建DOM元素
root.render(<MyApp />); //将DOM元素渲染到渲染区域当中
</script>
</body>
</html>npm
npm init -y //Initialiser package.json
npm je réagis réagis-dom -S