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'",