這次的目標(biāo): 添加React
- 安裝
yarn add react react-dom @types/react @types/react-dom
- 寫點(diǎn)代碼
修改入口文件格式 index.ts -> index.tsx, 并寫一下JSX:
// src/index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';
const greetings: string = 'Hello world!';
ReactDOM.render(
<h1>{ greetings }</h1>,
document.getElementById('root')
);
- 修改TypeScript配置文件, 加入對JSX的支持
// tsconfig.json
{
"compilerOptions": {
// ...
"jsx": "react"
},
// ...
}
- 修改webpack配置文件
// webpack.config.js
// ...
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
// ...
{
oneOf: [
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
// ...
]
}
]
},
resolve: {
extensions: ['.ts', 'tsx', '.js', '.json'],
},
// ...
}
- 測試
執(zhí)行yarn start, 成功了!
