【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组件到页面
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中（官方称此操作为：状态提升）
原文地址：https://blog.csdn.net/cpsxn/article/details/145200796
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！