目录
前言
开始学React了，看的是b站尚硅谷React教程
以下是第一章内容：React入门
一、React简介
1. React是什么
官网：React是用于构建用户界面的JavaScript库
在页面上展示用户信息，以下三步：
①发送请求获取数据
②处理数据（过滤、整理格式等）
③操作DOM呈现页面 （React只关注视图，只管页面的呈现）
React是一个将数据渲染为HTML视图的开源JavaScript库
2. 谁开发的
3. 为什么要学
①原生js操作DOM繁琐、效率低（DOM-API操作UI）
②使用js直接操作DOM。浏览器会进行大量的重绘重排
③原生js没有组件化编码方案，代码复用率低
4. React的特点
①采用组件化模式、声明式编码，提高开发效率及组件复用率（原来是命令式编码）
②在React Native中可以使用React语法进行移动端开发
③使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互
5. 学习React之前你要掌握的JS基础知识
判断this指向
class （类、实例、继承）
ES6语法规范（箭头函数、模板字符串、解构赋值）
npm包管理器
原型、原型链
数组常用方法 （统计数组、遍历数组、过滤数组、条件筛选、条件求和、最值）
模块化
二、hello_react 案例
在教学视频下的评论中有课件资料的百度网盘链接
03_依赖包中有两个版本，旧版本是16.8
里面有四个js文件
babel.min.js
两处见过babel：①ES6 ==> ES5 ②jsx ==>jsprop-types.js：目前用不上react.development.js：react核心库react-dom.development.js：react扩展库
步骤：
①放容器
②引入核心库（注意引入顺序）
③写script标签，注意"type=text/babel"
④创建虚拟DOM（注意标签外不加引号），渲染虚拟DOM到页面
三、虚拟DOM的两种创建方式
- 纯JS方式（一般不用，太繁琐）
- JSX方式
JSX方式的优势体现在多层标签嵌套时。
JSX这种写法是原始JS写法的语法糖
四、虚拟DOM与真实DOM
关于虚拟DOM：
1.本质是Object类型的对象（即一般对象）
2.虚拟DOM比较“轻”（属性比较少），真实DOM比较“重”。因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上
五、jsx语法规则
-
全称：JavaScript XML
-
react定义的一种类似于XML的JS扩展语法：JS+XML
XML早期用于存储和传输数据
后来JSON用的比较多，但XML也不是完全不用，比如微信公众号服务器和开发者服务器之间用XML -
jsx语法规则：
1.定义虚拟DOM时，不要写引号
2.标签中混入JS表达式时要用{}
3.样式的类名指定不要用class，要用className
4.内联样式，要用style={ {key:value}}的形式去写（外层{}表示要写js的表达式了，内层{}表示写的不是js里的函数 数组 而是一个对象）
5.虚拟DOM只能有一个根标签 （比如，如果想放两个<h2>标签，可以在最外层包裹一个<div>）
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
六、jsx小练习
需求：动态展示如下列表
把数据放data里，然后用data.map()给每项数据加个<li></li>标签。
一定注意区分：【js语句（代码）】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式： (只要能用变量(const x=**)接到， 就是表达式)
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test() {}
2.语句(代码)：
下面这些都是语句(代码)： (变量接不到) (控制代码走向)
(1). if(){}
(2). for(){}
(3). switch(){case:×××}
七、组件与模块
模块： 一个模块一般就是一个js文件
模块化： 把index.js按不同的功能点拆分成a.js b.js c.js
组件： 用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
组件化： 把一个复杂功能拆分成多个组件
八、写在后面
以上是第一章内容：React入门
下一章：React面向组件编程