React介绍

- 什么是React

官方：用于构建用户界面的 JavaScript 库 。

所以React并不是一个框架，而是一个用于前端数据渲染的库。

而人们常指的React框架指的是：react+react-router+react-redux的组合。

React框架是渐进式的。

React 起源于 Facebook 的内部项目，最初来架设 Instagram ，后于 2013 年 5 月开源。

- React的特点

高性能：虚拟DOM(Virtual DOM)配合 diff 算法，最大限度地减少与 DOM 的交互。

声明式：React采用声明式编码UI，可以轻松实现交互式UI，让代码更加可行且方便调试。

组件化：通过 React 构建组件，使得代码更加容易得到复用，能够高效率的应用在大项目的开发中。

单向响应的数据流：React 中的数据是单向自顶向下传递的，父组件数据的更新会自动传递到子组件，但子组件的数据更新不会影响到父组件，也不能在子组件修改父组件传入的数据

JSX扩展：JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但官网建议使用它。

灵活：React可以与已知的库或框架很好的进行配合。

- 国内reactjs开发的项目

腾讯云：https://cloud.tencent.com/

京东会员中心：https://home.jd.com/

阿里云： https://www.aliyun.com/

七牛云控制中心 https://portal.qiniu.com/create

支付宝商家中心：https://mrchportalweb.alipay.com/user/home

……

- React官网

英文官网: https://reactjs.org/

中文官网: https://react.docschina.org/

- 下载react相关库文件

react.js: React的核心文件，如组件、Hooks等都在这个文件中。

react-dom.js: 对真实DOM的相关操作，如将虚拟DOM渲染到真实DOM里，或者从真实DOM中获取节点。（react-dom.js依赖于react.js，在引入时一定先引入react.js）

babel.min.js: Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。

- 引入React官网cdn至本地的html

网址：https://zh-hans.reactjs.org/docs/cdn-links.html

<!--  react核心库  -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!--  react用于操作DOM的扩展库  -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

- 引入babel官网的cdn至本地html

网址：https://www.babeljs.cn/setup

<!--  浏览器识别ES6语法，并且内嵌了对JSX的支持  -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

- 运行页面右击另存为

- 查看_files文件夹

- 将文件名的.下载删除即可

- 在页面中导入已下载js

<!--  react核心库  -->
<script src="lib/react.development.js"></script>
<!--  react用于操作DOM的扩展库  -->
<script src="lib/react-dom.development.js"></script>
<!--  浏览器识别ES6语法，并且内嵌了对JSX的支持  -->
<script src="lib/babel.min.js"></script>