一、react介绍

一、简介

react 可以开发网站还能开发手机APP，和原生的差不多。可以实现跨平台。既能运行在服务器端也能运行在浏览器上。

 

二、官网

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

中文官网: https://doc.react-china.org/

 

三、介绍描述

用于构建用户界面的 JavaScript 库(只关注于View)

由Facebook开源

 

四、React的特点

Declarative(声明式编码)

Component-Based(组件化编码)

Learn Once, Write Anywhere(支持客户端与服务器渲染)

高效，效率高

单向数据流

 

五、React高效的原因

虚拟(virtual)DOM, 不总是直接操作DOM

DOM Diff算法, 最小化页面重绘

 

六、在线的开源库，方便引入

https://www.bootcdn.cn/

 

七、相关js库

react.js: React的核心库

react-dom.js: 提供操作DOM的react扩展库

babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

 

七、React的基本使用

1、引入js

<!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

2、把创建的虚拟DOM渲染到容器中

<!--容器-->
<div id="test"></div>

<!--react 核心库-->
<script type="text/javascript" src="./lib/react.development.js"></script>
<!--react 专门操作DOM的扩展库-->
<script type="text/javascript" src="./lib/react-dom.development.js"></script>
<!---->
<script type="text/javascript" src="./lib/babel.min.js"></script>
<script type="text/babel">//text/babel 用来告诉babel.min.js解析jsx语法
	//1.创建虚拟Dom元素对象
	var vDom=<h1>Hello React!</h1> //不是字符串，不要加引号，这个就是jsx语法写法
	//2. 将上面创建的虚拟DOM渲染到页面真实Dom容器中
	ReactDOM.render(vDom,document.getElementById('test'))
</script>

3、浏览器查看

官方文档：https://zh-hans.reactjs.org/docs/add-react-to-a-website.html

 

八、使用React开发者工具调试

Google浏览器的扩展插件React Developer Tools_0.15.3_0.crx

下载：https://download.csdn.net/download/chunxiaqiudong5/12057317

安装：Google浏览器--》扩展