suchen

Heim  >  Artikel  >  Web-Frontend  >  Was ist reagieren? Einführung in die grundlegende Verwendung von React (mit Beispielen)

Was ist reagieren? Einführung in die grundlegende Verwendung von React (mit Beispielen)

寻∝梦
寻∝梦Original
2018-09-11 10:47:141740Durchsuche

In diesem Artikel geht es hauptsächlich um einige Grundkenntnisse zu React, damit jeder mehr über die Grundlagen von React erfahren kann. Lesen wir jetzt diesen Artikel

React-Einführungsserie 1 (Erste Einführung in React)

1. Einführung in React

React ist ein JavaScript, das zum Erstellen von Benutzern verwendet wird Schnittstellenbibliothek. React wird hauptsächlich zum Erstellen einer Benutzeroberfläche verwendet, und viele Leute denken, dass React das V (Ansicht) in MVC ist. React entstand als internes Projekt bei Facebook. React ist leistungsstark und die Codelogik ist sehr einfach.

2. Funktionen von React

  • Deklaratives Design − React übernimmt ein deklaratives Paradigma, mit dem sich Anwendungen leicht beschreiben lassen.

  • Effizient − React minimiert die Interaktion mit dem DOM durch Simulation des DOM.

  • Flexibel − React funktioniert gut mit bekannten Bibliotheken oder Frameworks.

  • JSX − JSX ist eine Erweiterung der JavaScript-Syntax. Die React-Entwicklung verwendet nicht unbedingt JSX, wird jedoch empfohlen.

  • Component − Das Erstellen von Komponenten über React erleichtert die Wiederverwendung von Code und kann gut bei der Entwicklung großer Projekte eingesetzt werden.

  • Einseitiger Antwortdatenfluss – React implementiert einen unidirektionalen Antwortdatenfluss und reduziert dadurch wiederholten Code, weshalb es einfacher als die herkömmliche Datenbindung ist.

3. Einführung in die grundlegende Verwendung

基本模板<!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子目录。

Hinweis: Das Typattribut des letzten Skript-Tags ist text/babel. Dies liegt daran, dass die einzigartige JSX-Syntax von React nicht mit JavaScript kompatibel ist. Überall dort, wo JSX verwendet wird, muss type="text/babel" hinzugefügt werden. Wenn Sie JSX verwenden müssen, muss das Typattribut des Skript-Tags auf text/babel gesetzt werden. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte React Reference Manual der chinesischen PHP-Website, um mehr zu erfahren) 

补充一点：
   使用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. Verwenden Sie React über npm (verwenden Sie die Create-React-App um schnell eine React-Entwicklungsumgebung zu erstellen)

create-react-app kommt von Facebook Mit diesem Befehl kann schnell eine React-Entwicklungsumgebung ohne Konfiguration erstellt werden. Das von create-react-app automatisch erstellte Projekt basiert auf Webpack + ES6. 

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

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur Spalte „React User Manual“ der PHP-Website, um mehr zu erfahren). Hinterlassen Sie unten eine Nachricht.

Das obige ist der detaillierte Inhalt vonWas ist reagieren? Einführung in die grundlegende Verwendung von React (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Analysieren Sie die Beziehung zwischen JavaScript-Schleifen und -Bereich (Code im Anhang).Nächster Artikel：Analysieren Sie die Beziehung zwischen JavaScript-Schleifen und -Bereich (Code im Anhang).

In Verbindung stehende Artikel

Mehr sehen