react+ts准备工作—阿楠

安装项目

安装全局yarn
npm i yarn -g
// 安装项目
npx create-react-app 你的项目名 --template typescript
进入项目目录
cd 你的项目名
安装需要的支持库(redux,react-router-dom)
yarn add redux react-redux@types/react-redux -S
yarn add react-router-dom @types/react-router-dom -S
安装需要的第三库(antd,babel-plugin-import,axios,mockjs)
yarn add babel-plugin-import -D
yarn add antd axios mockjs -S
node-sass
yarn add node-sass

配置babel文件–antd

// .babelrc
{
   
   
  "plugins": [
    ["import", {
   
   
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }]
  ]
}

配置mobx—不需要

yarn add mobx mobx-react -s
yarn add @babel/plugin-proposal-decorators -D
yarn add @babel/plugin-proposal-class-properties -D

"babel": {
   
   
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
   
   
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
   
   
          "loose": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  }
  "eslintConfig": {
   
   
    "parserOptions": {
   
   
      "ecmaFeatures": {
   
   
        "legacyDecorators": true
      }
    },
    "extends": "react-app"
 },

声明全局的变量

// 举例
import Mockurl from './Mockurl'
declare module 'react'{
   
   
  interface Component{
   
   
    $mockurl:any
  }
}
Component.prototype
$mockurl = Mockurl

挂在window对象

// store挂在在window对象上
import store from './store'
declare global{
   
   
  interface Window{
   
   
    store:any
  }
}
window.store = store

antd引用报错

解决措施

删除掉index.tsx中的<React.StrictMode>

StrictMode 目前有助于：

识别不安全的生命周期
关于使用过时字符串 ref API 的警告
关于使用废弃的 findDOMNode 方法的警告
检测意外的副作用
检测过时的 context API

来源：oschina

链接：https://my.oschina.net/u/4323802/blog/4651039

标签

yarn

babel

redux

React Router