React-1.认识及简单使用

一、React的简介

1、介绍

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它

2、特点

1）. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

2）. 灵活 −React可以与已知的库或框架很好地配合。

3）. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

4）. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

二、环境搭建

1、引入文件的方式

一、引入js库

1、React.js

React的核心库，解析组件,识别jsx

处理有dom相关的操作

Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平
https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js

环境解析

react: 核心包，解析组件,识别jsx
react-dom: 编译 -> 浏览器
react-scrpts: react的项目环境配置
manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
registerServiceWorker.js支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
对Internet Explorer 9,10和11的支持需要polyfill。

3、框架对比

与其他框架的共同点是，都采用虚拟dom，和数据驱动

	angularJs	reactJs	vueJs
控制器	√	-	-
过滤器	√	-	√
指令	√	-	√
模板语法	√	-	√
服务	√	-	-
组件	-	√	√
jsx	-	√	2.0之后加入

简单示例：

需要引入的js：可在线引入或本地下载引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入顺序不可变 -->
    <script src="./js/react.min.js"></script>
    <script src="./js/react-dom.min.js"></script>
    <script src="./js/babel.min.js"></script>
</head>
<body>
    <div id="box">
    </div>
</body>

</html>
<script type="text/babel">
    const h =
    <h1>我是aaa</h1>; 
    ReactDOM.render(h, document.getElementById("box"));
</script>

注意：script标签的type取值为：text/babel

总结：一个react的程序，就是把JSX通过ReactDOM.render()函数渲染到网页上。

另外，React的代码也可以单独写在一个文件里，扩展名为js，或者jsx。引入时，记住type=“text/babel”