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

一、创建项目并启动

第一步：全局安装：npm install -g create-react-app
第二步：切换到想创建项目的目录，使用命令create-react-app hello-react
第三步：进入项目目录，cd hello-react
第四步：启动项目，npm start

二、目录结构

1、目录结构

其中，public/index.htm，src/App.js，src/index.js 三个是最重要的文件。

+ node_module ------ 第三方资源
+ public ------ 静态资源文件夹+ favicon.ico ------	 网站页面图标+ index.html ------ 主页面+ logo192.png ------ logo 图+ logo512.png ------ logo 图+ manifest.json ------ 应用加壳的配置文件+ robots.txt ------ 爬虫协议文件
+ src ------ 源码文件夹+ App.css ------ App 组件的样式+ App.js ------ App 组件+ App.test.js ------ 用于给 App 组件做测试+ index.css ------ 全局样式+ index.js ------ 入口文件+ logo.svg ------ logo 图+ reportWebVitals.js ------ 页面性能分析文件（需要 web-vitals 库的支持）+ setupTests.js ------ 组件单元测试的文件（需要 jest-dom 库的支持）

2、文件内容说明

public/index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><!-- 开启理想窗口，用于做移动端网页的适配 --><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- 用于配置浏览器页签+地址栏的颜色（仅支持安卓手机浏览器，兼容性较差） --><meta name="theme-color" content="#000000" /><meta name="description" content="Web site created using create-react-app"/><!-- 用于指定网页添加到手机主屏幕后到图标（仅支持 apple 手机） --><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!-- 应用加壳时到配置 --><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>
</html>

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));
// React.StrictMode 标签会自动校验 react 语法，遇到一些将要遗弃或不推荐使用的语法，会提示
// 不加 React.StrictMode 标签，直接使用 App 组件也没啥影响
root.render(<React.StrictMode><App /></React.StrictMode>
);
reportWebVitals();

注意：旧版本的 src/index.js 中，渲染组件是通过方法ReactDOM.render(<App/>,el)实现的：

import React from "react";
import App from "./App"
// 旧版本引入 ReactDOM ，然后 执行 ReactDOM.render()
import ReactDOM from "react-dom"
ReactDOM.render(<App />, document.getElementById("root"))

而新版本18.0.2是通过ReactDOM.createRoot(el).render(<App/>)实现的：

import React from "react";
import App from "./App"
// 新版本引入方式，利用 ReactDOM.createRoot() 创建节点，然后执行 render 函数
import ReactDOM from "react-dom/client"
ReactDOM.createRoot(document.getElementById("root")).render(<App/>)

三、开发注意事项

1、组件命名

组件可以以js为后缀，也可以以 jsx 为后缀，以 jsx 为后缀可以明显区别于其他功能性的 js 文件。

2、引入 React 和 Component

1）只引 React，定义类组件时使用 React.Component

import React from "react";
// 定义类式组件
export default class Hello extends React.Component {render() {return (<h1 className={hello.title}>Hello 组件</h1>)}
}

2）解构引入 Component，定义类组件时直接使用 Component

// React 中使用了默认暴露和分别暴露，所以可以使用下面的引入方式
// import React, { Component } from "react";
import { Component } from "react";
// 定义类式组件
export default class Welcome extends Component {render() {return (<h1 className="title">Welcome组件</h1>)}
}

能使用以上引用方式是因为 React 中使用了 默认暴露 和 分别暴露

class React {
}
// 分别暴露 Component
export class Component {
}
React.Component = Component
// 默认暴露 React
export default React
--------------------------------------
// 其他文件引用时可以这样：
import React, { Component } from "react";
import { Component } from "react";

3、引入 ReactDOM

1）新版本18.0.2中，要从 react-dom/client中引入 ReactDOM，用法如下：

import React from "react";
// 新版本引入 ReactDOM，渲染节点时使用 ReactDOM.createRoo(el).render(<App/>)
import ReactDOM from "react-dom/client"
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(<App/>)

