TS+react demo（一）：项目搭建

今天想通过学习的typescript和react实现一个简单的小项目：

采用官方的create-react-app搭建项目目录结构：

npx create-react-app ts-react-app --typescript

采用antd的按需引入， 需要在根目录下(src同级目录)，新建config-overrides.js

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  })
);

为了看到效果，在src目录下新建components，在components目录下新建demo文件，新建Hello.tsx:

import React from 'react';
import { Button } from 'antd';

interface Greeting {
  name: string;
  firstName: string;
  lastName: string;
}

const Hello = (props: Greeting) => <Button>Hello {props.name}</Button>

Hello.defaultProps = {
  firstName: '',
  lastName: ''
}

export default Hello

最后在入口文件index.tsx里引入我们写好的文件

import React from 'react';
import ReactDOM from 'react-dom';

import Hello from './components/demo/Hello'

ReactDOM.render(
  <Hello name="TypeScript" />,
  document.getElementById('root')
)

项目启动后，我们就可以看到效果啦：

源码：ts-react-app