1. React 介绍
1.1 React是什么
React由Meta公司研发，是一个用于 构建Web和原生交互界面的库
1.2 React的优势
相较于传统基于DOM开发的优势：
- 组件化的开发方式
- 不错的性能
相较于其它前端框架的优势：
- 丰富的生态
- 跨平台支持
1.3 React的市场情况
全球最流行，大厂必备
2. 开发环境搭建
2.1 使用create-react-app快速搭建开发环境
create-react-app是一个快速 创建React开发环境的工具， 底层由Webpack构建， 封装了配置细节 ，开箱即用
执行命令：
- npx create-react-app react-basic
- npx Node.js工具命令，查找并执行后续的包命令
- create-react-app 核心包（固定写法），用于创建React项目
- react-basic React项目的名称（可以自定义）
创建React项目的更多方式：
- https://zh-hans.react.dev/learn/start-a-new-react-project
2.2 react 项目文件说明
-
项目的根组件 App.js
-
项目的入口，项目从这里开始运行 index.js
2.3 index.js项目入口文件
- App.js -> index.js -> public/index.html(root)
2.4 App.js 项目根组件
3. JSX基础-概念和本质
3.1 什么是JSX
概念：
- JSX 是 JavaScript 和 XML（HTML）的缩写，表示在 JS 代码中编写 HTML 模版结构,它是React 中编写 UI 模版的方式
优势：
- HTML的声明式模版写法
- JS的可编程能力
3.2 JSX的本质
JSX 并不是标准的 JS 语法，它是 JS 的语法扩展 ，浏览器本身不能识别，需要通过 解析工具做解析 之后才能在浏览器中运行
3.3 JSX高频场景-JSX中使用JS表达式
在 JSX 中可以通过 大括号语法{} 识别 JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等
- 使用引号传递字符串
- 使用JS变量
- 函数调用和方法调用
- 使用JavaScript对象
注意：
- if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中
3.4 JSX高频场景-JSX中实现列表渲染
语法：
- 在JSX中可以使用原生JS中的map方法遍历渲染列表
-
map方法会返回一个新的数组，该数组包含通过对原始数组中的每个元素应用一个函数处理后得到的结果。
-
map 循环那个结构 return那个结构
-
key 的作用： React框架内部使用，提升更新性能
3.5 JSX高频场景-JSX中实现条件渲染
语法：
- 在React中，可以通过逻辑与运算符&&、三元表达式（?:）实现基础的条件渲染
3.6 JSX高频场景-JSX中实现复杂条件渲染
需求：
- 列表中需要根据文章状态适配三种情况，单图，三图，和无图三种模式
解决方案：
- 自定义函数 + if判断语句
4. React中的事件绑定
4.1 React 基础事件绑定
语法：
- on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法
4.2 使用事件对象参数
语法：
- 在事件回调函数中设置形参e
4.3 传递自定义参数
语法：
- 事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参
注意：
- 不能直接写函数调用，这里事件绑定需要一个函数引用
4.4 同时传递事件对象和自定义参数
5. React中的组件
5.1 组件是什么
概念：
- 一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次
- 组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用
5.2 React组件
在React中，一个组件就是 首字母大写的函数 ，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件 当成标签书写 即可
6. useState
6.1 useState基础使用
useState 是一个 React Hook（函数），它允许我们向组件添加一个 状态变量 , 从而控制影响组件的渲染结果
5 本质：
- 和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）
说明：
- useState是一个函数，返回值是一个数组
- 数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
- useState的参数将作为count的初始值
- 需要先从 react 中导入 useState 函数
6.2 修改状态的规则—状态不可变
在React中，状态被认为是只读的，我们应该始终 替换它而不是修改它， 直接修改状态不能引发视图更新
6.3 修改对象状态
规则：
- 对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改
直接修改原对象，不引发视图变化
调用set传入新对象用于修改
7. 组件的样式处理
7.1 组件基础样式方案
React组件基础的样式控制有俩种方式：
- 行内样式（不推荐）
- class类名控制
① 行内样式
-
第一个 {} 是一个语法， 第二个{} 是一个对象
② class类名控制
- index.css
- App.js
