首页 >web前端 >js教程 >react是什么？react的基本使用介绍（附实例）

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

寻∝梦原创: 2018-09-11 10:47:141761浏览

本篇文章主要的讲述了关于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子目录。

注意：最后一个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。

四、通过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

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

以上是react是什么？react的基本使用介绍（附实例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：解析JavaScript循环和作用域之间的关系（附代码）下一篇：React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例）

查看更多