Remix＠フレームワーク¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. Remixとは¶
Reactパッケージを使用したフレームワークである。
02. ディレクトリ構成¶
.
├── app/
│ ├── components/ # ユーザー定義のRemixコンポーネント
│ │
│ ├── models/ # モデルのCRUD処理
│ │
│ ├── routes/ # ルーティングとレンダリングの処理
│ │
│ ├── utils/ # 汎用的な関数
│ │
│ ├── entry.client.tsx
│ ├── entry.server.tsx
│ └── root.tsx
│
├── prisma/ # モデルの定義
...
03. 初期化¶
loader¶
▼ loaderとは¶
サーバーサイドレンダリング時に使用できる。
DBにクエリを送信し、データを取得できる。
＊実装例＊
import {json} from "@remix-run/node";
import {useLoaderData} from "@remix-run/react";
export const loader = async () => {
return json({
posts: [
{
slug: "my-first-post",
title: "My First Post",
},
{
slug: "90s-mixtape",
title: "A Mixtape I Made Just For You",
},
],
});
};
▼ useLoaderData¶
loader関数で取得したデータを出力できる。
＊実装例＊
import {json} from "@remix-run/node";
import {useLoaderData} from "@remix-run/react";
export const loader = async () => {
return json({
posts: [
{
slug: "my-first-post",
title: "My First Post",
},
{
slug: "90s-mixtape",
title: "A Mixtape I Made Just For You",
},
],
});
};
export default function Posts() {
const {posts} = useLoaderData<typeof loader>();
return (
<main>
<h1>Posts</h1>
</main>
);
}
04. ルーティング¶
URLとのマッピング¶
▼ 仕組み¶
ドット区切りファイル名またはディレクトリ名がURLになる。
▼ <ルート以降のパス>._index.tsx¶
ルート以降のパスを設定する。
＊実装例＊
// <ルート以降のパス>._index.tsx
export default function Foo() {
// 返却するHTML要素
return (
<main>
<h1>Foo</h1>
</main>
);
}
▼ <ルート以降のパス>.<変数>.tsx¶
動的にURLを決定する。
URLに規則性があるようなページに適する。
＊実装例＊
// posts.$postId.tsxファイル
export default function Post() {
return (
<div>
<h1 className="font-bold text-3xl">投稿詳細</h1>
</div>
);
}
以下のURLでページをレンダリングできる。
- /posts/1
- /posts/2
- /posts/3
05. コンポーネント¶
Form¶
formタグをレンダリングする。
。
import {Form} from "@remix-run/react";
function NewEvent() {
return (
<Form action="/events" method="post">
<input name="title" type="text" />
<input name="description" type="text" />
</Form>
);
}
Meta¶
Webページのmetaタグ (Webサイト名、説明など) をレンダリングする。
import {Meta} from "@remix-run/react";
export default function Root() {
return (
<html>
<head>
<Meta />
</head>
<body></body>
</html>
);
}
Outlet¶
親ページ内に子ページをレンダリングする。
import {Outlet} from "@remix-run/react";
export default function SomeParent() {
return (
<div>
<h1>Parent Content</h1>
<Outlet />
</div>
);
}