React

区别

vue：渐进式的JavaScript框架
react：构建用户界面的 JavaScript 库

框架：有自己的结构代码规定。库：只提供HTML代码

脚手架

使用 React 脚手架创建项目

命令：👍npx create-react-app react-basic

npx create-react-app 是固定命令，表示先通过npm下载create-react-app脚手架模块包
create-react-app 是 React 脚手架的名称
react-basic 表示项目名称，可以修改

npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用

启动项目：yarn start or npm run start

项目目录结构说明和调整

说明：
- src 目录是我们写代码进行项目开发的目录
- 查看 package.json 两个核心库：react、react-dom（脚手架已经帮我们安装好，我们直接用即可）
调整：
1. 删除 src 目录下的所有文件
2. 创建 index.js 文件作为项目的入口文件，在这个文件中写 React 代码即可

报错：
Module not found: Error: Can't resolve 'web-vitals' in 'E:\react\daodao-react\src'
解决方法：

src 文件夹下找到 reportWebVitals.js 文件，在 index.js 中注释掉这两句即可运行。

基本使用

基本步骤

使用步骤

导入 react 和 react-dom
1. react：负责创建元素：虚拟dom元素
2. react-dom：负责渲染react元素
```
import React from "react";
import ReactDOM from "react-dom";
```
创建 react 元素

语法：React.createElement("标签的类型", {标签的属性名: 属性值}, "标签的内容")

不需要给标签设置属性值时，可以设为空对象 {} 或者 null 。
```
const title = React.createElement('h1', {id: 'title', class: 'demo'}, '刀刀')
```
注意一：

创建元素是在 js 文件中创建，js 文件中 class 是关键字，因此要用 className 替代 class 。注意二：

react 和 vue 不一样，他不能做 html 的解析，如下所示。
```
const ulNode = React.createElement('ul', {id: 'chao', className: 'lis'}, '<li>刀刀</li>')
ReactDOM.render(ulNode, document.getElementById('root'))
```

渲染 react 元素到页面

ReactDOM.render(title, document.getElementById('root'))

模块与组件

模块

向外提供特点功能的js程序，一般就是一个js文件
拆分模块可以复用，简化编写，提高运行效率

组件

实现局部功能效果的代码和资源的集合
拆分组件可以复用，简化编码，提高运行效率

模块化

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

组件化

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

JSX 语法糖

JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。

注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法。

基本使用

导入react和reactDOM

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

创建react元素

// 创建元素
const title = <h1 title="哈哈"></h1>

渲染元素

// 渲染元素
ReactDOM.render(title, document.getElementById('root'))

语法规则

定义虚拟 dom 时，不要写引号
标签中混入js表达式要使用 {} ，不能使用js语句（如if、for）
- 表达式：一个表达式会产生一个值，可以放在任何一个需要的地方
  1. a
  2. a+b
  3. demo(1)
  4. arr.map()
  5. function test() {}
- 语句（代码）
  1. if() {}
  2. for() {}
  3. switch() {case:xxxx}
样式类名指定不能使用class，要用className
内联样式要用 style={{key:value}} 的形式写
虚拟dom必须只有一个根标签
标签必须闭合
标签小写字母开头，react会去找html中同名的标签，无该标签对应的同名元素则报错。标签大写字母开头，react会渲染对应的组件，组件无定义则报错。

const myId = 'atDaodao'
const myData = 'Hello,daodao'
const Vnode = (
  <div>
    <h1 className="title" id={myId}>
      <span style="{{color: 'white', fontSize: '29px'}}">{myData}</span>
    </h1>
    <input type="text" />
  </div>
)

JSX 注意点

只有在脚手架中才能使用 jsx 语法

因为JSX需要经过 babel 的编译处理，才能在浏览器中使用。脚手架中已经默认有了这个配置。
JSX必须要有一个根节点， <></> <React.Fragment></React.Fragment>
没有子节点的元素可以使用/>结束
JSX中语法更接近与 JavaScript
- class : className
- for: htmlFor

JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止自动插入分号的bug

const ulNode = (
  <ul>
    <li>橘子</li>
    <li>菠萝</li>
    <li>苹果</li>
  </ul>
)

插值表达式

在jsx中可以在{}来使用js表达式。何为表达式？在js文件中可以放在等号右边的都是表达式。

变量：string、boolean、null、undefined、number

引用类型：数组、对象、函数

其他：三元表达式、逻辑运算符、JSX

基本使用
```
const name = 'zs'
const age = 18
const title = (
  <h1>
    姓名：{name}, 年龄：{age}
  </h1>
)
```
注意：

react 自称自己是构建用户界面的库，因此他认为界面中放一个 null 、undefined 或 boolean 没有意义因此直接在插值表达式中放入这三个东西不会显示任何东西。

