recherche

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

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

寻∝梦
寻∝梦original
2018-09-11 10:47:141742parcourir

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子目录。

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。

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

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!

Déclaration：
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
Article précédent：Analyser la relation entre les boucles JavaScript et la portée (code ci-joint)Article suivant：Analyser la relation entre les boucles JavaScript et la portée (code ci-joint)

Articles Liés

Voir plus