当前位置：首页 > news >正文

React应用(基于React脚手架)

news 文章来源：https://blog.csdn.net/weixin_62897746/article/details/129864716 2025/5/17 10:33:22

前言：
一、使用create-react-app创建react应用
- 1、什么是 react 脚手架？
- 2. 创建 cli 脚手架方式1
- 3. 创建 cli 脚手架方式2
- 4. npx:
- 5. react脚手架项目结构
- 6. 功能界面的组件化编码流程（通用）
- 7. 如何更改脚手架版本
二、React 组件的组合使用
- 1. 父传子（props传参）
- 2. 子传父
- 3. TodoList 代码示例
- 4. TodoList 效果展示
总结：

前言：

react 是前端三大框架中之一,而且大公司基本都在用react 包括百度也在使用他有自己的独特的虚拟dom
build-react-cli是帮助你快速创建生成react项目的脚手架工具，配置了多种可选择的不同类型项目模版。

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

1、什么是 react 脚手架？

xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
1. 包含了所有需要的配置（语法检查、jsx编译、devServer…）
2. 下载好了所有相关的依赖
3. 可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

2. 创建 cli 脚手架方式1

先全局安装脚手架工具包
命令：npm i -g create-react-app
用脚手架工具来创建项目
命令：create-react-app + 项目名称
启动项目
命令： npm start

3. 创建 cli 脚手架方式2

直接使用npx来创建项目

命令：
npx create-react-app + 项目名称
解释：
npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称
启动项目
命令： npm start

4. npx:

npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用
没有 npx 之前：
- 全局安装 npm i -g create-react-app
- 在通过脚手架的命令来创建 React 项目
有了 npx 之后
- npx 调用最新的 create-react-app 直接创建 React 项目

5. react脚手架项目结构

public ---- 静态资源文件夹：

favicon.icon ------ 网站页签图标
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库的支持)

6. 功能界面的组件化编码流程（通用）

拆分组件: 拆分界面,抽取组件
实现静态组件: 使用组件实现静态页面效果
实现动态组件
1. 动态显示初始化数据
  - 数据类型
  - 数据名称
  - 保存在哪个组件?
2. 交互(从绑定事件监听开始)

7. 如何更改脚手架版本

由于 create-react-app my-app 安装的都是最新的版本所以我们需要指定版本，直接执行下面的步骤就可以
脚手架创建完成后改变 package.json 中的 react 版本
更改为指定版本后删除 node_modules 文件，重新 npm i 下载配置
配置完成后运行会报错，因为组件中使用的还是源版本配置
删除 public 和 src 文件夹下所有文件，根据当前版本进行配置
只需要配置完成 public 下的 index.html 文件，和 src 下的 index.js 和 App.js 文件。
public 下 index.html 文件的内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="icon" href="./favicon.ico" /> <!-- 当前行为引入 logo 图标，如果无需引入可以不写 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/css/bootstrap.css"><title>react-redux</title>
</head>
<body><div id="root"></div>
</body>
</html>

src 下的 index.js 文件

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

src 下的 App.js 文件

import React from 'react'export default function App() {return (<div>App组件</div>)
}

使用 npm start 运行项目即可

二、React 组件的组合使用

在 React 中，父子组件的通信是常见的问题，除了使用状态管理工具（如redux）以外，也可以实现父子组件的相互通信。

其中，父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。

1. 父传子（props传参）

如下代码，list 作为 props 由父组件传递给子组件，子组件拿到 list 后，渲染在页面上。

参数 list 由父组件传递给了子组件。

