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

使用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’)遇到加减符,压栈数字&#xf…...

巧妙的使用WPF中的资源

其实,在wpf中,最核心的就是xaml,因为只有xaml,才能体现出用的是wpf,而不是普通的cs文件,cs文件在winform中等等程序都可以使用的,唯独xaml才是wpf中最重要的,最精华的东西&#xff0…...

多维时序 | 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 读写分离面试坑…...

电机驱动开发

最近在搞电机驱动程序,感觉很简单,实际操作却发现里面还有很多猫腻(细节)。 电机在嵌入式设备中非常常见,例如云台的转动,都是靠电机来驱动的。 电机常见分步进电机、直流电机,相对来说步进电机…...

痕迹的痕迹:从朱君鸿论牟宗三与林安梧看学术争论的自感根源

痕迹的痕迹:从朱君鸿论牟宗三与林安梧看学术争论的自感根源 岐金兰 --- 摘要 朱君鸿的文章《从“横摄系统”到“横摄归纵”》是对牟宗三与林安梧不同朱子观的比较研究。从AI元人文的视角看,这篇文章本身是一层“痕迹”——它是对牟宗三、林安梧痕迹的再痕…...

QMCDecode终极指南:3步破解QQ音乐加密格式,实现音频自由播放

QMCDecode终极指南:3步破解QQ音乐加密格式,实现音频自由播放 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac,qmc0,qmc3转mp3, mflac,mflac0等转flac),仅支持macOS,可自动识别到QQ音乐下载目录…...

全平台数据采集工具:BarrageGrab直播弹幕实时抓取解决方案

全平台数据采集工具:BarrageGrab直播弹幕实时抓取解决方案 【免费下载链接】BarrageGrab 抖音快手bilibili直播弹幕wss直连,非系统代理方式,无需多开浏览器窗口 项目地址: https://gitcode.com/gh_mirrors/ba/BarrageGrab 在数字直播时…...

CoPaw代码生成能力展示:从自然语言描述到可运行Python脚本

CoPaw代码生成能力展示:从自然语言描述到可运行Python脚本 1. 开篇:当自然语言遇上代码生成 "能不能帮我写个Python脚本,把文件夹里的图片都转成灰度图?"这样的需求,现在可以直接说给CoPaw听。作为一款专注…...

Video2X:用AI突破视频质量瓶颈的全栈解决方案

Video2X:用AI突破视频质量瓶颈的全栈解决方案 【免费下载链接】video2x A lossless video/GIF/image upscaler achieved with waifu2x, Anime4K, SRMD and RealSR. Started in Hack the Valley II, 2018. 项目地址: https://gitcode.com/GitHub_Trending/vi/video…...

构建边缘AI小语言模型

大型语言模型(LLM)在任何场合、任何设备上都可访问。 但拥有数千亿参数的LLM对于低延迟应用来说过于昂贵,而普通的SLM在保真度和一致性响应方面往往表现不佳。 为应对这一挑战,我将调优一个紧凑的Llama 3.2–3B模型,…...

提升数据抓取效率:用快马AI生成openclaw命令自动化脚本模板

最近在做一个数据抓取项目时,发现手动写openclaw命令实在太费时间了。每次都要重复写类似的fetch和parse命令,还要处理各种异常情况。后来发现用InsCode(快马)平台可以快速生成自动化脚本模板,效率提升了好几倍。今天就把这个经验分享给大家。…...

实战指南:基于快马生成tomcat生产级配置,涵盖https、集群与性能调优

今天想和大家分享一个实战经验:如何在生产环境中配置Tomcat服务器。作为一个长期和Tomcat打交道的开发者,我深知生产环境配置和本地开发环境的巨大差异。最近在InsCode(快马)平台上实践了一套完整的配置方案,效果很不错,这里把关键…...

实时内存监控→自动降级→优雅回收:构建Python服务的自愈式内存管理闭环(附开源工具链)

第一章:Python智能体内存管理策略教程 Python智能体(如基于LangChain、LlamaIndex构建的Agent)在长时间运行、多轮对话或处理大上下文时,常面临内存泄漏、缓存冗余与引用滞留等问题。其内存管理不能仅依赖CPython的自动引用计数与…...

RTX4090D大模型推理专用镜像体验:Qwen-Image预装环境,一键启动图文对话

RTX4090D大模型推理专用镜像体验:Qwen-Image预装环境,一键启动图文对话 1. 镜像概述与核心优势 1.1 为什么选择专用镜像 在本地部署大语言模型时,环境配置往往是最耗时的环节。以Qwen-VL这样的视觉语言模型为例,需要处理CUDA版…...