Claude Code के साथ Remix Web Practical Guide

Remix Development को Claude Code के साथ तेज़ करें

Remix एक full-stack framework है जो web standards के प्रति loyal है, और loaders तथा actions के माध्यम से data flow इसकी विशेषता है। Claude Code का उपयोग करके, Remix के conventions के अनुसार code efficiently generate किया जा सकता है।

Routes और Loaders का Design

Data Fetch Pattern

> Blog posts का listing page और detail page Remix के साथ बनाओ।
> Loader से data fetch करो और error boundary भी configure करो।

// 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>Blog Posts List</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>Posts load करने में fail हो गए।</div>;
}

Actions के साथ Form Processing

Progressive Enhancement

> Comment submission form को Remix actions के साथ implement करो।
> Validation के साथ, JS disabled होने पर भी काम करना चाहिए।

// 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, 'Name required है'),
  body: z.string().min(5, 'Comment कम से कम 5 characters का होना चाहिए'),
});

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">Comment</label>
        <textarea id="body" name="body" />
        {actionData?.errors?.body && <p>{actionData.errors.body}</p>}
      </div>
      <button type="submit">Submit</button>
    </Form>
  );
}

Nested Routing

Remix के nested routing का उपयोग करने पर, layouts का sharing और data का parallel fetching naturally achieve हो जाता है। Route structure के बारे में Claude Code से consult करने पर, वह optimal file placement suggest करता है।

> Admin panel का route structure design करो।
> Sidebar layout shared, तीन sections: dashboard, user management, settings।

Session Management और Authentication

Remix की session API का उपयोग करके authentication implementation भी Claude Code को सौंपा जा सकता है। Cookie session storage configuration से लेकर protected routes के middleware-style patterns तक, सब consistently generate किया जा सकता है।

Summary

Claude Code का उपयोग करके, Remix के web standards के अनुसार data flow design और form processing को जल्दी implement किया जा सकता है। React development guide और authentication implementation को भी reference के लिए देखें।

Remix के details के लिए Remix की official documentation देखें।