今日は学んだtypescriptとreactを使って簡単な小さなプロジェクトを実装してみたいと思います：
公式のcreate-react-appを使用して、プロジェクトのディレクトリ構造を構築します：
npx create-react-app ts-react-app --typescript
antdのオンデマンド導入を使用するには、ルートディレクトリに新しい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')
)
プロジェクトが始まれば、結果を見ることができます：
ソース:
