Remix Web Practical Guide dengan Claude Code

Remixpengembangan dengan Claude Code: 加速

Remix Web標準 忠実なfull-stackframework 、ローダー dan アクション よるデータフロー fitur.Claude Code 使えば、Remix 規約 沿ったコード 効率よくgenerate bisa dilakukan.

設計 ルートとローダー

データpengambilanpola

> ブログartikel daftarhalaman dan 詳細halaman Remix dengan pembuatanして。
> ローダー dengan データpengambilan、errorバウンダリ konfigurasi juga.

// app/routes/blog._index.tsx
import { json } from '@remix-run/node';
import type { LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { getPosts } from '~/models/post.server';

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const page = Number(url.searchParams.get('page') || '1');
  const posts = await getPosts({ page, limit: 10 });
  return json({ posts, page });
}

export default function BlogIndex() {
  const { posts, page } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>ブログ記事一覧</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2><a href={`/blog/${post.slug}`}>{post.title}</a></h2>
          <p>{post.description}</p>
        </article>
      ))}
    </div>
  );
}

export function ErrorBoundary() {
  return <div>記事の読み込みに失敗しました。</div>;
}

アクションによるformpemrosesan

プログレッシブエンハンスメント

> コメント投稿form Remix アクション dengan implementasiして。
> validasi付き、JS無効 dengan juga 動作するよう 。

// app/routes/blog.$slug.tsx
import { json, redirect } from '@remix-run/node';
import type { ActionFunctionArgs } from '@remix-run/node';
import { Form, useActionData } from '@remix-run/react';
import { z } from 'zod';

const commentSchema = z.object({
  name: z.string().min(1, '名前 必須 す'),
  body: z.string().min(5, 'コメント 5文字以上 input ください'),
});

export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const result = commentSchema.safeParse(Object.fromEntries(formData));

  if (!result.success) {
    return json({ errors: result.error.flatten().fieldErrors }, { status: 400 });
  }

  await createComment({ slug: params.slug!, ...result.data });
  return redirect(`/blog/${params.slug}`);
}

export default function BlogPost() {
  const actionData = useActionData<typeof action>();

  return (
    <Form method="post">
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" name="name" type="text" />
        {actionData?.errors?.name && <p>{actionData.errors.name}</p>}
      </div>
      <div>
        <label htmlFor="body">コメント</label>
        <textarea id="body" name="body" />
        {actionData?.errors?.body && <p>{actionData.errors.body}</p>}
      </div>
      <button type="submit">Submit</button>
    </Form>
  );
}

ネスティドrouting

Remix ネスティドrouting 使う dan 、layout berbagiやデータ 並列pengambilan 自然 実現 bisa dilakukan.Claude Code ルートstruktur 相談すれば、最適なfilepenempatan 提案 くれ.

> manajemen画面 ルートstruktur 設計して。
> sidebarlayoutberbagi、dashboard/penggunamanajemen/pengaturan 3セクション。

sessionmanajemenと認証

Remix sessionAPI 使った認証implementasi juga Claude Code 任せられ.Cookie sessionstorage pengaturan dari 、保護ルート middleware的polaま 一貫 generate bisa dilakukan.

Summary

Dengan Claude Code, Remix Web標準 沿ったデータフロー設計やformpemrosesan 素早くimplementasi bisa dilakukan.Reactpengembanganpanduanや認証implementasi juga 合わせて参考 .

Untuk Remixの詳細, lihat Remix公式ドキュメント.