使用create-react-app脚手架创建react项目
文章目录
- 1、安装create-react-app脚手架
- 2、创建 React 项目，项目名为 react-demo
- 3、项目创建成功
- 4、使用vscode打开项目并运行
- 5、项目运行成功
- node_modules：存放项目所依赖的一些第三方包文件
- public：静态资源文件夹
- src:源码文件夹
- 其它文件
1、安装create-react-app脚手架
打开cmd，执行命令npm i -g create-react-app，安装create-react-app脚手架
2、创建 React 项目，项目名为 react-demo
执行命令
create-react-app react-demo
3、项目创建成功
4、使用vscode打开项目并运行
输入npm start运行项目
5、项目运行成功
node_modules：存放项目所依赖的一些第三方包文件
public：静态资源文件夹
favicon.ico：导航图标
index.html：项目首页的html模版
logo192.png&logo512.png：两个logo图片
manifest.json：应用加壳配置文件，在手机上描述我们应用程序的json文件
robots.txt：爬虫协议文件
src:源码文件夹
App.css：App组件的样式
App.js：App组件
App.test.js：自动化测试文件，用于给App做测试
index.css：全局样式
index.js：入口文件，所用组件都会通过index.js载入
logo.svg：react的一个标志文件，sug文件是纯粹的XML，保证了在放大缩小时图像不失真
reportWebVitals.js：导入了一个web-vitals的第三方库，用来检查应用程序的性能
setupTests.js:从Jest-dom导入匹配器，在进行测试时使用
其它文件
.gitignore：git的一个文件，在这里可以配置不想提交到版本库里的文件
package-lock.json：项目安装包的版本号
package.json：存放react的一些依赖和指令
README.md：项目的介绍文件，运用markdown标记语言编写，在github等开源代码网站上，项目常用.md文件来进行介绍
相关文章：
使用create-react-app脚手架创建react项目
文章目录 1、安装create-react-app脚手架2、创建 React 项目，项目名为 react-demo3、项目创建成功4、使用vscode打开项目并运行5、项目运行成功node_modules：存放项目所依赖的一些第三方包文件public：静态资源文件夹src:源码文件夹其它文件 1…...
【网络安全】网络防护之旅 - 点燃网络安全战场的数字签名烟火
🌈个人主页：Sarapines Programmer🔥 系列专栏：《网络安全之道 | 数字征程》⏰墨香寄清辞：千里传信如电光，密码奥妙似仙方。 挑战黑暗剑拔弩张，网络战场誓守长。 目录 😈1. 初识…...
JVM基础扫盲
什么是JVM JVM是Java设计者用于屏蔽多平台差异，基于操作系统之上的一个"小型虚拟机"，正是因为JVM的存在，使得Java应用程序运行时不需要关注底层操作系统的差异。使得Java程序编译只需编译一次，在任何操作系统都可以以相…...
SpringBoot基于gRPC进行RPC调用
SpringBoot基于gRPC进行RPC调用 一、gRPC1.1 什么是gRPC？1.2 如何编写proto1.3 数据类型及对应关系1.4 枚举1.5 数组1.6 map类型1.7 嵌套对象 二、SpringBoot gRPC2.1 工程目录2.2 jrpc-api2.2.1 引入gRPC依赖2.2.2 编写 .proto 文件2.2.3 使用插件机制生产proto相关…...
浏览器的事件循环机制（Event loop）
事件循环 浏览器的进程模型 何为进程？ 程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程 每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。 何为线程？ …...
THEMIS---Beta Sprint Summary Essay Blog
Which course does this assignment belong to2301-MUSE社区-CSDN社区云What are the requirements for this assignmentbeta SprintThe goal of this assignmentTo summarize the beta task progress and the teams sprintsTeam NameThemisTop-of-the-line collection of essa…...
Vue中实现分布式动态路由的基本实现步骤介绍
设想一下，我们在做一个体量非常大的项目，这个项目有很多的模块和相当多的页面。当我们想修改一个路由的时候，我们打开了router文件夹下的index.js文件时，一串长到鼠标滚轮需要滚大半天才滚到底的路由简直让人头皮发麻。 在开始之前…...
【Leetcode】计算器
思路 用栈来完成； 考虑到运算关系，先乘除后加减；此外，一般计算式首个数字式正数；判断字符是否为数字，str.isdigit()字符转数字：ord(str) - ord(‘0’)遇到加减符，压栈数字…...
巧妙的使用WPF中的资源
其实，在wpf中，最核心的就是xaml，因为只有xaml，才能体现出用的是wpf，而不是普通的cs文件，cs文件在winform中等等程序都可以使用的，唯独xaml才是wpf中最重要的，最精华的东西࿰…...
多维时序 | MATLAB实现RIME-CNN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测
多维时序 | MATLAB实现RIME-CNN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现RIME-CNN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现RIME-…...
【AIGC重塑教育】AI大模型驱动的教育变革与实践
文章目录 🍔现状🛸解决方法✨为什么要使用ai🎆彩蛋 🍔现状 AI正迅猛地改变着我们的生活。根据高盛发布的一份报告，AI有可能取代3亿个全职工作岗位，影响全球18%的工作岗位。在欧美，或许四分之一…...
【力扣100】2.两数相加
添加链接描述 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def addTwoNumbers(self, l1: Optional[ListNode], l2: Optional[ListNode]) -> Op…...
算法leetcode｜93. 复原 IP 地址（多语言实现）
文章目录 93. 复原 IP 地址：样例 1：样例 2：样例 3：提示： 分析：题解：rust：go：c：python：java： 93. 复原 IP 地址： 有效 IP …...
TOGAF—架构（Architecture）项目管理
一、简介 1.1概述 架构（Architecture）项目在本质上通常是复杂的。他们需要适当的项目管理来保持正轨并兑现承诺。本指南适用于负责规划和管理架构（Architecture）项目的人员。我们解释了如何用事实上的方法和标准（如PRINCE2或PMBOK）来补充TOGAF架构开发方法（ADM），以加…...
MVVM前端设计模式的发展与应用
在MVC模式中，随着代码量越来越大，主要用来处理各种逻辑和数据转化的Controller首当其冲，变得非常庞大，MVC的简写变成了Massive-View-Controller（意为沉重的Controller） 我曾经接手老项目，sprin…...
redis：二、缓存击穿的定义、解决方案（互斥锁、逻辑过期）的优缺点和适用场景、面试回答模板和缓存雪崩
缓存击穿的定义 缓存击穿是一种现象，具体就是某一个数据过期时，恰好有大量的并发请求过来，这些并发的请求可能会瞬间把DB压垮。典型场景就是双十一等抢购活动中，首页广告页面的数据过期，此时刚好大量用户进行请求&…...
php的Url 安全的base64编码解码类
/*** Url安全的Base64编码方法* author JerryLi* version 20231217*/ final class UrlSafeB64Fun{/*** 编码* param string $sData 原始字符串* return string*/static public function encode(string $sData): string{$aTmp base64_encode($sData);return strtr($aTmp, [>…...
安全CDN有什么作用,安全CDN工作原理是什么?
一、CDN的应用场景 CDN技术可以应用于各种类型的网站和应用程序，特别是对于以下几种场景，CDN的作用尤为明显： 1. 高流量网站：对于流量较大的网站，CDN可以将网站的内容分发到全球各地的节点上，从而分担服务…...
Mysql高可用｜索引｜事务 | 调优
前言 「作者主页」：雪碧有白泡泡 「个人网站」：雪碧的个人网站 文章目录 前言sql语句的执行顺序关键词连接名字解释sql语句 面试坑点存储引擎MYSQL存储引擎 SQL优化索引索引失效索引的数据结构面试坑点 锁事务四大特性事务的隔离级别MVCC 读写分离面试坑…...
电机驱动开发
最近在搞电机驱动程序，感觉很简单，实际操作却发现里面还有很多猫腻（细节）。 电机在嵌入式设备中非常常见，例如云台的转动，都是靠电机来驱动的。 电机常见分步进电机、直流电机，相对来说步进电机…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。 发送模版消息： import requests da…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
以光量子为例，详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的，启动是正常的， 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...