一步一步建立自己的react 开发环境(三)

这次的目标: 添加React

1. 安装

yarn add react react-dom @types/react @types/react-dom

2. 写点代码
   修改入口文件格式 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')
);

3. 修改TypeScript配置文件, 加入对JSX的支持

// tsconfig.json

{
  "compilerOptions": {
  // ...
    "jsx": "react"
  },
  // ...
}

4. 修改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'],
  },
  // ...
}

5. 测试
   执行 yarn start , 成功了!

最终代码