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

react app教程

react app教程

环境准备

  • 下载node

  • 下载npx

npm install npx
  • 创建app
npx create-react-app automedia
cd automedia
npm start
  • 构建发布版本
npm run build
  • 安装调试工具
# .vscode/launch.json
{// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "针对 localhost 启动 Chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}","sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*"}}]
}

安装chrome dev tools插件,然后npm start,再按f5或者运行中开始调试。

  • 安装自动格式化代码工具
npm install --save husky lint-staged prettier

然后在package.json文件中添加如下内容:

+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
  • 分析包大小
npm install --save source-map-explorer

在package.json中的scripts里添加如下内容:

"analyze": "source-map-explorer 'build/static/js/*.js'",
http://www.lryc.cn/news/150889.html

相关文章:

  • 在vue项目中用vue-watermark快捷开发屏幕水印效果
  • 无涯教程-Android - Activity
  • vue项目前端展示数学公式(在表格中渲染)
  • java八股文面试[数据库]——MySQL索引的数据结构
  • python3.11教程2:基础数据类型(数字和字符串)、组合数据类型(集合、元组、列表、字典)
  • 剑指 Offer 44. 数字序列中某一位的数字(中等)
  • SpringBoot中HttpClient的学习
  • JVM-内存溢出的原因、CPU占满的原因
  • 如何做好银行统一报送系统UI设计
  • 988. 从叶结点开始的最小字符串
  • RealSense D455启动教程
  • docker与phpstudy两种方式部署wordpress 并 开启伪静态
  • 网站搭建最简化的引导操作 | 云服务器的购买选用 | 域名的选用 | 网站的上线和备案。
  • Spring Cloud Foundry上使用通配符模式匹配进行的安全绕过漏洞 CVE-2023-20873
  • 简述SpringMVC
  • vue竖向步骤条
  • java八股文面试[多线程]——Synchronized优化手段:锁膨胀、锁消除、锁粗化和自适应自旋锁
  • 【数据结构】队列---C语言版(详解!!!)
  • java:详解http模块request对象
  • 力扣20. 有效的括号
  • 用springboot+elasticserach7的demo,对比sider和百度ai的异同
  • Python的pymysql模块与MySQL数据库的互动:基础与实例
  • 滑动窗口实例1(长度最小的子数组)
  • EI、Scopus双检索| 2023年第四届自动化、机械与设计工程国际会议
  • 【混合时变参数系统参数估计算法】使用范数总和正则化和期望最大化的混合时变参数系统参数估计算法(Matlab代码实现)
  • vue的公共方法封装以及class高阶封装
  • OpenGL-入门-BMP像素图glReadPixels(1)实现读取屏幕中间的颜色和获取屏幕上鼠标点击位置的颜色
  • 斥资4亿,收购这家WLAN厂商,结果……
  • 【简单】2511. 最多可以摧毁的敌人城堡数目
  • Linux用一键安装包部署禅道(18.5版本)