Create a project directory

The TypeScript files are stored in the SRC folder, compiled by the TypeScript compiler, processed by Webpack, and generated as a bundle.js file in the dist directory. Our custom components will be placed in the SRC/Components folder

Initialization engineering

npm init

Installing dependency packages

  1. First, make sure webPack is installed globallynpm install -g webpack
  2. Install react relatednpm install --save react react-dom @types/react @types/react-dom
  3. Add development-time dependenciesawesome-typescript-loaderandsource-map-loader npm install --save-dev typescript awesome-typescript-loader source-map-loader

Add the TypeScript configuration file

Add tsconfig.json to the project root path

{
	"compilerOptions": {
		"outDir": "./dist/"."sourceMap": true."noImplicitAny": true."module": "commonjs"."target": "es5"."jsx": "react"
	},
	"include": [
		"./src/**/*"]}Copy the code

Demo code writing

  1. SRC > Component add greeter. TSX file
import * as React from 'react';
export interface HelloProps {
	compiler: string;
	framework: string;
}
export class Hello extends React.Component<HelloProps, {}> {
	render() {
		return <h1>Hello from { this.props.compiler } and { this.props.framework } !</h1>;
	}
}
Copy the code
  1. Add the index.tsx file to the SRC directory
import * as React from 'react';
import * as ReactDom from 'react-dom';

import { Hello } from './components/greeter';

ReactDom.render(
  <Hello compiler="typescript" framework="react" />,
  document.getElementById('demo'))Copy the code
  1. Add a page display component and add the index.html file to the root directory

      
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
</head>

<body>
  <div id="demo"></div>

  <! -- Dependencies -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

  <! -- Main -->
  <script src="./dist/bundle.js"></script>
</body>

</html>
Copy the code

Webpack configuration

Create a webpack.config.js file in the project root

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },

  // Enable sourcemaps for debugging webpack's output. devtool: "source-map", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: [".ts", ".tsx", ".js", ".json"] }, module: { rules: [ // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. { test: /\.tsx? $/, loader: "awesome-typescript-loader" }, // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } ] }, // When importing a module whose path matches one of the following, just // assume a corresponding global variable exists and use that instead. // This is important because it allows us to  avoid bundling all of our // dependencies, which allows browsers to cache those libraries between builds. externals: { "react": "React", "react-dom": "ReactDOM" }, };Copy the code

Build command add

  1. Add the following to package.json
."scripts": {
    "build": "webpack"},...Copy the code
  1. Run the following command to buildnpm run build
  2. Open your browser to index.html to see the effect

The source address