react是什么？react的基本使用介绍（附实例）

寻∝梦

Lepaskan： 2018-09-11 10:47:14

asal

1725 orang telah melayarinya

本篇文章主要的讲述了关于react的一些基础知识，让大家多多了解一些关于react的基础。现在就让我们一起来看这篇文章吧

React入门系列一（初识React）

一、React简介

React是一个用于构建用户界面的JavaScript库。React主要用于构建UI，很多人认为React是MVC中的V（视图）。React起源于Facebook的内部项目。React 拥有较高的性能，代码逻辑非常简单。

二、React特点

声明式设计−React采用声明范式，可以轻松描述应用。
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX是 JavaScript语法的扩展。React开发不一定使用JSX，但建议使用。
组件 − 通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

三、基本使用介绍

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

Salin selepas log masuk

注意：最后一个script标签的type属性为text/babel 。这是因为React独有的JSX语法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上type=”text/babel” 。如果需要使用JSX，则script标签的type属性需要设置为text/babel。（想看更多就到PHP中文网React参考手册栏目中学习）

补充一点：
   使用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。

Salin selepas log masuk

四、通过npm使用React（使用create-react-app快速构建React开发环境）

create-react-app 是来自于 Facebook，通过该命令无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6 。

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

Salin selepas log masuk

本篇文章到这就结束了（想看更多就到PHP中文网react使用手册栏目中学习），有问题的可以在下方留言提问。

Atas ialah kandungan terperinci react是什么？react的基本使用介绍（附实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

react是什么？react的基本使用介绍（附实例）

React入门系列一（初识React）

一、React简介

二、React特点

三、基本使用介绍

四、通过npm使用React（使用create-react-app快速构建React开发环境）