01_React简介、基础入门

qiao若huan喜2024-08-20 9:20

React 简介、基础入门

  • [一、React 简介](#一、React 简介)
  • [二、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 组件化

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

相关推荐
一棵开花的树，枝芽无限靠近你几秒前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜3 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑11 分钟前
【vue3+vite】新一代vue脚手架工具vite，助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星12522 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12529 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
疯狂的沙粒32 分钟前
如何在 React 项目中应用 TypeScript？应该注意那些点？结合实际项目示例及代码进行讲解！
react.js·typescript
Lysun00138 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen961 小时前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋1 小时前
Electron一些概念理解
前端·javascript·electron
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作