2023/3/2 Remix tutorial
$ npx create-remix@latest --template remix-run/indie-stack blog-tutorial
これで入れただけでめちゃくちゃ色んなものが入っている
gitpod, dockerfile, fly.io, vitest, tailwind, cypress, ...
あー、このtutorialは、ほぼほぼ出来上がったものを触らせる感じなのか
ページとかも諸々完成されてる
Next.jsと同じ感じで、filesystem balse routingになってる
app/route/の下がそれ
これが型エラーになる
code:ts
export default function Posts() {
const { posts } = useLoaderData<typeof loader>();
console.log(posts);
return (
<main>
<h1>Posts</h1>
</main>
);
}
多分普通にバグ
ちゃうわ、import先が違った
react-routerじゃなくて、@remix-run/reactか
$ npx prisma db push
You'll get the ability to name the migration name, ideally you can refer back to what the changes you made are, so I'd suggest create-post-model for the name.
create-post-modelってなんやねんmrsekut.icon
ググっても出てこんねん
これなんでDocker動かしてないのに、npx prisma migrate dev動いてるの？
prisma適用後は、remixを再起動しないといけない
code:ts
export const loader = async ({ params }: LoaderArgs) => {
invariant(params.slug, "slug is required");
const post = await getPost(params.slug);
invariant(post, Post not found: ${params.slug});
return json({ post });
};
$ npm add @types/marked
addとかあるんやmrsekut.icon
remixをいちいちrestartしないといけないのめんどいな
to=に/を付けないとnestingになるらしい
code:app/routes/posts/inedx.tsx
<Link to="admin" className="text-red-600 underline">
Admin
</Link>
こうすると、/post/adminに飛ぶ
dirを入れ子にして、ページの一部のみ変えるやつ
常に<Outlet />って名前で子を呼び出す
tailwindだと、styleの使いまわしを変数で書ける
code:ts
const inputClassName = w-full rounded border border-gray-500 px-2 py-1 text-lg;
<Form />をremix自体が提供している
web標準に則っている
actionという関数でpostできる
この関数の中でvalidationする
つまり、server側でvalidationしてる
code:ts
export const action = async ({ request }: ActionArgs) => {
const formData = await request.formData();
const title = formData.get("title");
const slug = formData.get("slug");
const markdown = formData.get("markdown");
await createPost({ title, slug, markdown });
return redirect("/posts/admin");
};
これまでのコードはJSがなくても機能する