【React学习笔记】第三章：React应用

1.使用create-react-app创建 react 应用

1.1 react 脚手架

react提供了一个用于创建 react 项目的脚手架：create-react-app

项目的整体技术架构为：react + webpack + es6 + eslint

1.2 创建项目并启动

打开CMD
第一步： 全局安装react脚手架 npm install -g create-react-app
第二步： 创建hello-react项目：create-react-app hello-react
第三步： 进入项目文件夹：cd hello-react
第四步： 启动项目：npm start

---

也可以直接使用 npx(npm v5.2.0 引入的一条命令) 创建项目，无需安装脚手架
第一步： 初始化项目：npx create-react-app 项目名称
第二步： 启动项目： npm start

---

如果react安装的是19版本，可能因为版本不兼容问题报错：

npm install --no-audit --save @testing-library/jest-dom@^5.14.1

解决方式1：

npm install --no-audit --save @testing-library/jest-dom@^5.14.1

@testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1

@types/jest@^27.0.1 @types/node@^16.7.13 @types/react@^19.0.0

@types/react-dom@^19.0.0 typescript@^4.4.2 web-vitals@^2.1.0

--legacy-peer-deps\

方式2：

重新安装18版本的
npm install react@18 react-dom@18

1.3 react脚手架项目结构

项目目录结构分析：

• public ------ 静态资源文件夹
  • favicon.icon ------ 网站页签图标
  • index.html ------ 主页面（只有一个html页面）
  • manifest.json ------ 应用加壳的配置文件
  • robots.txt ------ 爬虫协议文件
• src ------ 源码文件夹
  • App.css ------ App组件的样式
  • App.js ------ App组件
  • App.test.js ------ 用于给App做测试
  • index.css ------ 通用的样式，也可以在public-index.html中引入
  • index.js ------ 入口文件
  • logo.svg ------ logo 图
  • reportWebVitals.js ------ 页面性能分析文件（需要web-vitals 库的支持
  • setupTests.js ------ 用于做应用的整体测试（需要 jest-dom 的支持）

---

主文件执行顺序：

首先来到 src/index.js文件，引入react核心库、reactDOM、样式、App组件......

执行了ReactDOM.render从public/index.html中找对应的id的节点渲染组件

1.4 一个简单的Hello组件

1.4.1 index.js 入口文件

这个文件做了四件事：

1. 引入 react 核心库
2. 引入 react-dom
3. 引入App组件
4. 渲染App组件到页面

import React from 'react';
import ReactDOM from 'react-dom/client'
import App from './App'

// 注意：18版本和19版本渲染方式不一样
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode><App /></React.StrictMode>
);

1.4.2 App.js

// 引入react: 此处不是解构赋值的方式，是react中用了多种暴露的方式，es6的另外一种引入方式
import React, { Component} from 'react';
import Hello from './components/Hello/Hello'
import Welcome from './components/Welcome'

// 创建并暴露App组件
export default class App extends Component {
  render() {
    return (
      <div>
        <Hello />
      </div>
    )
  }
}

1.4.3 Hello组件

Hello.js

import React, { Component} from 'react'
import './Hello.css'

export default class Hello extends Component {
  render() {
    return (
      <div>
        <h2 className="title">Hello, React!</h2>
      </div>
    )
  }
}

Hello.css

.title {
  background-color: orange;
}

1.4.4 注意点

1.使用模块化方式，在src/components文件夹下创建各个组件的文件夹

2.如何区分组件和写业务逻辑的普通js文件

组件命名方式：

● 组件的首字母大写

● 组件文件的后缀使用 .jsx

3.引入组件时，.js、.jsx后缀可以省略

4.组件的文件名使用 index.jsx 在引入时可省略，例如：
components/Welcome/index.jsx
import Welcome from './components/Welcome'

1.4.5 样式的模块化

所有的文件最后都会被引入到App.js里面，如果模块的样式类名重复，样式会冲突，后引入的会替换掉之前的。

两个方式解决：

1.区分类名：使用不同的类名 或者 使用 less嵌套方式

2.使用样式的模块化，步骤如下：

- 把样式的文件名改成xxx.module.css

- 引入css样式文件 import xxx from './index.module.css'

- 使用：<h2 className={xxx.title}>Hello, react</h2>

1.5 vscode中react插件

可以使用类似代码片段的功能

rcc (类式组件)、rfc（函数式组件）

2.组件的组合使用-TodoList案例

效果图： （具体实现代码此处不做展示，后续会上传资源）

1.判断键盘的Enter事件

方式1：if (event.target.key ! == 13) return;

方式2：event.target.key === 'Enter'
2.子组件传递数据给父组件

- 在父组件中给子组件传递一个函数

// 给子组件传递一个函数
<Child addTodo={this.getInputValue} />
  
// getInputValue 接收子组件传递过来的内容
getInputValue = (value) => {
  console.log(value)
}

- 子组件调用这个函数并传递参数

this.props.addTodo('test');

3.对props进行限制

1.下载prop-types库：yarn add prop-types

2.引入：import PropTypes from 'prop-types'
4.生成唯一标识的库UUID/ nanoid

1.安装：yarn add nanoid

2.引入：import { nanoid } from 'nanoid'

3.使用：nanoid()
5.注意defaultChecked和checked的区别，类似的还有defaultValue和value
6.状态在哪里，操作状态的方法就在哪里
7.动态初始化列表，如何确定将数据放在哪个组件的state中

● 某个组件使用：放在其自身的state中

● 某些组件使用：放在她们共同的父组件的state中（官方称此操作为：状态提升）