2）旧版本中，要从 react-dom 中引入 ReactDOM，用法如下：

import React from "react";
import ReactDOM from "react-dom"
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"))

4、css 模块化

为什么

按照截图方式在同一个组件中引用多个组件，如果 Hello 和 Welcome 组件存在相同类的不同样式时，后者会覆盖前者，所以需要模块化样式，使其互不影响。
在这里插入图片描述

怎么做

  • 将 .css 文件改为 .module.css 文件
  • 引入 css 文件时，使用 import hello from "./Hello.module.css" 代替 import "./Hello.module.css"
  • 组件标签中使用 hello.title, <h1 className={hello.title}>Hello 组件</h1>
    编译出来是如下效果：
    在这里插入图片描述

5、组件通信

父子通信：直接通过组件标签的属性进行传值，子组件中通过 props 可以接受
祖孙通信：遵循状态在哪里，操作状态的方法就在哪里的原则，将所有修改 state 数据的方法都定义在 state 所在的组件中，给子组件标签添加（方法）属性funcName={funcName} -》孙组件标签添加（方法）属性funcName={funcName} -》孙组件内部根据需要，调用传过来的方法this.props.funcName()

6、跨域

前提：本地前端项目地址：http://localhost:3000

1）法一：配置在 packge.json 中

  • 在 package.json中配置"proxy": "http://localhost:5000"
  • 组件中使用axios.get("http://localhost:3000/students").then()
    接口请求时会先在 3000 端口服务上找 /students 接口，找不到就去配置好的 5000 端口上找

说明：
1、优点：配置简单，前端请求资源时可以不加任何前缀
2、缺点：不能配置多个代理
3、工作方式：上述方式配置代理，当前请求了3000不存在的资源时，那么该请求会转发给 5000（优先匹配前端资源）

axios.get("http://192.168.31.229:3000/students").then((res) => {console.log("学生接口调用成功",res)},(err) => {console.log("学生接口调用失败", err)})

2）法二：配置在 setupProxy.js 中

1）第一步：创建代理配置文件：在 src 下创建配置文件：src/setupProxy.js
2）编写 setupProxy.js 配置具体代理规则：

