Pierwsze kroki z Remix Framework

Tak, to kolejny JS frameworka, ale wystarczy trzymać się go nieco dłużej, ponieważ ten framework jest tworzony przez Michael Jackson i Ryan Florence spryciarze stojący za Router React. Mam nadzieję, że to przyciągnęło twoją uwagę, więc zobaczmy, co jest dobrego w Remix framework.

Szczegóły techniczne

Remix jest frameworkiem po stronie serwera zbudowanym na bazie Web Fetch API i Router ReactKażda trasa w remiksie ma trzy podstawowe eksporty a ładowarkai działanie i domyślny składnik eksport. The ładowarka zostanie wywołana na serwerze przed renderowaniem w celu dostarczenia danych do trasy, funkcja działanie jest odpowiedzialna za mutację danych, domyślnym eksportem jest komponent, który będzie renderowany na tej trasie. Funkcja ładowarka i działanie są uruchamiane tylko po stronie serwera i muszą zwracać wartość Odpowiedź obiekt domyślny Eksport jest uruchamiany zarówno po stronie serwera, jak i klienta.

Pierwsze kroki

Aby zainicjować nowy Remix projekt:

npx create-remix@latest

WAŻNE: Po wyświetleniu monitu wybierz "Tylko podstawy", a następnie "Remix App Server".

cd [jakkolwiek nazwałeś projekt]
npm run dev
```

Otwórz http://localhost:3000. create-remix otrzymasz szablon startowy o następującej strukturze:

• The aplikacja folder będzie zawierał wszystkie trasy aplikacji i kod.
• The app/entry.client.jsx jest pierwszym fragmentem kodu, który jest uruchamiany w przeglądarce i służy do hydrat komponenty React.
• The app/entry.server.jsx to pierwszy fragment kodu, który jest uruchamiany, gdy żądanie trafia na serwer, ten plik renderuje naszą aplikację React na ciąg / strumień i wysyła go jako naszą odpowiedź do klienta.
• The app/root.jsx to miejsce, do którego trafia komponent główny.
• The app/routes/ to miejsce, do którego trafią wszystkie moduły tras, remix używa routingu opartego na systemie plików.
• The publiczny to folder, w którym znajdują się zasoby statyczne (obrazy/czcionki/etc).
• The remix.config.js to miejsce, w którym można ustawić konfigurację remiksu.

Mniej gadania, pokaż mi kod

Sprawdźmy login.jsx przykład trasy wewnątrz aplikacji 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>

);
}
```

Pierwszą rzeczą, która się tutaj dzieje, jest ładowarka funkcja sprawdzająca, czy użytkownik jest już zalogowany przy użyciu atrybutu isLoggedIn funkcja i będzie przekierowanie go do /dashboard trasa, jeśli nie, po prostu zwróci { success: true } następnie renderowana jest strona logowania.

The LoginRoute renderuje formularz z danymi wejściowymi e-mail i hasła oraz przyciskiem przesyłania, jak widać, nie ma stan zmienne ani onSubmit w naszym komponencie, dzieje się tak dlatego, że w remiksie każda trasa może eksportować atrybut działanie i gdy formularz jest przesyłany z POST zostanie wywołana akcja, która obsłuży to zdarzenie.

Gdy formularz zostanie przesłany działanie funkcja uzyska wartość
FormData z Prośba obiekt const formData = await request.formData()wtedy konstruujemy wartości z adresem e-mail i hasłem, obiekt formData.get('email') będzie szukać pierwszego pasującego pola w naszym formularzu z rozszerzeniem name="email" i zwrócić jego wartość. Sprawdzamy, czy dane uwierzytelniające są poprawne za pomocą funkcji verifyLogin można użyć dowolnej ulubionej biblioteki walidacji schematów JS i wykonać funkcję pobieranie do niestandardowego backendu, aby sprawdzić, czy dane logowania są poprawne, jeśli tak, to przekierowanie użytkownika do /dashboard trasa, w przeciwnym razie zwracamy json odpowiedź z obiektem błędów i Kod statusu HTTP 400w useActionData hak zwróci ten obiekt błędów, jeśli taki istnieje, a my warunkowo wyrenderujemy komunikat o błędzie, jak poniżej {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

The useTransition hook mówi nam wszystko o stanie przejścia strony, przy czym isSubmitting zmienna sprawdzamy, kiedy ma miejsce zgłoszenie, jeśli takie istnieje, będziemy wyłączenie przycisk przesyłania i pokaż Login.... zamiast LogowanieZamiast tego możemy również wyświetlić użytkownikowi spinner ładowania lub inne wskazanie.

The json jest tylko skrótem do tworzenia application/json obiekty odpowiedzi. The useLoaderData hook zwraca przeanalizowane dane JSON z trasy ładowarkaw useActionData zwraca trasę działanie przeanalizowane dane.

Przyjazny dla SEO

Każda trasa może również eksportować meta funkcja odpowiedzialna za ustawienie metatagów dla dokumentu Html, w ten sposób można ustawić znacznik tytuł oraz opis dla każdej trasy i dodać dowolne metatagi Open Graph lub inne.

export const meta = () => {
const title = 'Moja niesamowita strona';
const description = 'Super niesamowita strona';

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': tytuł,
'twitter:description': description,
};
};

export default function AwesomeRoute() {
return

Awesome Route

;
}
```

Przydatne linki

Dotarliśmy tylko do wierzchołka góry lodowej na temat Remix, jest o wiele więcej do poznania, oto kilka przydatnych linków:

• Dokumentacja
• Github
• Folder z przykładami
• Lista odtwarzania YouTube
• Serwer Discord

Podsumowanie

Wspaniałe w Remixie jest to, że stając się lepszym z nim, będziesz lepszy w podstawach sieci, jak zauważyłeś wiele linków do tego artykułu wskazuje na Dokumenty MozilliTo właśnie oznacza, że Remix koncentruje się na podstawach sieciowych, wykorzystuje interfejsy API sieci Web, takie jak obiekt Response i Request, aby zapewnić użytkownikom świetny UX, a ponadto nadal możesz korzystać ze wszystkich swoich zwykłych technik i ulubionych bibliotek React.

W tym artykule nie omówiliśmy wszystkich wspaniałych funkcji oferowanych przez Remix, takich jak Zagnieżdżone trasy, Granice błędu, Remix Stacks Niemniej jednak ten artykuł powinien dać ci dobre wyobrażenie o filozofii stojącej za Remix.