当前位置: 首页 > 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文件来进行介绍

http://www.lryc.cn/news/262501.html

相关文章:

  • 【网络安全】网络防护之旅 - 点燃网络安全战场的数字签名烟火
  • JVM基础扫盲
  • SpringBoot基于gRPC进行RPC调用
  • 浏览器的事件循环机制(Event loop)
  • THEMIS---Beta Sprint Summary Essay Blog
  • Vue中实现分布式动态路由的基本实现步骤介绍
  • 【Leetcode】计算器
  • 巧妙的使用WPF中的资源
  • 多维时序 | MATLAB实现RIME-CNN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测
  • 【AIGC重塑教育】AI大模型驱动的教育变革与实践
  • 【力扣100】2.两数相加
  • 算法leetcode|93. 复原 IP 地址(多语言实现)
  • TOGAF—架构(Architecture)项目管理
  • MVVM前端设计模式的发展与应用
  • redis:二、缓存击穿的定义、解决方案(互斥锁、逻辑过期)的优缺点和适用场景、面试回答模板和缓存雪崩
  • php的Url 安全的base64编码解码类
  • 安全CDN有什么作用,安全CDN工作原理是什么?
  • Mysql高可用|索引|事务 | 调优
  • 电机驱动开发
  • 基于PaddleNLP的深度学习对文本自动添加标点符号(一)
  • “Java已死、前端已凉”?尊嘟假嘟?
  • 双向无线功率传输系统MATLAB仿真
  • 火山引擎DataLeap:助你实现从数据研发1.0到数据研发3.0的跨越
  • DevOps 和人工智能 – 天作之合
  • 基于主动安全的AIGC数据安全建设
  • Java 程序的命令行解释器
  • 从事开发近20年,经历过各种技术的转变和进步
  • unet v2学习笔记
  • MQ入门—centos 7安装RabbitMQ 安装
  • 虾皮Shopee商品详情API:电商实时数据获取的关键