1. 新建一个文件夹,按住shift并右键,在此处powershell
  2. npx create-react-app xxx --template typescript其中xxx是文件夹名称
  3. 等待,文件夹中出现名称为xxx的文件夹,用vscode打开xxx
  4. 在powershell里npm i
  5. 在powershell里yarn start
  6. 打开后会是这个样子
  7. 配置代理:在 package.json 中添加一个属性 
"proxy": "http://localhost:4000"

附:package.json
观察这个文件,看着代码就能感受到它是脚手架了

{
   
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
   
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "proxy": "http://localhost:4000",
  "scripts": {
   
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
   
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
   
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
  1. 删掉不必要的文件,只留下这些即可:
  2. 删掉不必要的引用使文件不报错:
  • index.html:只保留一个id为root的入口容器 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
  • App.tsx:只渲染一个例子 
import React from 'react'

function App() {
   
  return (
    <div className="App">
      <p>Hello,Dust</p>
    </div>
  )
}

export default App
  • index.tsx: 
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals