新建一个create-react-app脚手架的项目
- 新建一个文件夹,按住shift并右键,在此处powershell
npx create-react-app xxx --template typescript其中xxx是文件夹名称- 等待,文件夹中出现名称为xxx的文件夹,用vscode打开xxx
- 在powershell里
npm i - 在powershell里
yarn start - 打开后会是这个样子
- 配置代理:在
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"
]
}
}
- 删掉不必要的文件,只留下这些即可:
- 删掉不必要的引用使文件不报错:
- 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
