React 入门

1. React 介绍

了解 react 的历史背景和基本概念
React 起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。
React 是最流行的前端框架之一。对比近两年 Vue 和 Angular 的下载量，还有 2021 年开发者使用的 web 框架的 比例 ，可以看到 React 是前端工程师应该必备技能之一，现在很多大厂也在使用它。

React 是一个用于构建用户界面的 JavaScript 库。可以理解它只负责 MVC 中的视图层渲染，不直接提供数据模型和控制器功能。react-router 实现路由，redux 实现状态管理，可以使用它们来构建一个完整应用。
React 中文站，https://zh-hans.reactjs.org/
总结： React 是 Facebook 开源的，现在它是最流行的前端框架大厂必备，React 本身是一个构建 UI 的库，如果需要开发一个完整的 web 应用需要配合 react-router，redux，…等。

2. React 特点

了解 react 的三个核心特点

• 声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。 以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

• 组件化创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

• 一次学习，跨平台编写无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。 React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

总结： 声明式 UI 更清晰快捷，组件化开发更灵活，可支持 SSR,SPA ,NativeApp,VR 多平台。

3. React 脚手架

掌握使用 create-react-app 脚手架创建项目
创建项目方式：

• 全局安装脚手架再使用命令创建项目
• 使用 npx 远程调用脚手架创建项目

方式 1：

• 全局安装

全局安装脚手架
npm i create-react-app -g

• 创建项目

project-name 项目名称
create-react-app project-name
方式 2：

• npx 安装，npm5.2+支持

project-name 项目名称
npx create-react-app project-name
推荐： 使用方式 2这样每次使用的最新脚手架创建项目，创建完毕使用 npm start 启动项目。

4. React 基本使用

在 create-react-app 脚手架创建项目中，掌握使用 react 基本步骤
使用步骤：

• 导入 react react-dom 两个包
• 使用 react 创建 react 元素（虚拟 DOM）
• 使用 react-dom 渲染 react 元素

落地代码：src 内文件删除，创建src/index.js

• 导包

// 负责创建react元素
import React from ‘react’;
// 负责把react元素渲染到页面
import ReactDom from ‘react-dom’;

• 创建 react 元素

// 参数1：标签名称
// 参数2：属性集合 特殊 class==>className for==>htmlFor
// 参数3：标签内容
const element = React.createElement(‘h1’, { id: ‘el’ }, ‘Hello React’);

• 渲染 react 元素

// #root在public/index.html上
ReactDom.render(element, document.getElementById(‘root’));
总结： 使用 react 创建元素，使用 react-dom 渲染元素。

5. React 创建元素练习

掌握使用 react 创建嵌套元素
练习题目：

• 使用 react 创建如下元素

• 可单标签

// 没内容可以写成单标签形势

• 有根节点

// 1. 使用 React.Fragment 代码片段
import React from ‘react’;
import ReactDom from ‘react-dom’;
const element = (

• 用小括号

// 有换行的时候最好使用()可以让标签对其，避免没必要的错误
const element = (
<>

• 那些特殊属性？
  • className htmlFor
• 什么时候使用单标签？
  • 没有内容的标签
• 必需又根标签，如果不想产生无用标签怎么办？
  • 使用 <></> 代码片段标签

• 建议多行用()包裹

  9. JSX 嵌入表达式

  掌握在JSX中嵌入JS表达式，进行渲染
  知识内容：在JSX中使用{}嵌入JS表达式

• 展示数据

• 进行运算
• 三元运算
• 使用函数
• 使用 JSX
• 使用注释

演示代码：
import React from ‘react’;
import ReactDom from ‘react-dom’;

// 数据
const data = {
name: ‘tom’,
age: 18,
};

// 函数
const up = () => {
return data.name.toUpperCase();
};

// jsx表达式
const list = (

• jack


• tony

10. JSX 条件渲染

掌握在JSX中使用分支语句、三元运算、逻辑运算进行条件渲染
知识内容：

• 使用分支语句 if/else 完成条件渲染
• 使用 三元运算符 完成条件渲染
• 使用 逻辑运算符 完成条件渲染

演示代码：

1. if/else 条件渲染

const loading = true;

// 不能再JSX中写语句，但，可以充分利用JS能力
const getContent = () => {
if (loading) {
return

1. 三元运算符 完成条件渲染

const loading = true;

const element = (

1. 逻辑运算 完成条件渲染

const loading = true;

const element = (

11. JSX 列表渲染

掌握在JSX中使用Array.map()来进行列表的渲染
知识内容：

• 可以渲染 JSX 数组
• 使用 map 渲染列表
• 直接在 JSX 中使用 map 渲染列表
• key 属性使用

演示代码：

1. 可以渲染 JSX 数组

// 1. const list = [‘tom’, ‘jack’, ‘tony’] 把数组转换成如下JSX数组
const list = [

{list}

1. 使用 map 渲染列表

// 1. 数据
const list = [‘tom’, ‘jack’, ‘tony’];
// 2. 转jsx数组
const list2 = list.map((item) =>

{list2}

1. 直接在 JSX 中使用 map 渲染列表

// 1. 数据
const list = [‘tom’, ‘jack’, ‘tony’];
// 2. 使用 map调用其实也是js表达式
const element = (

{list.map((item) => (

• {item}

))}

1. key 属性使用

// Warning: Each child in a list should have a unique “key” prop.
// 1. 数据
const list = [‘tom’, ‘jack’, ‘tony’];
// 2. 使用
const element = (

{list.map((item) => (

• {item}

))}

12. JSX 列表渲染练习

巩固JSX中如何渲染列表
练习题目：

• 使用以下数据，渲染无序列表，显示姓名和是否成年

const list = [
{ id: 100, name: ‘tom’, age: 15 },
{ id: 101, name: ‘jack’, age: 18 },
{ id: 102, name: ‘tony’, age: 20 },
];
落地代码：
import ReactDom from ‘react-dom’;

// 1. 数据
const list = [
{ id: 100, name: ‘tom’, age: 15 },
{ id: 101, name: ‘jack’, age: 18 },
{ id: 102, name: ‘tony’, age: 20 },
];

// 2. 使用
const element = (

{list.map((item) => {
return (

• 
  

  姓名：{item.name}

  
  

  是否成年：{item.age > 16 ? ‘是’ : ‘否’}

  
  

);
})}

13. JSX 样式-style 方式

掌握使用 style 属性设置样式
知识内容：

• style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串
• style 中的 key 采用小驼峰命名是为了与 JS 访问 DOM 节点的属性保持一致
• React 会自动添加 ”px” 后缀到内联样式为数字的属性后，其他单位需要手动添加

演示代码：

• 需求：去掉上一个列表案例 ul 的点，加上背景样式，设置字体大小，给第一个 p 设置两倍字体大小

import ReactDom from ‘react-dom’

// 1. 数据
const list = [
{ id: 100, name: ‘tom’, age: 15 },
{ id: 101, name: ‘jack’, age: 18 },
{ id: 102, name: ‘tony’, age: 20 }
]

+// 2. 样式
+const styleObject = {
+ listStyle: ‘none’,
+ backgroundColor: ‘pink’,
+ fontSize: 20
+}
// 3. 使用
const element = (
+

{list.map(item => {
return (

• 
  +

  姓名：{item.name}

  
  

  是否成年：{item.age > 16 ? ‘是’ : ‘否’}

  
  

)
})}

• style 属性使用 {} 绑定样式对象，默认 px 单位可以省略使用数字，一般需要动态设置属性样式使用这种方式

问题：

• 在多数情况下，应使用 className 属性来引用外部 CSS 样式表中定义的 class

  14. JSX 样式-className 方式

  掌握使用 className 设置类名来使用样式
  知识内容：

• className 设置类名，和 class 属性要求一样只能是字符串

• 如果需要根据数据设置类名，可以使用 {} 嵌入 JS 表达式实现

演示代码：

• 需求：在元素 button上根据 isActive 数据的值添加 active 类名

index.css
.button {
width: 100px;
height: 40px;
border: 1px solid #eee;
color: #999;
border-radius: 4px;
display: inline-block;
text-align: center;
line-height: 40px;
box-shadow: 2px 2px 10px #ccc;
cursor: pointer;
user-select: none;
}

.button.active {
background: #069;
color: #fff;
border-color: #069;
}

.button.block {
display: block;
width: 100%;
}
index.js
import ReactDom from ‘react-dom’;
// 在src下新建index.css文件，导入进来即可
import ‘./index.css’;

const isActive = false;

const element = (
按钮
);

ReactDom.render(element, document.getElementById(‘root’));
总结： 如果只是个别类名的变化使用 className 属性嵌入 三元表达式 即可完成
思考： 如果是多个类名的变化呢？

15. JSX 样式-动态 className

掌握在 React 中使用 JS 原生的能力处理多个类的动态绑定
知识内容：

• 在使用 className 的时候遇见多个类名动态绑定，可以模仿 vue 使用对象的方式
• vue 中绑定类名的时候使用 {类名:布尔} 用布尔值决定是否加上这个类名

演示代码：

• 需求：在元素 button上根据 isActive 数据的值添加 active 类名，isBlock 数据的值添加 block 类名

import ReactDom from ‘react-dom’;
import ‘./index.css’;

// 数据
const isActive = false;
const isBlock = false;

// 类名对象
const classObject = {
button: true,
active: isActive,
block: isBlock,
};

// 转换成字符串
const className = Object.keys(classObject)
.filter((key) => classObject[key])
.join(‘ ‘);

const element = 按钮;

ReactDom.render(element, document.getElementById(‘root’));
总结： 使用 JS 原生的能力处理多个类名的动态绑定，当然这样的需求已经有 classnames 库给我们解决了

16. JSX 样式-classnames 库

掌握使用 classnames 库来完成 className 属性值的动态绑定
知识内容：

• 如何安装导入 classnames 库
• classnames 的 API 认识
• 使用 classnames 处理 className 属性值动态绑定

演示过程：

• 安装导入 classnames 文档

安装 npm i classnames
yarn add classnames
import ReactDom from ‘react-dom’
+ // 导入
+ import classNames from ‘classnames’
import ‘./index.css’

const element = (
按钮
)

ReactDom.render(element, document.getElementById(‘root’))

• 认识 classnames API

// 1. 使用字符串
classNames(‘foo’, ‘bar’); // foo bar
// 2. 使用对象
classNames({ foo: true, bar: true }); // foo bar
// 3. 使用数组
classNames([‘foo’, ‘bar’]); // foo bar
// 4. 混合使用
classNames(‘foo’, { bar: true }); // foo bar

• 需求：在元素 button上根据 isActive 数据的值添加 active 类名，isBlock 数据的值添加 block 类名

import ReactDom from ‘react-dom’;
// 1. 导入classnames
import classNames from ‘classnames’;
import ‘./index.css’;

// 2. 数据
const isActive = true;
const isBlock = true;

// 3. 产生类名
const className = classNames(‘button’, {
active: isActive,
block: isBlock,
});

const element = 按钮;

ReactDom.render(element, document.getElementById(‘root’));
总结： 推荐以后开发项目中使用第三方的库来解决className的值绑定问题

17. JSX 综合案例

能够使用今日学习的知识完成一个优酷评论列表展示的案例

热门评论(3)

• __RichMan2021/10/12 10:10:23这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集…锁了🔒
• 糖蜜甜筒颖2021/09/23 15:12:44突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程
• 大星的妈妈2021/07/01 00:30:51第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有

YouKu
优酷评论列表展示的案例
大致步骤：

• 使用 jsx 编写静态评论列表结构，引入样式
• 定义评论列表数据，根据数据动态展示评论

落地代码：

1. 准备样式 index.css
2. 编写静态结构 index.js

import ReactDom from ‘react-dom’;
import ‘./index.css’;
const element = (

1. 准备数据 index.js

const comments = [
{
id: 100,
name: ‘__RichMan’,
avatar: ‘https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6‘,
content: ‘这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集…锁了🔒’,
time: ‘2021/10/12 10:10:23’,
vip: true,
},
{
id: 101,
name: ‘糖蜜甜筒颖’,
avatar:
‘https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg‘,
content:
‘突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程’,
time: ‘2021/09/23 15:12:44’,
vip: false,
},
{
id: 102,
name: ‘大星的妈妈’,
avatar: ‘https://static.youku.com/lvip/img/avatar/310/6.png‘,
content:
‘第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有’,
time: ‘2021/07/01 00:30:51’,
vip: true,
},
];

1. 进行渲染 index.js

const element = (

18. 今日总结

回顾当天主要知识内容

• 1.如何描述 React ？
  • React 使用一个构建用户界面的 JavaScript 库，有声明式 UI、组件化、一次学习跨平台编写。
• 2.如何创建 React 项目？
  • 使用 npx create-react-app 项目名称 来创建
• 3.使用 React 的基本步骤？
  • 导入react react-dom ，然后使用 createElement 创建元素，最后使用render渲染
• 4.什么是 JSX，它的特点是什么？
  • JS 扩展语法，可以在 JS 中书写 XML 语法，更加 简洁、直观、高效 的声明 UI 界面
• 5.在 JSX 中如何完成数据插入？
  • 使用 JS 表达式
• 6.在 JSX 中如何完成条件渲染？
  • 使用 分支语句 三元表达式 逻辑运算 等
• 7.在 JSX 中如何完成列表渲染？
  • 使用 map 在JSX中进行遍历
• 8.在 JSX 中如何完使用样式？
  • 使用 style 绑定 css 样式对象，使用 className 绑定类名字符串
• 9.在 JSX 中如何便捷的操作类名？
  • 使用 classnames 这个库

代码片段： 安装 ES7 React/Redux/GraphQL/React-Native snippets vscode 插件