简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Qu'est-ce que réagir ? Introduction à l'utilisation de base de React (avec exemples)

寻∝梦
Libérer： 2018-09-11 10:47:14
original
1725 Les gens l'ont consulté

Cet article parle principalement de quelques connaissances de base sur react, afin que chacun puisse en apprendre davantage sur les bases de React. Lisons cet article maintenant

React Introduction Series 1 (Première introduction à React)

1 Introduction à React

React est un JavaScript utilisé pour créer des utilisateurs. bibliothèque d'interfaces. React est principalement utilisé pour créer une interface utilisateur, et beaucoup de gens pensent que React est le V (vue) dans MVC. React est né d'un projet interne à Facebook. React a des performances élevées et la logique du code est très simple.

2. Caractéristiques de React

  • Conception déclarative - React adopte un paradigme déclaratif, qui peut facilement décrire les applications.

  • Efficient −React minimise l'interaction avec le DOM en simulant le DOM.

  • Flexible −React fonctionne bien avec des bibliothèques ou des frameworks connus.

  • JSX - JSX est une extension de la syntaxe JavaScript. Le développement de React n'utilise pas nécessairement JSX, mais cela est recommandé.

  • Component - La création de composants via React facilite la réutilisation du code et peut être bien appliquée dans le développement de grands projets.

  • Flux de données de réponse unidirectionnelle - React implémente un flux de données de réponse unidirectionnelle, réduisant ainsi le code répété, c'est pourquoi il est plus simple que la liaison de données traditionnelle.

3. Introduction à l'utilisation de base 

基本模板<!DOCTYPE html>
   <html>
     <head>
       <script src="../build/react.js"></script>
       <script src="../build/react-dom.js"></script>
       <script src="../build/browser.min.js"></script>
     </head>
     <body>
       <p id="example"></p>
       <script type="text/babel">

       </script>
     </body>
   </html>
   模板中代码一共用了三个库： react.js 、react-dom.js 和 Browser.js
   需要注意的是，它们必须首先加载。
   1）react.js是React的核心库。
   2）react-dom.js是提供与DOM相关的功能。
   3）Browser.js的作用是将JSX语法转为JavaScript语法，这一步很消耗时间，实际上线时，应将它放到服务器完成。
   $ babel src --out-dir build
   这个命令可以将src子目录的js文件进行语法转换，转码后的文件全部放在build子目录。
Copier après la connexion

Remarque : L'attribut type de la dernière balise de script est text/babel. En effet, la syntaxe JSX unique de React est incompatible avec JavaScript. Partout où JSX est utilisé, type="text/babel" doit être ajouté. Si vous devez utiliser JSX, l'attribut type de la balise script doit être défini sur text/babel. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois React Reference Manual colonne pour en savoir plus) 

补充一点：
   使用JSX，可以极大的简化React元素的创建，JSX抽象化了React.createElement()函数的使用，其语法风
格类似于HTML语法风格.不过，使用React并非必须使用JSX，JSX只是一种直观的创建React nodes的方法，它是对
React.createElement（）方法的抽象，通过Babel，JSX语句也可以直接在浏览器中运行，Babel内嵌了对JSX的支持。
   在运行时引用babel.js虽然容易使用而且还很方便，不过并不是一种好的方案，因为需要转换，所以更加耗时，
这一缺点在产品阶段显得更加明显。Babel是React团队选择的在使用React过程中转换ES*和JSX为ES5语句的工具。实际
   Babel主要用途是一个JavaScript转换器，它可以转换各种ES*代码为浏览器可识别的ES代码。就目前来说，Babel主
要会转换ES6和ES7语句为ES5语句，转换JSX看起来倒像是其的一个附加功能。babel.js与browser.js的关系 babel的
浏览器版本为browser.js（未精简）和browser.min.js（已精简）。所以最后一个文件也可以引入babel.min.js。
Copier après la connexion

4. Utilisez React via npm (utilisez create-react -app pour créer rapidement un environnement de développement React)

create-react-app vient de Facebook Cette commande peut créer rapidement un environnement de développement React sans configuration. Le projet créé automatiquement par create-react-app est basé sur Webpack + ES6. 

执行以下命令创建项目(支持node.js和npm)：
$ npm install -g create-react-app$ create-react-app my-app$ cd my-app/$ npm start
Copier après la connexion

Cet article se termine ici (si vous voulez en voir plus, rendez-vous dans la colonne react user manual du site Web PHP chinois pour en savoir plus). questions, vous pouvez les poser ci-dessous Laisser un message avec une question.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
react
source：php.cn
Article précédent：Analyser la relation entre les boucles JavaScript et la portée (code ci-joint) Article suivant：Comment configurer l’environnement de développement pour React ? Étapes de configuration de l'environnement de développement React+webpack (avec exemples de configuration)
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ? Voici mon composant de style Sort.js : <SortWrapper><SortText>SortBy</SortT...
Depuis 2024-04-06 21:28:37
0
1
2257
La mise à jour du statut ne fonctionne pas dans React-Native sur Android J'ai du code qui contient des paires d'images dans une galerie horizontale pouvant être gl...
Depuis 2024-04-06 16:54:10
0
1
410
Pourquoi l'omission de 0 ms de veille interrompt-elle mes transitions CSS ? J'essaie d'implémenter une animation FLIP pour voir si je la comprends bien. Dans ce codep...
Depuis 2024-04-06 16:29:50
0
2
490
Élément enfant React non valide (trouvé : objet avec la clé {clientVersion}). Si vous souhaitez afficher une collection d'éléments enfants, utilisez plutôt un tableau J'ai un formulaire en plusieurs étapes et lorsque j'essaie de le soumettre, cette erreur s...
Depuis 2024-04-06 16:25:39
0
1
346
React Three Fiber : Pourquoi mes événements de défilement sont-ils en retard ? Dans ReactThreeFiber, j'ai un composant React qui génère un sprite que je souhaite conserv...
Depuis 2024-04-06 13:39:24
0
1
410
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！