// 父组件
import React, { Component } from 'react'
import List from "./components/List"export default class App extends Component {state = {// 渲染数据list: [{ id: 0, title: '111', show: true, checked: false },{ id: 1, title: '222', show: true, checked: false },{ id: 2, title: '333', show: true, checked: false },],}render() {return (<div><List list={this.state.list} /></div>)}
}// 子组件
import React, { Component } from 'react'export default class index extends Component {render() {const { list } = this.propsreturn (<div><ul className="todo-main"><Item list={list}/></ul></div>)}
}

2. 子传父

父组件需要向子组件传递一个函数，然后，子组件通过props获取函数并附上参数，最后，父组件通过函数拿到子组件传递的值。

// 父组件
import React, { Component } from 'react'
import List from "./components/List"export default class App extends Component {changeitem = (e, id) => {console.log('子传父接收');}render() {return (<div><List changeitem={this.changeitem} /></div>)}
}// 子组件
import React, { Component } from 'react'export default class index extends Component {// 子传父触发事件（单选框改变事件）changeitem = (e, id) => {// 子传父this.props.changeitem(e, id)}render() {return (<div></div>)}
}

3. TodoList 代码示例

功能: 组件化实现此功能

显示所有todo列表
输入文本, 点击按钮显示到列表的首位, 并清除输入的文本

因代码过多无法在当前页面展示，当前资源已上传，点击跳转

4. TodoList 效果展示

功能: 组件化实现此功能

显示所有todo列表
输入文本, 点击按钮显示到列表的首位, 并清除输入的文本

在这里插入图片描述

总结：

欢迎大家加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

以上就是 React应用(基于React脚手架)，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

React应用(基于React脚手架)

目录前言：一、使用create-react-app创建react应用1、什么是 react 脚手架？2. 创建 cli 脚手架方式13. 创建 cli 脚手架方式24. npx:5. react脚手架项目结构6. 功能界面的组件化编码流程（通用）7. 如何更改脚手架版本二、React 组…...

编程日记 2023/4/22 7:22:45

文章目录 reids-listBLMOVEBLMPOPBLPOPBRPOPBRPOPLPUSHLINDEXLINSERTLLENLMOVELMPOPLPOPLPOSLPUSHLPUSHXLRANGELREMLSETLTRIMRPOPRPOPLPUSHRPUSHRPUSHX reids-list 本文介绍了Redis中的表命令。LSET用于设置列表中指定索引位置的元素的值；LTRIM用于按照索引范围修剪…...

编程日记 2023/5/31 10:25:12

openEuler-linux下部署zabbix-超级详细

一、准备工作下载：zabbix包地址：下载Zabbix 准备2台openEuler-linux虚拟机： linux-1：当服务器端 IP地址：192.168.100.100 修改hosts文件 [rootzbx ~]# vim /etc/hosts 192.168.100.100 zbx.xx.cn linux-2&…...

编程日记 2023/5/31 1:52:45

nginx 简介第四章

一、Nginx简介 1、Nginx简介 Nginx（特点：占用内存少，并发能力强） Nginx是一个高性能的 HTTP 和反向代理服务器。 Nginx是一款轻量级的 Web 服务器/反向代理服务器及电子邮件单台物理服务器可支持30 000～50 000个并发…...

编程日记 2023/4/22 7:07:41

c++ float32 与 float16 互转

背景： 最近用到一块推理加速卡时，推理输入的数据是 float16 类型，而我们平常用到的数据是 float 类型，也就是 float32类型，这需要输入数据时float32 转 float16，解析输出数据时 float16 转 float。参考&…...

编程日记 2023/4/22 7:02:40

Redis问题

一、认识Redis 1. 什么是 Redis？ Redis 是一种基于内存的数据库，对数据的读写操作都是在内存中完成，因此读写速度非常快，常用于缓存，消息队列、分布式锁等场景。Redis 提供了多种数据类型来支持不同的业务场景&#…...

编程日记 2023/4/22 6:57:37

[API]ListList方法集合排序Lambda表达式（四）

List接口： 继承自Collection接口，List集合是可重复集合，并且有序，还提供了一套可以通过下标来操作元素的方法常见的实现类： ArrayList：内部使用数组实现，查询性能更好(直接下标找到物理地址)、…...

编程日记 2023/5/31 20:05:04

【ChatGPT】无需魔法打开即用的 AI 工具集锦

作者：明明如月学长， CSDN 博客专家，蚂蚁集团高级 Java 工程师，《性能优化方法论》作者、《解锁大厂思维：剖析《阿里巴巴Java开发手册》》、《再学经典：《EffectiveJava》独家解析》专栏作者。热门文章推荐…...

编程日记 2023/4/22 6:47:35

Choco-slover的使用

一. 相关资料 choco-slover github源代码以及工具下载网址：https://github.com/chocoteam/choco-solverchoco-slover 官网文档：https://choco-solver.org/choco-slover安装eclipse视频：https://www.youtube.com/watch?v=qz6ATkEI_F8视频所采用的资源网址：https://drive.go…...

编程日记 2023/5/29 20:38:52

亚马逊、ebay、temu如何提升产品点击率？测评自养号解析

产品点击率对于店铺销售额的影响至关重要，尤其是在竞争越来越激烈的市场环境中，想要有销量和转化，提高产品listing点击率成为了非常关键的一环。 1. 产品主图顾客浏览产品时，第一眼看到的就是主图，一张优质的主图更容…...

编程日记 2023/6/1 4:46:15

人工智能的前沿信息获取之使用谷歌学术搜索

谷歌学术是谷歌公司开发的一款专门针对学术搜索的在线搜索引擎[4]，谷歌学术的网址为https://scholar.google.com，界面如图 6‑1所示。使用谷歌学术搜索可以检索会议或者期刊论文。只需要在检索框中输入关键字，然后点搜索按钮即可，…...

编程日记 2023/4/22 6:32:30

PHP快速入门06-类型转换

文章目录前言一、关于类型转换1.1 自动类型转换1.2 显式类型转换二、15个常用类型转化示例2.1 将字符串转换为整型2.2 将整型转换为字符串2.3 将浮点型转换为整型2.4 将整型转换为浮点型2.5 将布尔型转换为整型2.6 将整型转换为布尔型2.7 将字符串转换为浮点型2.8 将浮点型转…...

编程日记 2023/6/1 4:47:44

Motion Planning学习笔记一：配置空间、图、图搜索、图遍历

学习高飞博士的路径规划课程所总结的学习笔记。目录 1、配置空间（Configuration Space, C-space） 2、图（Graphs） 3、图搜索（Graph Search Basis） 3.1、总体框架 3.2、两种基本的图遍历算法 3.3、启…...

编程日记 2023/6/1 4:48:50

C语言中如何判断大小端字节序？

大小端（Endian）是指多字节整数在内存中存储的方式。在计算机中，一个多字节整数由多个字节组成，而不同的机器和处理器在存储多字节整数时会有两种不同存储方式，分别为大端字节序和小端字节序。以一个4字节整数0x12345…...

编程日记 2023/4/22 6:17:25

用spring-boot-starter实现事务的统一配置

一、前言微服务架构下，多个微服务都需要事务操作，如果在每个微服务下都从头配置事务，将非常繁锁。事务配置具有高度的一致性，可以抽取出来，制作starter，在需要配置事务的服务中引入starter依赖即可。采用…...

编程日记 2023/5/31 1:53:35

C语言中fopen的详细用法

fopen是C语言中用于打开文件的函数，其原型为： FILE *fopen(const char *filename, const char *mode); 其中，filename是要打开的文件名，mode是打开文件的模式。fopen函数返回一个指向FILE类型的指针，该指针指向打开的…...

编程日记 2023/4/22 6:07:22

C语言——学生信息管理系统（数组）

文章目录一、前言二、目的三、框架1.菜单1.1主菜单1.2子菜单 2.流程图2.1总流程图2.2开始流程图2.3增加学生信息流程图2.4.删除学生信息流程图2.5修改学生信息流程图2.6查询学生信息流程图2.7对学生信息排序流程图 3.思路四、代码五、演示视频一、前言因为最近是在赶进度总…...

编程日记 2023/4/22 6:02:21

【C语言】基础语法1：变量和数据类型

下一篇：运算符和表达式 ❤️‍🔥前情提要❤️‍🔥 欢迎来到C语言基本语法教程在本专栏结束后会将所有内容整理成思维导图（结束换链接）并免费提供给大家学习，希望大家纠错指正。本专栏将以基础出发…...

编程日记 2023/4/22 5:57:19

linux安装和使用jekins

Jenkins详细安装配置部署--超详细_jenkins安装部署_宝贝富贵猪的博客-CSDN博客 1.安装JDK 2.获取安装包下载页面：https://jenkins.io/zh/download/ 或者Index of /jenkins/redhat/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 3.安装Jenkins sud…...

编程日记 2023/5/29 20:40:13

驼峰式匹配

问题： 如果我们可以将小写字母插入模式串 pattern 得到待查询项 query，那么待查询项与给定模式串匹配。（我们可以在任何位置插入每个字符，也可以插入 0 个字符。） 给定待查询列表 queries，和模式串 patte…...

编程日记 2023/4/22 5:47:15

第三十七章立方体贴图总结

立方体贴图：将多个纹理组合起来映射到一张纹理上的一种纹理类型。一个立方体贴图时包含了6个2D纹理的纹理，每个2D纹理都组成了立方体的一个面，相当于是一个有纹理的立方体。创建立方体贴图：首先需要生成一个纹理，将其绑定到纹理目标上，再做其他纹理操作。补充：绑定到…...

编程日记 2023/4/22 5:42:15

哈希（C++)

