Română

English

Română

English

Aspect

Remix (TypeScript) ​

Ar trebui să creezi componente de rută sub app/routes/ ca puncte de intrare ale aplicației tale Remix. Codul tău Remix ar trebui să fie verificat folosind ESLint cu configurația recomandată pentru React și TypeScript.

Fișier de intrare ​

Fișierele soluției pentru acest șablon sunt:

  • app/root.tsx — layout-ul rădăcină care îmbracă fiecare rută. Acesta include <Meta />, <Links />, <Outlet />, <ScrollRestoration /> și <Scripts /> din @remix-run/react.
  • app/routes/_index.tsx — componenta rutei index redată la /.
  • vite.config.js — configurația Vite care conectează pluginul @remix-run/dev (preîncărcat, doar pentru citire).

Rutele suplimentare respectă convențiile de filesystem ale Remix (app/routes/about.tsx, app/routes/posts.$slug.tsx etc.).

Versiune ​

Rulează pe Node.js v22.0.0 cu React 18.

Limbi suportate ​

TypeScript

Framework de testare ​

Vitest

Mementouri speciale și detalii de implementare ​

  • Componenta rădăcină trebuie să redeze <Outlet /> — acolo se montează rutele copil. De asemenea, trebuie să includă <Links /> și <Scripts /> pentru ca CSS și JS să se încarce.
  • Încărcarea datelor se află în exporturile loader (pe partea de server), iar mutațiile se află în exporturile action. Folosește useLoaderData<typeof loader>() și useActionData<typeof action>() pentru a citi aceste valori cu inferență completă.
  • Folosește tipurile helper din @remix-run/node (LoaderFunctionArgs, ActionFunctionArgs, MetaFunction) pentru a tipiza exporturile rutelor tale.

Exemplu cu React Testing Library: ​

tsx
import { render, screen } from '@testing-library/react';
import Index from './app/routes/_index';

describe('Index route', () => {
  test("renders 'Hello, World!'", () => {
    render(<Index />);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });
});

Biblioteci incluse ​

Cum să depanezi ​

Depanarea Remix cu TypeScript este similară cu depanarea React/TypeScript. Folosește console.log() în interiorul componentelor, al funcțiilor loader sau action pentru a inspecta valorile la rulare. Jurnalele (logs) de la funcțiile loader și action apar în terminalul serverului (ele rulează pe Node), în timp ce jurnalele din corpul componentei apar în ambele locuri: pe server în timpul SSR și în browser după hidratare.

Pași pentru depanare folosind Console Logs ​

  1. Identifică zona cu probleme: Decide dacă problema se află în componenta rutei, în loader (preluarea datelor) sau în action (mutații).

  2. Introdu instrucțiuni console.log(): Adaugă apeluri de jurnalizare înainte și după codul suspect. Jurnalele de loader/action merg în terminal; jurnalele de event-handler merg în consola browserului.

  3. Verifică rezultatele afișate de testele tale

  4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare din zona Preview pentru a verifica consola sau deschide consola browserului tău.

  5. Analizează rezultatul: Compară jurnalele cu interfața grafică redată pentru a identifica date incorecte de la loader, mutații eșuate sau re-renderizări neașteptate.

Iată un exemplu despre cum să folosești console.log() pentru depanare într-o rută Remix cu TypeScript:

tsx
import { useLoaderData } from '@remix-run/react';

interface Item {
  id: string;
  name: string;
}

export async function loader(): Promise<{ items: Item[] }> {
  const items: Item[] = await fetch('https://example.com/api/items').then((response) => response.json());
  console.log('Loader fetched items:', items); // logs in the terminal
  return { items };
}

export default function Index() {
  const { items } = useLoaderData<typeof loader>();
  console.log('Component received items:', items); // server log on SSR, browser log on hydration

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}