Začínáme s nástrojem Remix Framework

Ano, toto je další JS rámec, ale jen se držte trochu déle, protože tento rámec je vyroben společností Michael Jackson a Ryan Florence chytráci, kteří stojí za Směrovač React. Doufám, že to upoutalo vaši pozornost, takže se podívejme, co je na tomto produktu dobrého. Remixový rámec.

Technické podrobnosti

Remix je framework na straně serveru postavený na platformě Web Fetch API a Směrovač React, každá trasa v remixu má tři základní exporty a nakladač, a akce a výchozí součást vývoz. Na stránkách nakladač bude na serveru před vykreslením zavolána funkce, která poskytne data do trasy. akce je zodpovědná za mutaci dat, je výchozím exportem komponenta, která bude na této trase vykreslena. Na adrese nakladač a akce funkce jsou spouštěny pouze na straně serveru a musí vracet hodnotu Reakce objektu, objekt výchozí export probíhá na straně serveru i klienta.

Začínáme

Inicializace nové aplikace Remix projekt:

npx create-remix@latest

DŮLEŽITÉ: Po výzvě zvolte "Jen základy" a poté "Remix App Server".

cd [jak jste projekt pojmenovali]
npm run dev
```

Otevřít http://localhost:3000. create-remix příkazem získáte startovací šablonu s následující strukturou:

• Na stránkách aplikace složka bude obsahovat všechny trasy vaší aplikace a kód.
• Na stránkách app/entry.client.jsx je první část kódu, která se spouští v prohlížeči a slouží k tomu, aby se hydrát na React komponenty.
• Na stránkách app/entry.server.jsx je první část kódu, která se spustí, když na server dorazí požadavek, tento soubor vykreslí naši aplikaci React do řetězce/proudu a odešle ji jako odpověď klientovi.
• Na stránkách app/root.jsx je místo, kde se nachází kořenová složka.
• Na stránkách app/routes/ je místo, kam se přesunou všechny moduly směrování, remix používá směrování založené na souborovém systému.
• Na stránkách veřejné je složka, do které se ukládají statické soubory (obrázky, písma atd.).
• Na stránkách remix.config.js je místo, kde lze nastavit konfiguraci remixu.

Méně řečí, ukažte mi kód

Zkontrolujme login.jsx příklad trasy uvnitř aplikace Remix:

import { redirect, json, Form, useActionData, useTransition } from 'remix';
import { isLoggedIn, verifyLogin } from '../auth';

export const loader = async ({ request }) => {
if (await isLoggedIn(request)) {
return redirect('/dashboard');
}

return json({ success: true });
};

export const action = async ({ request }) => {
const formData = await request.formData();
const values = {
email: formData.get('email') ?? '',
password: formData.get('password') ?? '',
};

const errors = await verifyLogin(values);
if (errors) {
return json({ errors }, { status: 400 });
}

return redirect('/dashboard');
};

export default function LoginRoute() {
const actionData = useActionData();
const transition = useTransition();
const isSubmitting = transition.state === 'submitting';

return (

Email

{actionData?.errors?.email &&
{actionData.errors.email}
}

  <div>
    <label htmlFor="password">Password</label>
    <input id="password" name="password" type="password" />
    {actionData?.errors?.password && (
      <div>{actionData.errors.password}</div>
    )}
  </div>

  <div>
    <button type="submit" disabled={isSubmitting}>
      {`Login ${isSubmitting ? '...' : ''}`}
    </button>
  </div>
</Form>

);
}
```

První věcí, která se zde děje, je nakladač funkce kontrolující, zda je uživatel již přihlášen pomocí příkazu isLoggedIn a bude přesměrování ho do /dashboard trasu, pokud ne, vrátí jednoduše { success: true } a poté se zobrazí přihlašovací stránka.

Na stránkách LoginRoute vykreslí formulář se vstupy pro zadání e-mailu a hesla a tlačítkem odeslat, jak vidíte, nejsou zde žádné vstupy pro zadání hesla. stát proměnné ani onSubmit v naší komponentě, je to proto, že v remixu může každá trasa exportovat akce a když je formulář odeslán s POST bude zavolána metoda action, která tuto událost zpracuje.

Po odeslání formuláře se akce získá funkci
FormData z Žádost objekt const formData = await request.formData(), pak jsme konstruovat hodnoty s vlastnostmi e-mailu a hesla, objekt formData.get('email') bude hledat první odpovídající pole uvnitř našeho formuláře se znakem name="email" a vrátit jeho hodnotu. Kontrolujeme, zda jsou pověření správná pomocí verifyLogin zde můžete použít libovolnou oblíbenou knihovnu pro validaci JS schémat a provést funkci načíst do vlastního backendu, abyste zkontrolovali, zda jsou přihlašovací údaje správné, a pokud ano. přesměrování uživatele do /dashboard jinak vrátíme trasu json odpověď s objektem errors a Stavový kód HTTP 400... useActionData háček vrátí tento objekt chyby, pokud nějaká existuje, a my podmíněně vykreslíme chybovou zprávu jako v případě {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

Na stránkách useTransition háček říká nás vše o stavu přechodu stránky, přičemž isSubmitting proměnné kontrolujeme, kdy dochází k podání, pokud k němu dojde. zakázat tlačítko odeslat a zobrazit Login.... místo Přihlášení, mohli bychom také místo toho uživateli zobrazit načítací kolečko nebo jiný údaj.

Na stránkách json je pouze zkratkou pro vytvoření application/json objekty odezvy. Na adrese useLoaderData háček vrací data z trasy v parsované podobě JSON. nakladač... useActionData vrací trasu akce analyzovaná data.

SEO Friendly

Každá trasa může také exportovat meta funkce odpovědná za nastavení meta tagů pro váš Html dokument, tímto způsobem můžete nastavit název a popis pro každou trasu a přidejte libovolné metaznačky Open Graph nebo jiné metaznačky.

export const meta = () => {
const title = 'Moje úžasná stránka';
const description = 'Super úžasná stránka';

return {
charset: 'utf-8',
title,
description,
keywords: 'Remix,Awesome',
'twitter:image': 'https://awesome-page.com/awesome.png',
'twitter:card': 'summarylargeimage',
"twitter:creator": "@awesome",
'twitter:site': '@awesome',
'twitter:title': název,
'twitter:description': description,
};
};

export výchozí funkce AwesomeRoute() {
return

Awesome Route

;
}
```

Užitečné odkazy

Zatím jsme se zabývali jen špičkou ledovce o Remixu, je toho mnohem víc, co je třeba vědět, zde je několik užitečných odkazů:

• Dokumentace
• Github
• Složka Příklady
• Seznam skladeb na YouTube
• Server Discord

Souhrn

Skvělé na Remixu je, že když se s ním zlepšíte, zlepšíte se i v základech webu, jak jste viděli, mnoho odkazů v tomto článku směřuje na. Dokumenty Mozilla, to je to, co je myšleno tím, že Remix je zaměřen na základy webu, používá webové rozhraní API, jako je objekt Response a Request, aby uživatelům poskytl skvělé UX, a navíc můžete stále používat všechny své obvyklé techniky a oblíbené knihovny React.

V tomto článku jsme nemluvili o všech skvělých funkcích, které Remix nabízí, jako např. Vnořené trasy, Hranice chyb, Remix Stacks ale i tak by vám tento článek měl poskytnout dobrou představu o filozofii Remixu.