想要显示很简单，前面使用 String() 转为字符串即可。
```
<p>{undefined} - {String(undefined)}</p>
```
可以访问对象的属性

插值表达式内不能直接放入对象，你敢放它就敢报错，需要使用对象点属性的方式。
```
const title = <div>{person.name}</div>
```
可以访问数组的下标

数组中的每一项，都会被当作一个dom节点渲染出来。因此可以直接在数组内放dom元素。
```
const arr = [<div>1</div>, <div>2</div>, <div>3</div>]
const title = <div>{arr}</div>
```

可以使用三元运算符与逻辑运算符

const isShow = true
const title = (
  <div>
    <div>{isShow ? '真' : '假'}</div>
    <div>{isShow && '刀刀'}</div>
  </div>
)

可以调用方法

react中不能直接放函数，如果想使用，则需要调用这个函数，否则报错。

const sayHi = () => {
  return 'hello'
}
const title = (
  <div>
    <div>{sayHi()}</div>
  </div>
)

JSX本身

虽然可以使用JSX本身，但是实际上也是一个虚拟DOM节点，没必要多此一举，可以直接插入。一般配合逻辑运算符使用。
```
const isShow = true
const title = (
  <div>
    <div>{isShow && <div>显示</div>}</div>
  </div>
)
```

总结

基础数据类型
- 正常显示：number、string
- 不显示：null、undefined、boolean
引用数据类型
- 对象：不能直接放在插值表达式中，会报错
- 数组：数组内每项元素，都会被当作dom节点渲染出来
- 函数：函数本身也是对象，不能直接放在插值中，通常是要调用函数
其它

条件渲染

在react中，一切都是javascript，所以条件渲染完全是通过js来控制的

`if/else` 渲染

和 v-if 一样，如果不符合条件，则不创建该节点。

const isShow = false
const isLoading = () => {
  if (isShow) {
    return <h1>加载中</h1>
  } else {
    return <p>加载完毕</p>
  }
}

const title = (
  <div>
    <div>{isLoading()}</div>
  </div>
)

注意：

if/else 不能直接写在插值表达式中，它是一个语句，一般都需要配合函数返回值来使用。

三元表达式与逻辑运算符渲染

const isShow = false

const title = (
  <div>
    <div>{isShow ? <h1>加载中</h1> : <p>加载完毕</p>}</div>
    <div>{isShow && <h1>加载中</h1>}</div>
    <div>{!isShow && <p>加载完毕</p>}</div>
  </div>
)

列表渲染 - 数组渲染

我们经常需要遍历一个数组来重复渲染一段结构

在react中，通过map方法进行列表的渲染（💥 map方法需要返回值）

列表的渲染

const arr = ['apple', 'banana', 'orange']
const arrNode = arr.map((item) => {
  return <div>{item}</div>
})

const title = (
  <>
  {arrNode}
  </>
)

直接在JSX渲染

const arr = ['apple', 'banana', 'orange']

const title = (
  <>
  {arr.map((item) => {
    return <div>{item}</div>
  })}
  </>
)

key属性的使用

key的作用和v-for的key一样，提高更新效率。

const arr = ['apple', 'banana', 'orange']
const arrNode = arr.map((item, index) => {
  return <div key={index}>{item}</div>
})

const title = (
  <>
  {arrNode}
  </>
)

样式处理

行内样式-style

const title = (
  <div style={{color: 'red', fontSize: 14}}>刀刀</div>
)

注意：

style的值，需要两个花括号。第一个花括号表示接收表达式，第二花括号表示样式对象
css属性名，不允许使用连字符
单位px可以省略，简写成数字形式，如 fontSize: 20

外部样式+类名-className

import './base.css'

const title = (
  <div className="title">刀刀</div>
)

总结

JSX 是 React 的核心内容，用于创建虚拟 DOM，JSX是 React.createElement() 的语法糖，
JSX 表示在JS代码中书写 HTML 结构，是 React 声明式的体现
使用 JSX 配合嵌入的 JS 表达式 {} ，可实现数据渲染，条件渲染，列表渲染，可以渲染任意的UI结构
结果使用 className 和 style 的方式给 JSX 添加样式
React 完全利用 JS 的语言自身的能力来编写 UI（对比VUE需学习一系列指令后才能开发，Vue 属于造轮子增强HTML的功能）

泛型.png

知识总结 React【React基础】

React

脚手架

使用 React 脚手架创建项目

项目目录结构说明和调整

基本使用

基本步骤

模块与组件

模块

组件

模块化

组件化

JSX 语法糖

基本使用

语法规则

JSX 注意点

插值表达式

总结

条件渲染

if/else 渲染

三元表达式与逻辑运算符渲染

列表渲染 - 数组渲染

样式处理

行内样式-style

外部样式+类名-className

总结

`if/else` 渲染