34
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

React + TypeScript で Ant Designを簡単に試してみる

Last updated at Posted at 2022-10-11

はじめに

本記事は、
「フロントエンドの開発効率を向上するヒントを教え合おう!」イベントの参加記事です。

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

image.png

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;

うまく読み込まれれば、以下のような画面に切り替わると思います。

image.png

まとめ

非常に簡単でしたね。
他にも様々なコンポーネントが用意されているので、
いろいろ試してみるのも良いかと思います。

次回は、Ant Designを使ってお問合せフォームを実装していきたいと思います。

次の記事はこちら↓

参考

34
36
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?