前回記事で作ったプログラムなのですがデザインもくそもありません。 masalib.hatenablog.com
reactのデザイン部分を共有できるサイトのbit.devを利用して
少し変えたいと思います
bit.devとは
コンポーネントレベルでの共有サイトです。githubの細かい版みたいなイメージ。 githubみたいに公開と非公開のコンポーネントを作成できます。テストのCIもあるので共有しやすいらしいのですが 私は公開してあるものを利用しているだけです。非公開レベルになるならお金がかかるみたい
詳しく知りたい人は
事前作業
bit.devを使うにはプロジェクトに対して事前作業が必要です。非公開の場合はたぶんもっと必要。 アカウントについてはgithubのアカウントを流用できます。
$ npm install bit-bin -g
グローバルインストールです。インストールができたらbitコマンドが通るのか確認します
$ bit
コマンドが通ったらプロジェクトフォルダで初期設定をします
$ bit init
コマンドが完了すると
componentsというフォルダと.bitmapというファイルができます
追加するコンポーネントを探す
bitにアクセスして追加したいアニメーションやデザインを探す （ライセンスに注意）
Labelsのところをreactにする （自分はアニメーションを追加したかったのでアニメーションにもチェックしています）
コンポーネントをプロジェクトに追加する
追加するコンポーネントが決まったら選択する
①npm と yarn と bitのタブが表示されるので bitの部分を選択する
npm やyarnだと私の環境ではインストールできませんでした。
②コマンドをコピーする
コピーのボタンを押せばクリップボードにコピーされます
③プロジェクトフォルダに移動してインストールする
$ bit import mhnpd.react-loader-spinner/tail-spin
④sourceにコンポーネントを追加する
import * as React from 'react';
import {gql, useQuery} from '@apollo/client';
+ import {TailSpin} from '@bit/mhnpd.react-loader-spinner.tail-spin';
// 発行する GraphQL クエリ
const GET_ISSUES = gql`
query {
search(query: "repo:apollographql/apollo is:issue", type: ISSUE, first: 5) {
issueCount
nodes {
... on Issue { number title }
}
}
}
`;
export const Issues: React.FC = () => {
// GraphQL のクエリを実行
const {loading, error, data} = useQuery(GET_ISSUES);
// クエリ実行中の表示
+ if (loading) return <TailSpin
+ color={"black"}
+ height={150}
+ width={150}
+ />;
- if (loading) return <p>Loading ...</p>;
// エラー発生時（レスポンスがないとき）の表示
if (error) return <p style={{color: 'red'}}>{error.message}</p>;
// クエリの結果が返ってきたときの表示
const {issueCount, nodes: issues} = data.search;
return <>
<h2>Num of issues: {issueCount}</h2>
<ul>
{ issues.map(i => <li key={i.number}>{i.number} - {i.title}</li>) }
</ul>
</>;
};
サンプルソースもあるので追加は簡単なのですが、インストールに関係ないツールとかも記載されているので注意が必要
これでローディングアニメーションが追加できました。 簡単な部分しかやっていないのですが、今後もbit.devサービスを利用して開発効率をあげたいです。
