搭建 React + TypeScript 项目的步骤如下：
1. 创
建一个新的项目文件夹
```
mkdir my-
react-ts-app
cd my-
react-ts-app
```
2. 初始化项目
```
npm init -y
```
3. 安装必要的依赖
```
npm install --save
react react-dom
npm install --save-dev typescript @types/
react @types/
react-dom webpack webpack-cli webpack-dev-server awesome-typescript-l
oader html-webpack-plugin
```
4. 创
建一个 TypeScript 配置文件
```
touch tsconfig.json
```
5. 将以下内容添加到 tsconfig.json 文件中
```
{
"compilerOptions": {
"outDir": "./dist/",
"module": "es6",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"jsx": "
react",
"moduleResolution": "node",
"esModuleInterop": true
},
"include": [
"./src/**/*"
]
}
```
6. 添加一个 index.html 文件到项目根目录
7. 添加以下内容到 index.html 文件中
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My
React TypeScript App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
```
8. 创
建一个 src 目录
```
mkdir src
```
9. 在 src 目录中创
建一个 App.tsx 文件
```
touch src/App.tsx
```
10. 将以下内容添加到 App.tsx 文件中
```tsx
import
React from '
react';
const App = () => {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
};
export default App;
```
11. 在 src 目录中创
建一个 index.tsx 文件
```
touch src/index.tsx
```
12. 将以下内容添加到 index.tsx 文件中
```tsx
import
React from '
react';
import
ReactDOM from '
react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
```
13. 在项目根目录中创
建一个 webpack.config.js 文件
```
touch webpack.config.js
```
14. 将以下内容添加到 webpack.config.js 文件中
```js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.tsx?$/,
l
oader: 'awesome-typescript-l
oader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000,
},
};
```
15. 运行 npm start 启动项目
```
npm start
```
以上就是从零
搭建一个
React + TypeScript 的完整项目的步骤。
1194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