const { createProxyMiddleware } = require("http-proxy-middleware")module.exports = function (app) {app.use(createProxyMiddleware("/api1", {  // api1 是需要转发的请求（所有带有 /api1 前缀的请求都会转发给5000）target: "http://localhost:5000",  // 配置转发目标地址（能返回数据的服务器地址）changeOrigin: true, // 控制服务器接收到的请求头中 host 字段的值/*changeOrigin 为true时，服务器收到的请求头中的 host 为 http://localhost:5000changeOrigin 为false时，服务收到的请求头中的 host 为前端工程的服务器的host(http://localhost:3000)changeOrigin 默认为false，但我们一般将changeOrigin的值设为true*/pathRewrite: {"^/api1":""}  // 去除请求前缀，保证交给后台服务器的是正常请求地址（必须配置）}),createProxyMiddleware("/api2", {target: "http://localhost:5001",changeOrigin: true,pathRewrite: {"^/api2":""}}))
}

使用：

axios.get("http://192.168.31.229:3000/api1/students").then((res) => {console.log("学生接口调用成功",res)},(err) => {console.log("学生接口调用失败", err)})

说明：
1.优点：可以配置多个代理，可以灵活控制是否走代理
2.缺点：配置繁琐，前端请求资源时必须加前缀

7、组件通信

1、动态初始化列表，如何确定将数据放在哪个组件的state中？

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

2、关于父子组件通信：

  • 【父组件】给【子组件】传递数据：通过props传递
  • 【子组件】给【父组件】传递数据：通过props传递，要求父组件提前给子组件传递一个函数func，子组件通过this.props.func调用

3、状态在哪里，操作状态的方法就在哪里

8、消息订阅与发布（个组件间进行通信）

1）下载 pubsub-js

npm i pubsub-js

2）消息订阅

componentDidMount() {// 消息订阅// 消息订阅，回调里面接收两个参数，第一个是消息名，这里也就是 updateState，第二个是消息发布时携带的参数this.token = PubSub.subscribe("updateState",(_, stateObj)=> {this.setState(stateObj)})
}

3）消息发布

PubSub.publish("updateState", {users: res.data.items, isLoadding: false})

4）取消订阅

componentWillUnmount() {// 取消订阅PubSub.unsubscribe(this.token)
}

9、路由 react-router-dom

基本使用：

  1. a 标签改为 Link 标签或者 NavLink
    <Link className='menu-item' to="/home">home</Link>
    <NavLink className='menu-item' to="/home">home</NavLink>
    NavLink标签与Link相比，当前页面匹配的菜单会自动增加一个 active 类，或者可以使用 activeClassName 修改为需要的类名
  2. 展示区用 Route 标签进行路径的匹配
    <Route path="/home" component={Home}></Route>
  3. 的最外侧包裹一个 <BrowserRouter> 或 <HashRouter>

10、路由组件与一般组件

  1. 写法不同
    一般组件：
    路由组件：
  2. 存放位置不同：
    一般组件：components
    路由组件：pages
  3. 接收到的props不同：
    一般组件：写组件标签时传递了什么，就能接收到什么
    路由组件：接收到三个固定属性
  • history:
    go, goBack, goForward, push, replace (方法)
  • location:
    pathname:“”, search:“”, state: “”
  • match:
    params: {}, path: “”, url: “”

11、路由

路由渲染时，若有多个相同 path，不同 component 路由，取并集，也就是如下代码，没有 Switch 标签包裹时，/home 路由同时显示 Home 组件和 Test 组件。
Switch 包裹时，/home 路由显示第一个匹配到的组件，也就是 Home 组件。

<Switch><Route path="/about" component={About}></Route><Route path="/home" component={Home}></Route><Route path="/home" component={Test}></Route>
</Switch>

react 封装组件：

  • 标签体内容是一个特殊的标签属性
  • 子组件可以通过 this.props.children 可以获取标签体内容，可以直接通过属性方式写入标签体内容。

在这里插入图片描述

<!-- 这里的 to="/about" 和 内容 about 会以 props 传入到组件 MyNavLink 中，形式是：{to:"/about", children:"about"} -->
<MyNavLink to="/about">about</MyNavLink>
<MyNavLink to="/home">home</MyNavLink>

import React from "react";
import { NavLink } from "react-router-dom";
export default class MyNavLink extends React.Component {render() {console.log(this.props)	//{to: '/about', children: 'about'}return (<NavLink activeClassName="active-menu" className='menu-item' {...this.props}/>)}
}

1）多层路由时，样式丢失

<link rel="stylesheet" href="./css/base.css">

场景：例如路由前要加前缀，为 /qiao/about，如果页面通过相对路径，引入了 public 目录中的样式 base.css，页面刷新时，base.css 样式会丢失。
原因：开发模式默认打开 http://192.168.31.229:3000/，这时候 public/css/base.css 从 public 中能正常拿到，此时样式是正常的。点击路由跳转到 http://192.168.31.229:3000/qiao/about，此时刷新页面，因为从 public 下找不到 qiao/about，会默认渲染 index.html 页面，而且样式文件因为使用相对路口，路径转化为 public/qiao/css/base.css，样式路径有误，所以样式获取不到。

解决方法：

  1. index.html 中引入样式使用绝对路径，将 ./XXX改为 /XXX
  2. index.html 中引入样式使用 %PUBLIC_URL%，将./XXX改为%PUBLIC_URL%/XXX
  3. 使用 hash HashRouter模式代替 history 模式BrowserRouter

2）路由的严格匹配和模糊匹配

  1. 默认使用的是模糊匹配（简单记：输入的路径 必须要包含 匹配的路径，且顺序要一致）
  2. 开启严格匹配
  3. 严格匹配不要随便开启，需要时再开，有些时候开启会导致无法继续匹配二级路由

<MyNavLink to="/home/a/b">home</MyNavLink>
<Route exact path="/home" component={Home}></Route>

3）Redirect

  1. 一般写在所有路由注册的最下方，当所有路由都无法匹配是，跳转到 Redirect 指定的路由。
<Switch><Route path="/about" component={About}></Route><Route path="/home" component={Home}></Route><Redirect to="/about"/>
</Switch>

4）嵌套路由

  1. 注册子路由时要写上父路由的 path 的值（/home/news）
  2. 路由的匹配是按照注册路由的顺序进行的 （先匹配home路由的组件，在匹配news路由的组件）

5）路由传参

  1. params 参数
    路由链接（携带参数）：<Link to={/home/message/detail/tom/18}>详情</Link>
    注册路由（声明接收）：<Route path="/home/message/detail/:name/:age" component={Detail}/>
    接收参数：this.props.match.params
  2. search 参数
    路由链接（携带参数）：<Link to={/home/message/detail?name=tom&age=18}>详情</Link>
    注册路由（无需声明，正常注册即可）：<Route path="/home/message/detail" component={Detail}/>
    接收参数：this.props.location.search
    备注：获取到的 search 是 urlencoded 编码字符串，需要借助 qs 解析
  3. state 参数
    路由链接（携带参数）：<Link to={{pathname: "/home/message/detail", state: {name: "tom", age: 18}}}>{item.title}</Link>
    注册路由（无需声明，正常注册即可）：<Route path="/home/message/detail" component={Detail}/>
    接收参数：this.props.location.state
    备注：刷新也可以保留参数，但是清除缓存，history所有数据就会被清空，刷新无法获取参数

6）push和replace

Link 标签默认是 push 默认，要打开 replace 模式，需要在标签中增加属性 replace={true}，或者简写 replace

 <Link replace={true} to={{pathname: "/home/message/detail", state: {id: item.id, title: item.title}}}>{item.title}</Link>
<Link replace to={{pathname: "/home/message/detail", state: {id: item.id, title: item.title}}}>{item.title}</Link><!-- 默认是push、 -->
<Link to={{pathname: "/home/message/detail", state: {id: item.id, title: item.title}}}>{item.title}</Link>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/652183.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java技术栈 —— Hadoop入门（二）

Java技术栈 —— Hadoop入门（二）

Java技术栈 —— Hadoop入门&#xff08;二&#xff09; 一、用MapReduce对统计单词个数1.1 项目流程1.2 可能遇到的问题1.3 代码勘误1.4 总结 一、用MapReduce对统计单词个数 1.1 项目流程 (1) 上传jar包。 (2) 上传words.txt文件。 (3) 用hadoop执行jar包的代码&#xff0c;…
阅读更多...
RNN预测下一句文本简单示例

RNN预测下一句文本简单示例

根据句子前半句的内容推理出后半部分的内容&#xff0c;这样的任务可以使用循环的方式来实现。 RNN&#xff08;Recurrent Neural Network&#xff0c;循环神经网络&#xff09;是一种用于处理序列数据的强大神经网络模型。与传统的前馈神经网络不同&#xff0c;RNN能够通过其…
阅读更多...
32GPIO输入LED闪烁蜂鸣器

32GPIO输入LED闪烁蜂鸣器

一.GPIO简介 所有的GPIO都挂载到APB2上&#xff0c;每个GPIO有&#xff11;&#xff16;个引脚 内核可以通过APB&#xff12;对寄存器进行读写&#xff0c;寄存器都是32位的&#xff0c;但每个引脚端口只有&#xff11;&#xff16;位 驱动器用于增加信号的驱动能力 二.具体…
阅读更多...
【Go】深入理解 Go map：赋值和扩容迁移 ①

【Go】深入理解 Go map：赋值和扩容迁移 ①

文章目录 map底层实现hmapbmap map hash冲突了怎么办&#xff1f; map扩容触发扩容时机扩容小结为什么map扩容选择增量&#xff08;渐进式扩容&#xff09;&#xff1f;迁移是逐步进行的。那如果在途中又要扩容了&#xff0c;怎么办&#xff1f; map翻倍扩容原理 map写入数据内…
阅读更多...
数据库查询3

数据库查询3

目录 1. 多表查询 1.1.1 介绍 1.1.2 分类 1.2 内连接 1.3 外连接 1.4 子查询 1.4.1 介绍 1.4.2 标量子查询 1.4.3 列子查询 1.4.4 行子查询 1.4.5 表子查询 2. 事务 2.1 操作 2.2 四大特性 数据库总结2 数据库总结1 1. 多表查询 1.1.1 介绍 多表查询&#xff…
阅读更多...
研发日记，Matlab/Simulink避坑指南(七)——数据溢出钳位Bug

研发日记，Matlab/Simulink避坑指南(七)——数据溢出钳位Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结归纳 前言 见《研发日记&#xff0c;Matlab/Simulink避坑指南(二)——非对称数据溢出Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指南(三)——向上取整Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑…
阅读更多...
C语言第十一弹---函数(下)

C语言第十一弹---函数(下)

​ ✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 函数 1、嵌套调用和链式访问 1.1、嵌套调用 1.2、链式访问 2、函数的声明和定义 2.1、单个文件 2.2、多个文件 2.3、static 和 extern 2.3.1、static…
阅读更多...
【自然语言处理】【深度学习】文本向量化、one-hot、word embedding编码

【自然语言处理】【深度学习】文本向量化、one-hot、word embedding编码

因为文本不能够直接被模型计算&#xff0c;所以需要将其转化为向量 把文本转化为向量有两种方式&#xff1a; 转化为one-hot编码转化为word embedding 一、one-hot 编码 在one-hot编码中&#xff0c;每一个token使用一个长度为N的向量表示&#xff0c;N表示词典的数量。 即&…
阅读更多...
dos攻击与ddos攻击的区别

dos攻击与ddos攻击的区别

①DOS攻击&#xff1a; DOS&#xff1a;中文名称是拒绝服务&#xff0c;一切能引起DOS行为的攻击都被称为dos攻击。该攻击的效果是使得计算机或网络无法提供正常的服务。常见的DOS攻击有针对计算机网络带宽和连通性的攻击。 DOS是单机于单机之间的攻击。 DOS攻击的原理&#…
阅读更多...
【GitHub项目推荐--常见的国内镜像】【转载】

【GitHub项目推荐--常见的国内镜像】【转载】

由于国内网络原因&#xff0c;下载依赖包或者软件&#xff0c;对于不少互联网从业者来说&#xff0c;都有不小的挑战&#xff0c;时间浪费在这上边&#xff0c;实在可惜。这个项目介绍了常见依赖&#xff0c;软件的国内镜像&#xff0c;助力大家畅爽编码。 这是一个归纳梳理类…
阅读更多...
C# 将HTML网页、HTML字符串转换为PDF

C# 将HTML网页、HTML字符串转换为PDF

将HTML转换为PDF可实现格式保留、可靠打印、文档归档等多种用途&#xff0c;满足不同领域和情境下的需求。本文将通过以下两个示例&#xff0c;演示如何使用第三方库Spire.PDF for .NET和QT插件在C# 中将Html 网页&#xff08;URL&#xff09;或HTML字符串转为PDF文件。 HTML转…
阅读更多...
【C语言/数据结构】排序（选择排序，推排序，冒泡排序）

【C语言/数据结构】排序（选择排序，推排序，冒泡排序）

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;《数据结构》https://blog.csdn.net/qinjh_/category_12536791.html?spm1001.2014.3001.5482 ​​​​ 目录 选择排序 选择排序 ​编辑…
阅读更多...
js实现动漫拼图2.0版

js实现动漫拼图2.0版

比较与1.0版&#xff0c;2.0版就更像与华容道类似的拼图游戏&#xff0c;从头到尾都只能控制白色块移动&#xff0c;而且打乱拼图和求助的实现与1.0都不相同 文章目录 1 实现效果2 实现思路2.1 打乱拼图2.2 求助功能2.3 判赢 3 代码实现 js实现动漫拼图1.0版 https://blog.csdn…
阅读更多...
python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-菜单管理实现

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-菜单管理实现

锋哥原创的SpringbootLayui python222网站实战&#xff1a; python222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火…
阅读更多...
cmake-find_package链接第三方库

cmake-find_package链接第三方库

文章目录 基本调用形式和模块模式使用方式 之前我们是使用了绝对路径来链接OpenCV第三方库&#xff0c;但是现在很多库一般会自己写一些cmake文件提供给用户&#xff0c;用户可以直接使用其中的内置变量即可。使用的命令就是find_package。 基本调用形式和模块模式 find_packa…
阅读更多...
【RTP】webrtc 学习2： webrtc对h264的rtp打包

【RTP】webrtc 学习2： webrtc对h264的rtp打包

切片只是拷贝帧的split的各个部分到新的rtp 包的封装中。并没有在rtp包本身标记是否为关键帧FU-A 切片 输入的H.264 数据进行split ：SplitNalu SplitNalu ： 按照最大1200字节进行切分 切分后会返回一个数组 对于FU-A ：split的数据总大小是 去掉一个字节的nalu header size …
阅读更多...
实战 | OpenCV+OCR实现弧形文字识别实例(详细步骤 + 源码)

实战 | OpenCV+OCR实现弧形文字识别实例(详细步骤 + 源码)

导 读 本文主要介绍基于OpenCV+OCR实现弧形文字识别实例，并给详细步骤和代码。源码在文末。 背景介绍 测试图如下，目标是正确识别图中的字符。图片来源： https://www.51halcon.com/forum.php?mod=viewthread&tid=6712 同样，论坛中已经给出了Halcon实现代码，…
阅读更多...
1948-2022年金融许可信息明细数据

1948-2022年金融许可信息明细数据

1948-2022年金融许可信息明细数据 1、时间&#xff1a;1948-2022年 2、来源&#xff1a;银监会&#xff08;银监会许可证发布系统&#xff09; 3、指标&#xff1a;来源表、机构编码、机构名称、所属银行、机构类型、业务范围、机构住所、地理坐标、行政区划代码、所属区县、…
阅读更多...
【计算机网络】深入掌握计算机网络的核心要点（面试专用）

【计算机网络】深入掌握计算机网络的核心要点（面试专用）

写在前面 前言四层模型网络地址管理Linux下设置ipARP请求包总结 前言 计算机网络是指将分散的计算机设备通过通信线路连接起来&#xff0c;形成一个统一的网络。为了使得各个计算机之间能够相互通信&#xff0c;需要遵循一定的协议和规范。OSI参考模型和TCP/IP参考模型是计算机…
阅读更多...
（南京观海微电子）——OLED驱动与调试

（南京观海微电子）——OLED驱动与调试

一、OLED DDIC分类 OLED DDIC的技术方向可以分为3类&#xff1a;带Ram【内存】的IC、Ram-less IC和TDDI【显示&触控集成的IC】 1、带Ram的OLED DDIC OLED DDIC有两个Ram&#xff0c;分别是Demura Ram和Display Ram。 1、带Ram的OLED DDIC 1-1&#xff09;Demura Ram&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023