React TypeScript 创建过程

一、安装create-react-app （在电脑全局安装win+r打开cmd安装）

# npm install -g create-react-app

二、安装my-app （构建项目）

第一种无项目，构建项目时直接加入typescript （不想加入直接去掉 --typescript 即可）

# npx create-react-app my-app --typescript
# or
# yarn create-react-app my-app --typescript

第二种有项目，在项目内加入typescript

# npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
# yarn add typescript @types/node @types/react @types/react-dom @types/jest

默认目录结构

├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
│   └── manifest.json
├── src
│   ├── App.css             # App根组件的css
│   ├── App.js              # App组件代码
│   ├── App.test.js
│   ├── index.css           # 启动文件样式
│   ├── index.js            # 启动的文件（开始执行的入口）！！！！
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

npm/yarn 脚本

yarn start / npm run start  启动项目
yarn test / npm run test  启动测试
yarn build / npm run build 打包
-----------------
yarn eject / npm run eject 解压默认隐藏得webpack配置

三、安装sass

# npm install node-sass --save
# or
# yarn add node-sass

安装完成后可以将原来的css文件改成scss或者sass文件

在sass文件中引入其他sass文件

# 引入src目录下得问scss文件 `@import "styles/common.scss"`
# 引入node_modules目录下得问scss文件 `@import "~nprogress/nprogress"`

四、使用css module

button.scss

.error {
  background-color: red;
}

button.js

import React, { Component } from 'react';
import styles from './button.scss'; // Import css modules stylesheet as styles

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

五、配置代理

package.json 简单代理

...
"proxy":"http://localhost:4000"
...

自定义代理

一、安装 http-proxy-middleware

# npm install http-proxy-middleware --save
# or
# yarn add http-proxy-middleware

二、创建 src/setupProxy.js

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};

## Visual Studio Code配置React开发环境

### React集成VSCode测试

第一步:
首先安装：[`Debugger for Chrome`](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)插件。
第二步： 项目根目录下创建 `.vscode`文件夹。
第三步：创建`launch.json`文件
文件内容：

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

六、分析包结构

source map explorer 可以帮我们分析最终打包后得bundles得代码来自哪里

# npm install source-map-explorer --save
# or
# yarn add source-map-explorer

添加分析的脚本到package.json

"script":{
    "analyze":"source-map-explorer build/static/js/main.*",
    ...
}