如何从零搭建一个react + TS的完整项目
时间: 2023-08-10 13:04:40 浏览: 112
搭建 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-loader 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?$/,
loader: 'awesome-typescript-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000,
},
};
```
15. 运行 npm start 启动项目
```
npm start
```
以上就是从零搭建一个 React + TypeScript 的完整项目的步骤。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)