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

React应用(基于React脚手架)

news 2025/11/7 15:10:10

目录

  • 前言：
  • 一、使用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 脚手架？

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

2. 创建 cli 脚手架方式1

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

3. 创建 cli 脚手架方式2

直接使用npx来创建项目

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

4. npx:

  1. npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用
  2. 没有 npx 之前：
    • 全局安装 npm i -g create-react-app
    • 在通过脚手架的命令来创建 React 项目
  3. 有了 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. 实现静态组件: 使用组件实现静态页面效果
  3. 实现动态组件
    1. 动态显示初始化数据
      • 数据类型
      • 数据名称
      • 保存在哪个组件?
    2. 交互(从绑定事件监听开始)

7. 如何更改脚手架版本

  1. 由于 create-react-app my-app 安装的都是最新的版本 所以我们需要指定版本，直接执行下面的步骤就可以
  2. 脚手架创建完成后改变 package.json 中的 react 版本
    在这里插入图片描述
  3. 更改为指定版本后删除 node_modules 文件，重新 npm i 下载配置
  4. 配置完成后运行会报错，因为组件中使用的还是源版本配置
  5. 删除 public 和 src 文件夹下所有文件，根据当前版本进行配置
  6. 只需要配置完成 public 下的 index.html 文件，和 src 下的 index.js 和 App.js 文件。
  7. 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>
  1. src 下的 index.js 文件
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
ReactDom.render(<App />, document.getElementById('root'));
  1. src 下的 App.js 文件
import React from 'react'export default function App() {return (<div>App组件</div>)
}
  1. 使用 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 代码示例

功能: 组件化实现此功能

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

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

4. TodoList 效果展示

功能: 组件化实现此功能

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

在这里插入图片描述

总结：

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

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

相关文章：

React应用(基于React脚手架)

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

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

Redis（03）List--附有示例

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

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

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

一、准备工作 下载&#xff1a;zabbix包 地址&#xff1a;下载Zabbix 准备2台openEuler-linux虚拟机&#xff1a; linux-1&#xff1a;当服务器端 IP地址&#xff1a;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&#xff08;特点&#xff1a;占用内存少&#xff0c;并发能力强&#xff09; Nginx是一个高性能的 HTTP 和反向代理服务器。 Nginx是一款轻量级的 Web 服务器/反向代理服务器及电子邮件 单台物理服务器可支持30 000&#xff5e;50 000个并发…...

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

c++ float32 与 float16 互转

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

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

Redis问题

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

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

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

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

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

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

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;蚂蚁集团高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《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如何提升产品点击率？测评自养号解析

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

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

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

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

编程日记 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、配置空间&#xff08;Configuration Space, C-space&#xff09; 2、图&#xff08;Graphs&#xff09; 3、图搜索&#xff08;Graph Search Basis&#xff09; 3.1、总体框架 3.2、两种基本的图遍历算法 3.3、启…...

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

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

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

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

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

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

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

C语言中fopen的详细用法

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

编程日记 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：变量和数据类型

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

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

linux安装和使用jekins

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

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

驼峰式匹配

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

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/11/6 16:18:09

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/11/1 22:49:39

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/9/11 12:55:04

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/11/6 0:52:38

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/9/22 20:53:03

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/11/7 14:17:30

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2025/10/29 4:14:03

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/10/27 11:35:19

深度解析云存储：概念、架构与应用实践

在数据爆炸式增长的时代&#xff0c;传统本地存储因容量限制、管理复杂等问题&#xff0c;已难以满足企业和个人的需求。云存储凭借灵活扩展、便捷访问等特性&#xff0c;成为数据存储领域的主流解决方案。从个人照片备份到企业核心数据管理&#xff0c;云存储正重塑数据存储与…...

编程新知 2025/10/30 6:08:18