React 開発日記。開発からデプロイまで。#8

Day#8 ~React x Mantine~

わんばんこ。みくのすけでおま。

前回まででReact x TypeScript with eslint , prretierを新規に環境構築しました。

今回はそこにReactにMantineを組み込んでいきます。

ゴール

React x TypeScript with eslint , prretier 環境構築 にMantineをインストール。

その後にMantineでボタンを表示。クリックでアラートを表示させる！

読み終わった時にわかること

React x TypeScript with eslint , prretierに新規追加でMantine環境構築の作り方がわかる

Mantineをインストール ~

一から環境設定するのはアレなので下記GitHubよりダウンロードしたzipファイルを解凍して使います。

ちなみに、Reactのver18がでたばかりなので（2022/7/5現在）安定化を図るためReactのバージョンは17.0.2にダウングレードしてあります。

GitHub

https://github.com/iwkt/react1702-TS

上記ファイルに公式ページに従ってインストールを進めていきます。

Mantine公式ページ

https://mantine.dev/getting-started/

Mantineのpackageを選択してコマンド実行

1. 公式ページから欲しいパッケージをチェックします
2. ライブラリを選択します。ここではCreate React Appを選択しました。NEXT.JSの学習がまだできていないためです。
3. 指示されたコマンドをコピーしてインストルールを開始します。

npm install dayjs @mantine/spotlight @mantine/rte @mantine/prism @mantine/notifications @mantine/modals @mantine/hooks @mantine/form @mantine/dropzone @mantine/dates @mantine/core

以上で終了です。

ボタンを表示させる

公式を読み進めるとボタンの表示コードが書いてあります。やってみましょう。

今回はsrcの中にcomponentsフォルダを作成しその中にHoge.tsxを作ってここにボタンコードを書いていきます。

// Hoge.tsx

import { Button } from '@mantine/core';

export const DemoButton = () => {
  const clickAlert = () => {
    alert('今日もいい日に決まっています！');
  };
  return <Button onClick={clickAlert}>Verdana button</Button>;
};

//App.tsx

import React from 'react';
import { DemoButton } from './components/Hoge';
import './App.css';

function App() {
  return (
    <div className="App">
      <DemoButton />
    </div>
  );
}

export default App;

はい、ボタンが表示されています。

ボタンを押すとアラートが表示されますね。これで確認できました。

inputを表示させる

これで終わりではちょっと寂しいのでもう一つcomponentを表示させることにします。

インプットです。

inputに関しては下記リンクに掲載があります。

https://mantine.dev/core/input/

この中でちょっとおしゃれにicon表示もさせてみましょう。

ボタンと同じファイルHogeに書いていきます。

// Hoge.tsx

import { Button, Input, Badge } from '@mantine/core';
import { BrandTwitter } from 'tabler-icons-react';

export const DemoButton = () => {
  const clickAlert = () => {
    alert('今日もいい日に決まっています！');
  };
  return (
    <>
      <Input
        icon={<BrandTwitter size={16} />}
        placeholder="Your twitter"
        rightSectionWidth={70}
        styles={{ rightSection: { pointerEvents: 'none' } }}
        rightSection={
          <Badge color="blue" variant="filled">
            new
          </Badge>
        }
      />
      <Button onClick={clickAlert}>Verdana button</Button>
    </>
  );
};

まんまコピペすると4行目の

import { BrandTwitter } from 'tabler-icons-react';

‘tabler-icons-react’ そんなものはありませんぞと叱られる。

で、いろいろググったところ npm でtabler-icons-react をインストールしなければならない様だ。

https://www.npmjs.com/package/tabler-icons-react

npm install tabler-icons-react

これでことなきを得ました。

さあ、どの様な出来栄えか確認してみましょう。

入力ボックスにはTwitterアイコンと文字入力したmiku-nosuke love が表示されていますね。

まとめ

ReactにMantinenをインストールしました。ボタンやインプットを表示させることに成功です。

また、ボタンを押すとアラート表示される様にできました。

ここまでで、なんとなくMantineというものがわかりました。アイコンやinputなどちまちまとcssで書いてらんねーぞってのが正直な感想です。とっても便利ですねマンちゃん。

次回

なんとなく便利だというのがわかったMantine。

でもね、

インプットボックスとボタン縦並びっておかしくね。

インプットボックスも全幅占めてるよな、おかしくね。

ということでこの辺をゴニョゴニョしてみます。禁断のTailwindとの併用⁉︎

せっかくTailwindやったんだもん、使いますよ！