Remix

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

Fișierul de intrare

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

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

Rutele suplimentare urmează convențiile de sistem de fișiere ale Remix (app/routes/about.jsx, app/routes/posts.$slug.jsx etc.).

Versiune

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

Limbi suportate

Javascript

Framework de testare

Vitest

Memento-uri 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 fișierele 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() și useActionData() în componenta ta pentru a citi acele valori.
• Testul predefinit importă direct componenta de rută și o redează cu @testing-library/react. Pentru rutele care folosesc useLoaderData, de obicei le vei testa printr-un helper compatibil cu routerul sau prin extragerea logicii componentei într-o funcție simplă.

Exemplu cu React Testing Library:

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

• @remix-run/node
• @remix-run/react
• @remix-run/serve
• @remix-run/dev
• react
• react-dom
• isbot
• vite
• @testing-library/jest-dom
• @testing-library/react
• @testing-library/user-event
• @vitejs/plugin-react
• jsdom
• vitest

Cum să depanezi

Depanarea Remix este similară cu depanarea React. Folosește console.log() în interiorul componentelor, loader-elor sau acțiunilor pentru a inspecta valorile în timpul rulării. Jurnalele din funcțiile loader și action apar în terminalul serverului (deoarece rulează pe Node), în timp ce jurnalele din interiorul corpului componentei apar în ambele locuri: pe server în timpul SSR și în browser după hidratare.

Pași pentru depanare folosind jurnalele consolei

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 din loader/action merg în terminal; jurnalele din handler-ele de evenimente merg în consola browserului.

3. Verifică rezultatele testelor tale (Results Output)

4. Folosește pictograma de depanare (Debug) din zona de previzualizare (Preview): Dă clic pe pictograma de depanare din zona de previzualizare pentru a verifica datele de ieșire din consolă, sau deschide consola browserului.

5. Analizează rezultatul: Compară jurnalele cu interfața grafică (UI) redată pentru a depista date incorecte din 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:

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

export async function loader() {
  const items = 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();
  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>
  );
}