とりあえず 3分で「Hello Docz」を表示できる環境を作る
Docz はdocz
という名前でインストールできます。またこれはテーマと一緒にインストールする必要があります。何か他に使いたいテーマがない限りdocz-theme-default
を使います。
yarn add -D docz docz-theme-default
Docz の設定ファイルはdoczrc.js
に書きます。とりあえず「Hello]するぐらいなら設定したほうがいい項目はtitle
ぐらいですね。
module.exports = {
title: 'サイトのタイトル',
};
ページとなるファイルはプロジェクト以下の**/*.mdx
ファイルになります。.mdx
ファイルというのをあまり聞いたことがない人もいると思いますが、これはマークダウンの中で JSX を使えるようにしたもの、かつ JSX が動くのでちょっとしたスクリプトも書けるものです。地味に Prettier は既に対応済だったり最近良く使われます。
さて、.mdx
ファイルですがとりあえずindex.mdx
として作りましょう。 Docz の .mdx
は更に頭にフロントマターを書いてそのファイル固有の設定を記述します。フロントマターというのはファイルの頭に Yaml 形式で色々定義できるやつです。
とりあえずこんな感じで作りましょう。
---
name: Foo
path: /items/foo
---
import {Playground} from 'docz';
# Foo
<Playground>
{() => <div>Hello docz!</div>}
</Playground>
そしてyarn docz dev
とするとポート3000
でページが開けてページが見れるはずです。
docz
からインポートしているPlayground
というコンポーネントは、その中に記述したコードをリアルタイム反映で確認できるようにしてくれたりレスポンシブ確認をしやすくしてくれる色々便利にしてくれるコンポーネントです。