React TypeScript 项目基本构建

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

React 组件使用一个名为 render() 的方法，接收输入的数据并返回需要展示的内容。在示例中这种类似 XML 的写法被称为 JSX。被传入的数据可在组件中通过 this.props 在 render() 访问。一般来说,React 组件的基本代码如下:

class Hello extends React.Component {
  render() {
    return (
      <div>
        {this.props.name}
      </div>
    );
  }
}
ReactDOM.render(
  <Hello name="Hello React" />,
  document.getElementById('app')
);

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。目前不少JS框架都是基于TypeScript构建的.

下面介绍一下如何利用TypeScript来编写基本的React项目。首先需要安装Node.js。在命令行中执行如下命令：

npx create-react-app my-app --template typescript

yarn start Starts the development server.

yarn build Bundles the app into static files for production.

yarn test Starts the test runner

yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

在命令行中执行如下命令开启服务：

cd yd-react-ts

yarn start

稍等片刻，会自动打开浏览器并显示如下界面：

如果安装失败，可以尝试安装淘宝镜像：

npm install --registry=https://registry.npm.taobao.org

最后用VSCode打开项目文件yd-react-ts，界面如下：

其中src目录是源码文件；public是一些公共资源文件，比如HTML页面，图片，字体等；node_modules是依赖的库；对项目文件进行重新改造，并在目录src下创建目录components，然后创建YdButton.tsx和YdButton.css文件。

YdButton.tsx

import React, { Component, MouseEvent } from 'react';
export class YdButton extends Component {
 handleClick(event: MouseEvent) {
 event.preventDefault();
 alert("Click");
 }
 render() {
return <button className="Yd-Button" onClick={this.handleClick}>
{this.props.children}
</button>
 }
}
export default YdButton;

YdButton.css

.Yd-Button{
    height: 30px;
    line-height: 30px;
    min-width: 30px;
    width: 60px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    color: #fff;
    background-color: rgb(16, 134, 207);
    border: 0;
    border-radius: 6px;
}

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './components/YdButton.css';
import YdButton from './components/YdButton';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<YdButton>Button</YdButton>
</React.StrictMode>,
 document.getElementById('root')
);
serviceWorker.unregister();





打包执行命令：

yarn build

成功执行后，会在目录build中生成压缩后的相关文件：