はじめに
本記事は、
「フロントエンドの開発効率を向上するヒントを教え合おう!」イベントの参加記事です。
Ant Designとは?
Ant Designは、中国のAlibabaが開発したフロントエンドのUIフレームワークです。
商用利用が可能で、Webアプリとモバイルアプリの両方に対応する膨大なコンポーネントライブラリが用意されています。
日本だとMUIなどの方が人気があって、少し影が薄いかもしれませんが、
海外の特に中国系企業で多く使われています。
環境構築
まずはreactをインストールします。
$ npx create-react-app antd-app --template typescript
そしてantdをインストール。
$ cd antd-app
$ npm install antd
問題なくインストールできていれば以下のコマンドで、
Webサーバが立ち上げ、http://localhost:3000
にてReactの初期画面が表示されるかと思います。
$ npm start
Ant Designを試す
antdからコンポーネントと、それに当てるcssをimportしていきます。
import { Button } from 'antd';
import 'antd/dist/antd.css';
App.tsxの中身を以下のように書き換えます。
import React from 'react';
import { Button, DatePicker, Space } from 'antd';
import 'antd/dist/antd.css';
import Typography from 'antd/lib/typography/Typography';
import Title from 'antd/lib/typography/Title';
import Paragraph from 'antd/lib/typography/Paragraph';
function App() {
return (
<div style={{margin: "50px"}}>
<Typography>
<Title>タイトル</Title>
<Paragraph>
こちらは段落です。
</Paragraph>
<Space>
<DatePicker />
<Button type="primary">ボタン</Button>
</Space>
</Typography>
</div>
);
}
export default App;
うまく読み込まれれば、以下のような画面に切り替わると思います。
まとめ
非常に簡単でしたね。
他にも様々なコンポーネントが用意されているので、
いろいろ試してみるのも良いかと思います。
次回は、Ant Designを使ってお問合せフォームを実装していきたいと思います。
次の記事はこちら↓
参考