Home > Article > Web Front-end > What is react? Introduction to the basic use of react (with examples)

What is react? Introduction to the basic use of react (with examples)

寻∝梦Original: 2018-09-11 10:47:141725browse

This article mainly talks about some basic knowledge about react, so that everyone can learn more about the basics of react. Let us read this article now

React Introduction Series 1 (First introduction to React)

1. Introduction to React

React is a JavaScript used to build user interfaces Library. React is mainly used to build UI, and many people think that React is the V (view) in MVC. React originated as an internal project at Facebook. React has high performance and the code logic is very simple.

2. Features of React

Declarative design −React adopts a declarative paradigm, which can easily describe applications.
Efficient −React minimizes interaction with the DOM by simulating the DOM.
Flexible −React works well with known libraries or frameworks.
JSX − JSX is an extension of JavaScript syntax. React development does not necessarily use JSX, but it is recommended.
Component − Building components through React makes it easier to reuse code and can be well applied in the development of large projects.
One-way response data flow − React implements one-way response data flow, thereby reducing duplicate code, which is why it is simpler than traditional data binding.

3. Basic usage introduction

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

Note: The type attribute of the last script tag is text/babel. This is because React's unique JSX syntax is incompatible with JavaScript. Wherever JSX is used, type="text/babel" must be added. If you need to use JSX, the type attribute of the script tag needs to be set to text/babel. (If you want to see more, go to the PHP Chinese website React Reference Manual column to learn)

补充一点：
   使用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. Use React through npm (use create-react-app to quickly build React development Environment)

create-react-app comes from Facebook. This command can quickly build a React development environment without configuration. The project automatically created by create-react-app is based on Webpack ES6.

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

This article ends here (if you want to see more, go to the PHP Chinese website react User Manual column to learn). If you have any questions, you can leave a message below. .

The above is the detailed content of What is react? Introduction to the basic use of react (with examples). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Analyze the relationship between JavaScript loops and scope (with code)Next article：Analyze the relationship between JavaScript loops and scope (with code)

See more