【React】1.0 React入门

1.0 开始学习React——React全家桶

• React基础
• React-Router路由库
• PubSub消息管理库
• Redux集中式状态管理的库
• Ant-Design精美的UI组件库

2.0 React是什么

用于构建用户界面的JavaScript库（视图）。
前端：
1.发送请求获取数据
2.处理数据（过滤、整理格式等）
3.操作DOM呈现页面

Facebook开发，且开源。（软件工程师Jordan Walke）

3.0 React的特点

1.采用组件化模式、声明式编码，提高开发效率及组件复用率
2.在React Native中可以使用React语法进行异动端开发
3.使用虚拟Dom+优秀的Diffing算法，尽量减少与真实DOM的交互

4.0 学习React之前需要掌握的JavaScript基础知识

• 判断this的指向
• class（类）
• ES6语法规范
• npm包管理器
• 原型、原型链
• 数组常用方法
• 模块化

5.0 官网

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

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

6.0 相关js库

1. react.js：React核心库。
2. react-dom.js：提供操作DOM的react扩展库。
3. babel.min.js：解析JSX语法代码转为JS代码的库

7.0 开发第一步

下载js库

image.png

新建一个文件夹“react_basic”，新建文件夹“js”,将几个文档放入其中。

image.png

8.0 React为什么不用js而用jsx？

jsx仅在js基础上加入较少的规则。
jsx解决虚拟DOM编写繁琐的问题。

如下两段代码等价：

也就是说jsx最终会翻译成js执行，省去的麻烦是不用程序员自己去编写冗长的代码。

9.0 虚拟DOM到底是什么

就是一个一般的js对象，Object类型。
测试代码如下：

10.0 jsx语法规则

1. 全称: JavaScript XML
2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
3. 作用: 用来简化创建虚拟DOM

1. 写法：var ele =

   Hello JSX!

2. 注意1：它不是字符串, 也不是HTML/XML标签
3. 注意2：它最终产生的就是一个JS对象

4. 标签名任意: HTML标签或其它标签
5. 标签属性任意: HTML标签属性或其它
6. 基本语法规则

1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2. 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

7. babel.js的作用

1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

最终效果如下:

image.png

11.0 JSX2.0

JSX练习
需求: 动态展示如下列表

image.png

我们可以如下写：

但我们日常开发一般都需要动态显示，代码修改如下：

会发现如上代码会报错的。

        /* 
            一定注意区分：【js语句(代码)】与【js表达式】
                    1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
                                下面这些都是表达式：
                                        (1). a
                                        (2). a+b
                                        (3). demo(1)
                                        (4). arr.map() 
                                        (5). function test () {}
                    2.语句(代码)：
                                下面这些都是语句(代码)：
                                        (1).if(){}
                                        (2).for(){}
                                        (3).switch(){case:xxxx}
        
     */

修改代码：

以上代码执行时没有问题的，但是会报错：

image.png

必须要有一个唯一的key属性。

所以可以改写成如下：

END