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

React应用(基于React脚手架)

news 2025/9/19 2:56:00

目录

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

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/9/9 23:12:32

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/9/3 8:33:23

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/9/12 23:22:00

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/9/12 6:14:24

VSCode 使用CMake 构建 Qt 5 窗口程序

首先，目录结构如下图： 运行效果： cmake -B build cmake --build build 运行： windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...

编程新知 2025/9/17 16:26:28

ABB馈线保护 REJ601 BD446NN1XG

配电网基本量程数字继电器 REJ601是一种专用馈线保护继电器&#xff0c;用于保护一次和二次配电网络中的公用事业和工业电力系统。该继电器在一个单元中提供了保护和监控功能的优化组合&#xff0c;具有同类产品中最佳的性能和可用性。 REJ601是一种专用馈线保护继电器&#xf…...

编程新知 2025/7/7 13:44:03

Docker 镜像上传到 AWS ECR：从构建到推送的全流程

一、在 EC2 实例中安装 Docker&#xff08;适用于 Amazon Linux 2&#xff09; 步骤 1&#xff1a;连接到 EC2 实例 ssh -i your-key.pem ec2-useryour-ec2-public-ip步骤 2&#xff1a;安装 Docker sudo yum update -y sudo amazon-linux-extras enable docker sudo yum in…...

编程新知 2025/9/1 12:25:12

智能问数Text2SQL Vanna windows场景验证

架构 Vanna 是一个开源 Python RAG&#xff08;检索增强生成&#xff09;框架&#xff0c;用于 SQL 生成和相关功能。 机制 Vanna 的工作过程分为两个简单步骤 - 在您的数据上训练 RAG“模型”&#xff0c;然后提出问题&#xff0c;这些问题将返回 SQL 查询&#xff0c;这些查…...

编程新知 2025/9/9 9:58:30

RMQ 算法详解（区间最值问题）

RMQ 算法详解&#xff08;区间最值问题&#xff09; 问题介绍解决方法暴力法ST表法基本思想算法步骤C实现 问题介绍 RMQ问题是OI中经常遇到的问题&#xff0c;主要是一下形式&#xff1a; 给你一堆数&#xff0c;不断的对里面的数进行操作&#xff0c;例如&#xff1a;让某个…...

编程新知 2025/7/9 2:20:37