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

React应用(基于React脚手架)

news 2026/2/8 17:45:50

前言：
一、使用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

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/26 21:57:45

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN）曾被视为…...

编程新知 2026/2/1 7:05:28

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种低级字节码格式，可由高级语言（如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建前言如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...

编程新知 2026/2/2 2:30:58

优选算法第十二讲：队列 + 宽搜优先级队列

优选算法第十二讲：队列宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2026/1/20 17:18:59

Python ROS2【机器人中间件框架】简介

销量过万TEEIS德国护膝夏天用薄款优惠券冠生园百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友热卖妙洁棉…...

编程新知 2026/1/29 9:12:46