react tsx

npm i -g webpack webpack-dev-server typescript

创建项目目录

mkdir projecttest
cd prokecttest
npm init

创建tsconfig.json

{
  "compilerOptions": {
    "jsx":"react", //tsx转换为js，不是不是jsx
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

创建文件目录

mkdir src //代码目录
mkdir lib //代码输出目录
mkdir config //配置文件目录

lib目录下创建index.html

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Hello world</title>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
</head>

<body>
    <div id="app"></div>
    <script src="assets/app.bundle.js"></script>
</body>

</html>

config目录下创建文件webpack.config.js

/* build/webpack.config.js */
var path = require('path')
const config = {
    entry: './src/index.tsx',
    output: {
        filename: 'app.bundle.js',
        path: path.resolve(__dirname, '../lib'),
        publicPath: '/assets'
    },
    devtool: 'source-map',
    resolve: {
        extensions: [
            // '',
            '.webpack.js',
            '.web.js',
            '.ts',
            '.tsx',
            '.js'
        ]
    },
    module: {
        loaders: [{
                test: /.tsx?$/,
                loader: 'ts-loader'
            },
            {
                test: /.js$/,
                loader: 'source-map-loader'
            },
            {
                test: /.css$/,
                loader: 'css-loader'
            }
        ],
    },
    devtool: 'eval'
}
module.exports = config

src目录下创建index.tsx

import * as React from 'react'
import {render} from 'react-dom'

interface AppProps{}
interface AppStates{}

class App extends React.Component<AppProps,AppStates> {
    
    constructor(props) {
        super(props)
    }

    render():JSX.Element{
        this.updateTime()
        return(
            <div id='app'>
                <p>App content</p>
            </div>
        )
    }
}
render(<App/>,document.getElementById('app'))

安装依赖包

npm i --save-dev ts-loader source-map-loader  
npm i --save-dev react react-dom @types/react @types/react-dom  //@types/react @types/react-dom添加到dev中，防止有的版本引用错误
npm link webpack webpack-dev-server typescript //项目链接到全局

package.json script添加执行命令

"dev": "webpack-dev-server --inline --config config/webpack.config.js --content-base lib --open"

create react app typescript
运行命令： create-react-app projectname --scripts-version=react-scripts-ts

开黑吗我亚索贼6