哈希 unordered系列关联式容器unordered_map介绍底层结构哈希概念哈希冲突哈希函数哈希冲突解决方式闭散列开散列模拟实现哈希表的改造哈希应用位图概念实现布隆过滤器提出概念 unordered系列关联式容器在C98中，STL提供了底层为红黑树结构的一系列关联式容器&…...

编程日记 2023/4/22 5:37:14

Spring MVC 的调用（12）

目录 SpringMVC流程源码分析第一步:用户发起请求到前端控制器（DispatcherServlet） 第二步：前端控制器请求处理器映射器（HandlerMappering）去查找处理器（Handle）：通过xml配置或者…...

编程日记 2023/4/22 5:32:12

死磕内存篇 --- JAVA进程和linux内存间的大小关系

运行个JAVA 用sleep去hold住 package org.hjb.test; public class TestOnly { public static void main(String[] args) { System.out.println("sleep .."); try { Thread.sleep(10000000); } catch (InterruptedException e) { e.printStackTrace(); } } } java -…...

编程日记 2023/5/31 10:26:46

信号完整性分析：关于传输线的三十个问题解答（三）

21.FR4 中 50 欧姆传输线的单位长度电感是多少？如果阻抗加倍怎么办？（What is the inductance per length of a 50-Ohm transmission line in FR4? What if the impedance doubles?） FR4 中的所有 50 欧姆传输线的单位长度电感约…...

编程日记 2023/4/22 5:22:04

Java基础：Stream流常用方法

获取Stream流的方式 java.util.stream.Stream 是Java 8新加入的流接口。（并不是一个函数式接口） 获取一个流非常简单，有以下几种常用的方式： 所有 Collection 集合都可通过 stream 默认方法获取流（顺序流）…...

编程日记 2023/5/30 6:10:07

ImageNet使用方法（细节）自用！

学习记录，自用。 1. 下载数据集点击以下链接下载种子文件，然后使用迅雷进行下载，仅下载勾选的文件即可。 https://hyper.ai/datasets/4889/c107755f6de25ba43c190f37dd0168dbd1c0877e 2. 解压找到下载好的ILSVRC2012_img_train.tar 和…...

编程日记 2023/4/22 5:12:02