【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 入口文件

这个文件做了四件事：

• 引入 react 核心库
  
• 引入 react-dom
  
• 引入App组件
  
• 渲染App组件到页面
  

1. import React from 'react';
2. import ReactDOM from 'react-dom/client'
3. import App from './App'
5. // 注意：18版本和19版本渲染方式不一样
6. const root = ReactDOM.createRoot(document.getElementById('root'));
7. root.render(
8.   <React.StrictMode><App /></React.StrictMode>
9. );

复制代码

1.4.2 App.js

1. // 引入react: 此处不是解构赋值的方式，是react中用了多种暴露的方式，es6的另外一种引入方式
2. import React, { Component} from 'react';
3. import Hello from './components/Hello/Hello'
4. import Welcome from './components/Welcome'
6. // 创建并暴露App组件
7. export default class App extends Component {
8.   render() {
9.     return (
10.       <div>
11.         <Hello />
12.       </div>
13.     )
14.   }
15. }

复制代码

1.4.3 Hello组件

Hello.js

1. import React, { Component} from 'react'
2. import './Hello.css'
4. export default class Hello extends Component {
5.   render() {
6.     return (
7.       <div>
8.         <h2 className="title">Hello, React!</h2>
9.       </div>
10.     )
11.   }
12. }

复制代码

Hello.css

1. .title {
2.   background-color: orange;
3. }

复制代码

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.子组件传递数据给父组件
 - 在父组件中给子组件传递一个函数

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

复制代码

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

1. 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中（官方称此操作为：状态提拔）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。