React 基础

环境依赖

node -v
v14.18.1

npx -v
6.14.15

npm -v
6.14.15

TIP

npx 是 npm 5.2+附带的 package 运行工具

React 介绍

React 是一个用于构建用户界面的 javaScript 库

React 是一个用于构建用户界面（UI，简单理解为:HTML 页面）的 javaScript 库
如果从 MVC 的角度，React 仅是视图层（V）的解决方案，也就是只负责视图层的渲染，并非提供了完整 M 和 C 的功能
react/react-router/redux 框架

React 特点

声明式 UI
- 只需要描述 UI（HTML），和写 HTML 一样
```
const jsx = (
  <div className="app">
    <h1>Hello React!动态数据变化：{count}</h1>
  </div>
)
```
- 生命是对应的式命令式，声明式关注组的 what，命令式关注的式 how
组件化
- 组件时 React 中重要内容
- 组件用于表示页面中的部分内容
- 组合、服用多个组件，可以实现完整的页面功能
多端使用
- 使用 react/react-dom 实现 web 应用
- 使用 react/react-native 开发移动端原生应用

React 脚手架（CLI）

React 脚手架的介绍

脚手架：为了保证各施工过程顺利进行而搭设的工作平台
对于前端项目开发来说，脚手架是为了保证前端项目开发过程顺利进行而搭设的开发平台
脚手架的意义：
- 现代的前端开发日趋成熟，需要依赖于各种工具，比如，webpack、babel、eslint、sass/less/postcss 等
- 工具配置繁琐、重复，各项目之间的配置大同小异
- 开发阶段、项目发布，配置不同
  - 项目开始前，帮你搭好架子，省去繁琐的 webpack 配置
  - 项目开发时，热更新、格式化代码、git 提交时自动校验代码格式等
  - 项目发布时，一键自动打包，包括：代码压缩、优化、按需加载等

使用 React 脚手架创建项目

命令：npx create-react-app react-basic
- npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称
- react-basic 表示项目名称，可以修改
启动项目：yarn start or npm start
npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用
- 原始：1 全局安装npm i -g create-react-app 2 在通过脚手架的命令来创建 React 项目
- 现在：npx 调用最新的 create-react-app 直接创建 React 项目

项目目录结构说明和调整

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

React 基本使用

基本步骤

使用步骤

- 导入react和react-dom
- 创建react元素(虚拟DOM)
- 渲染react元素到页面中

导入 react 和 react-dom

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

创建 react 元素

// 创建元素
const title = React.createElement('h1', null, 'hello react')

渲染 react 元素到页面

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

练习

使用 react，生成以下结构

<div id="box" class="demo">
  这是一个react案例
</div>

生成结构 2

<ul class="list">
  <li>香蕉</li>
  <li>橘子</li>
  <li>苹果</li>
</ul>

JSX 的基本使用

createElement 的问题

繁琐不简洁
不直观，无法一眼看出所描述的结构
不优雅，开发体验不好

JSX 简介

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

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

JSX 是 react 的核心内容

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

![JSX 声明式vs命令式](images/JSX 声明式 vs 命令式-1629116328806.png)

使用步骤

- 导入react和reactDOM包
- 使用jsx语法创建react元素
- 把react元素渲染到页面中

导入 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'))

JSX 注意点

只有在脚手架中才能使用 jsx 语法
- 因为 JSX 需要经过 babel 的编译处理，才能在浏览器中使用。脚手架中已经默认有了这个配置。
JSX 必须要有一个根节点， <></> <React.Fragment></React.Fragment>
没有子节点的元素可以使用/>结束
JSX 中语法更接近与 JavaScript
- class =====> className
- for========> htmlFor
JSX 可以换行，如果 JSX 有多行，推荐使用()包裹 JSX，防止自动插入分号的 bug

JSX 中嵌入 JavaScript 表达式

在 jsx 中可以在{}来使用 js 表达式

基本使用

const name = 'zs'
const age = 18
const title = (
  <h1>
    姓名：{name}, 年龄：{age}
  </h1>
)

可以访问对象的属性

const car = {
  brand: '玛莎拉蒂'
}
const title = <h1>汽车：{car.brand}</h1>

可以访问数组的下标

const friends = ['张三', '李四']
const title = <h1>汽车：{friends[1]}</h1>

可以使用三元运算符

const gender = 18
const title = <h1>性别：{age >= 18 ? '是' : '否'}</h1>

可以调用方法

function sayHi() {
  return '你好'
}
const title = <h1>姓名：{sayHi()}</h1>

JSX 本身

const span = <span>我是一个span</span>
const title = <h1>盒子{span}</h1>

JSX 中的注释

{/* 这是jsx中的注释 */}   推荐快键键 ctrl + /

不要出现语句，比如if for

条件渲染

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

通过判断if/else控制

const isLoding = false
const loadData = () => {
  if (isLoding) {
    return <div>数据加载中.....</div>
  } else {
    return <div>数据加载完成，此处显示加载后的数据</div>
  }
}

const title = <div>条件渲染：{loadData()}</div>

通过三元运算符控制

const isLoding = false
const loadData = () => {
  return isLoding ? (
    <div>数据加载中.....</div>
  ) : (
    <div>数据加载完成，此处显示加载后的数据</div>
  )
}

逻辑运算符

const isLoding = false
const loadData = () => {
  return isLoding && <div>加载中...</div>
}

const title = <div>条件渲染：{loadData()}</div>

列表渲染

我们经常需要遍历一个数组来重复渲染一段结构
在 react 中，通过 map 方法进行列表的渲染

列表的渲染

const songs = ['温柔', '倔强', '私奔到月球']

const list = songs.map((song) => <li>{song}</li>)

const dv = (
  <div>
    <ul>{list}</ul>
  </div>
)

直接在 JSX 中渲染

const songs = ['温柔', '倔强', '私奔到月球']

const dv = (
  <div>
    <ul>
      {songs.map((song) => (
        <li>{song}</li>
      ))}
    </ul>
  </div>
)

key 属性的使用

const dv = (
  <div>
    <ul>
      {songs.map((song) => (
        <li key={song}>{song}</li>
      ))}
    </ul>
  </div>
)

注意：列表渲染时应该给重复渲染的元素添加 key 属性，key 属性的值要保证唯一

注意：key 值避免使用 index 下标，因为下标会发生改变

样式处理

行内样式-style

const dv = (
  <div style={{ color: 'red', backgroundColor: 'pink' }}>style样式</div>
)

类名-className

// 导入样式
import './base.css'
const dv = <div className="title">style样式</div>

base.css 样式文件

.title {
  text-align: center;
  color: red;
  background-color: pink;
}

总结

JSX 是 React 的核心内容
JSX 表示在 JS 代码中书写 HTML 结构，是 React 声明式的体现
使用 JSX 配合嵌入的 JS 表达式，条件渲染，列表渲染，可以渲染任意的 UI 结构
结果使用 className 和 style 的方式给 JSX 添加样式
React 完全利用 JS 的语言自身的能力来编写 UI，而不是造轮子增强 HTML 的功能。（对比 VUE）

# React 基础

# 环境依赖

# React 介绍

# React 特点

# React 脚手架（CLI）

# React 脚手架的介绍

# 使用 React 脚手架创建项目

# 项目目录结构说明和调整

# React 基本使用

# 基本步骤

# 练习

# JSX 的基本使用

# createElement 的问题

# JSX 简介

# 使用步骤

# JSX 注意点

# JSX 中嵌入 JavaScript 表达式

# 条件渲染

# 列表渲染

# 样式处理

# 行内样式-style

# 类名-className

# 总结