01_React简介、基础入门

React 简介、基础入门

[一、React 简介](#一、React 简介)
- 1、是什么？
- 2、谁开发的？
- 3、为什么要学？
- [4、React 的特点](#4、React 的特点)
- [5、学习 React 之前你要掌握的 Javascript 基础知识](#5、学习 React 之前你要掌握的 Javascript 基础知识)
[二、React 入门](#二、React 入门)
- [1、相关 js 库](#1、相关 js 库)
- [2、Hello React 入门小例子---React16.8.0 版本](#2、Hello React 入门小例子---React16.8.0 版本)
- [3、为什么不用 js ，而需要使用 jsx](#3、为什么不用 js ，而需要使用 jsx)
- - [3.1 使用 jsx 创建虚拟 DOM](#3.1 使用 jsx 创建虚拟 DOM)
  - [3.2 使用 js 创建虚拟 DOM](#3.2 使用 js 创建虚拟 DOM)
  - [3.3 通过对比发现](#3.3 通过对比发现)
- [4、虚拟 DOM 与真实 DOM](#4、虚拟 DOM 与真实 DOM)
- - [4.1 关于虚拟 DOM](#4.1 关于虚拟 DOM)
- [5、JSX 语法规则](#5、JSX 语法规则)
- - [5.1 例子](#5.1 例子)
  - [5.2 语法规则](#5.2 语法规则)
  - [5.3 JSX 小练习](#5.3 JSX 小练习)
  - - [5.3.1 区分：【js 语句（代码）】与【js 表达式】](#5.3.1 区分：【js 语句（代码）】与【js 表达式】)
  - [5.4 模块与组件、模块化与组件化的理解](#5.4 模块与组件、模块化与组件化的理解)
  - - [5.4.1 模块](#5.4.1 模块)
    - [5.4.2 组件](#5.4.2 组件)
    - [5.4.3 模块化](#5.4.3 模块化)
    - [5.4.4 组件化](#5.4.4 组件化)

一、React 简介

1、是什么？

用于构建用户界面的 JavaScript 库

界面--》视图

只关注视图层

例子：使用原有的知识去展示数据的步骤

1）发送请求获取数据

2）处理数据（过滤、整理格式等）

3）操作 DOM 呈现页面（React 只关注这一步骤）

React 是一个将数据渲染为 HTML 视图的开源 Javascript 库

2、谁开发的？

由 Facebook 开发的，且开源

时间线：

1）起初由 Facebook 的软件工程师 Jordan Walke 创建

2）于 2011 年部署于 Facebook 的 newsfeed

3）随后在 2012 年部署于 Instagram（INS）

4）2013 年 5 月宣布开源

...

近十年 "陈酿"React 正在被腾讯、阿里等一线大厂广泛使用

3、为什么要学？

1）原生 Javascript 操作 DOM 繁琐、效率低（DOM-API 操作 UI）

javascript 复制代码

document.getElementById('app')
document.querySelector('#app')
document.getElementsByTagName('span')

2）使用 Javascript 直接操作 DOM，浏览器会进行大量的重绘重排

3）原生 Javascript 没有组件化编码方案，代码复用率低

js 的模块化：将非常庞大的 js 按照功能点拆分成一个个小的 js，这就要做模块化

组件化：将结构和 js 都拆分成小的部分

以上是原生 JavaScript 的痛点。

4、React 的特点

1）采用组件化模式、声明式编码，提高开发效率及组件复用率。

命令式编程：缺少任何一个步骤都没法得到结果

声明式编程：只需要说出想要的结果，过程可以省略

2）在 React Native 中可以使用 React 语法进行移动端开发。

3）使用虚拟 DOM + 优秀的 Diffing 算法，尽量减少与真实 DOM 的交互

5、学习 React 之前你要掌握的 Javascript 基础知识

1）判断 this 的指向

2）class（类）

3）ES6 语法规范，模板字符串等

4）npm 包管理器

5）原型、原型链

6）数组常用方法，筛选最值、条件求和等

7）模块化

二、React 入门

文档： https://react.docschina.org/

1、相关 js 库

1） react.js: React 核心库

jsx

在 js 的基础上增加一些语法和规范，使用 babel 来转换

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

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

2、Hello React 入门小例子---React16.8.0 版本

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串
      const vDom = <h1>Hello, React</h1>
      // 2、渲染虚拟 DOM 到页面
      // ReactDOM.render(虚拟DOM，容器)
      ReactDOM.render(vDom, document.getElementById('test'))
    </script>
  </body>
</html>

3、为什么不用 js ，而需要使用 jsx

3.1 使用 jsx 创建虚拟 DOM

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串
      const vDom = <h1>Hello, React</h1>
      // 2、渲染虚拟 DOM 到页面
      // ReactDOM.render(虚拟DOM，容器)
      ReactDOM.render(vDom, document.getElementById('test'))
    </script>
  </body>
</html>

3.2 使用 js 创建虚拟 DOM

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript">
      // 1、创建虚拟 DOM React.createElement(标签名， 标签属性， 标签内容)
      const vDom = React.createElement('h1', { id: 'title' }, 'Hello, React')
      // 2、渲染虚拟 DOM 到页面
      // ReactDOM.render(虚拟DOM，容器)
      ReactDOM.render(vDom, document.getElementById('test'))
    </script>
  </body>
</html>

3.3 通过对比发现

当标签内容都是 'Hello, React' 的时候差别不大。

但是当标签 h1 需要嵌套一个 span 标签再显示 'Hello, React' 的时候，

js 创建就需要这么写

javascript 复制代码

React.createElement(
  'h1',
  { id: 'title' },
  React.createElement('span', {}, 'Hello, React'),
)

jsx 就这么写

javascript 复制代码

const vDom = (
  <h1>
    <span>Hello, React</span>
  </h1>
)

jsx 创建虚拟 DOM 就是原生 js 写语法糖

4、虚拟 DOM 与真实 DOM

4.1 关于虚拟 DOM

（1）本质是 Object 类型的对象（一般对象）

（2）虚拟 DOM 比较"轻"，属性比较少，真实 DOM 比较"重"。因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性。

（3）虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上。

5、JSX 语法规则

5.1 例子

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX 语法规则</title>
    <style>
      .title {
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      let MyId = 'TestIn'
      // 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串
      const vDom = (
        <div>
          <h1 className="title" id={MyId.toLowerCase()}>
            <span style={{ color: 'red', fontSize: '120px' }}>
              Hello, React
            </span>
          </h1>
          <h1 className="title" id={MyId.toUpperCase()}>
            <span style={{ color: 'red', fontSize: '80px' }}>Hello, React</span>
          </h1>
          <input type="text"></input>
          <Good></Good>
        </div>
      )
      // 2、渲染虚拟 DOM 到页面
      // ReactDOM.render(虚拟DOM，容器)
      ReactDOM.render(vDom, document.getElementById('test'))
    </script>
  </body>
</html>

5.2 语法规则

（1）全称 Javascript XML

（2）react 定义的一种类似于 XML 的 JS 扩展语法 ：JS+XML

a. XML 早期用于存储和传输数据

javascript 复制代码

<student>
  <name>Tom</name>
  <age>19</age>
</student>

使用 json 进行存储： "{"name": "Tom", "age": 19}"

（3）定义虚拟 DOM 时，不要写引号

（4）标签中混入 JS 表达式时要用花括号 {}

（5）样式的类名指定不要用 class，需要使用 className

a. class 是 es6 中的关键字，react 在设计的时候避开了这个，所以用 className

（6）内联样式，要用 style={{key: value}} 的形式去写

（7）虚拟 DOM 必须只有一个根标签

（8）标签必须闭合

（9）标签首字母

a. 若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错

b. 若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错

5.3 JSX 小练习

在页面上动态展示前端 js 框架列表

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx小练习</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 此处一定要写babel -->
    <script type="text/babel">
      /*
        一定注意区分：【js 语句（代码）】与【js表达式】
        1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
            下面这些都是表达式:
                (1) a
                (2) a+b
                (3) demo(1)
                (4) arr.map()
                (5) function test(){}

        2.js语句（代码）：控制代码走向的
            下面这些都是语句（代码）:
                (1) if(){}
                (2) for(){}
                (3) switch(){case: xxx}
        */
      let data = ['Angluar', 'React', 'Vue']
      // 1、创建虚拟 DOM.
      const vDom = (
        <div>
          <h1>前端 js 框架列表</h1>
          <ul>
            {data.map((el, inx) => {
              return <li key={inx}>{el}</li>
            })}
          </ul>
        </div>
      )
      // 2、渲染虚拟 DOM 到页面
      // ReactDOM.render(虚拟DOM，容器)
      ReactDOM.render(vDom, document.getElementById('test'))
    </script>
  </body>
</html>

5.3.1 区分：【js 语句（代码）】与【js 表达式】

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

下面这些都是表达式:

(1) a

(2) a+b

(3) demo(1)

(4) arr.map()

(5) function test(){}

2.js 语句（代码）：控制代码走向的

下面这些都是语句（代码）:

(1) if(){}

(2) for(){}

(3) switch(){case: xxx}

5.4 模块与组件、模块化与组件化的理解

5.4.1 模块

1）理解：向外提供特定功能的 js 程序，一般就是一个 js 文件

2）为什么要拆分成模块：随着业务逻辑增加，代码越来越多且复杂

3）作用：复用 js ，简化 js 的编写，提高 js 运行效率

5.4.2 组件

1）理解：用来实现局部功能效果的代码和资源的集合（html、css、js、image 等）

2）为什么：一个界面的功能更复杂

3）作用：复用编码，简化项目编码、，提供运行效率

5.4.3 模块化

当应用的 js 都以模块来编写，这个应用就是一个模块化的应用

5.4.4 组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用