Kom i gang med Remix Framework

Ja, dette er enda en JS rammeverk, men bare hold deg litt lenger ettersom dette rammeverket er laget av Michael Jackson og Ryan Florence de smarte gutta bak React Ruter. Håper det fikk oppmerksomheten din, så la oss se hva som er bra med Rammeverk for remiksering.

Tekniske detaljer

Remix er et serverside-rammeverk bygget på toppen av Web Fetch API og React Ruterhar hver rute i remix tre primære eksportvarer a laster, en handling og en standard komponent eksport. De laster funksjonen vil bli kalt på serveren før rendering for å levere data til ruten, vil handling er ansvarlig for datamutasjon, er standard eksport den komponenten som vil bli gjengitt på den ruten. Den laster og handling funksjoner kjøres kun på serversiden og må returnere en Svar objektet standard eksport kjøres både på server- og klientsiden.

Kom godt i gang

Slik initialiserer du en ny Remix prosjekt:

npx create-remix@latest

VIKTIG: Velg "Just the basics", og deretter "Remix App Server" når du blir bedt om det

cd [hva enn du har kalt prosjektet]
npm run dev
```

Åpne opp http://localhost:3000. den opprette-remiks kommandoen får du en startmal med følgende struktur:

• Den app mappen vil inneholde alle applikasjonsrutene dine og kode.
• Den app/entry.client.jsx er den første koden som kjøres i nettleseren og brukes til å hydrat React-komponentene.
• Den app/entry.server.jsx er den første koden som kjøres når en forespørsel kommer til serveren. Denne filen gjør om React-appen vår til en streng/strøm og sender den som svar til klienten.
• Den app/root.jsx er hvor rotkomponenten skal plasseres.
• Den app/ruter/ er der alle rutemodulene dine skal gå, bruker remix en filsystembasert ruting.
• Den offentlig mappen er der de statiske ressursene dine plasseres (bilder/skrifttyper/etc.).
• Den remix.config.js er der remix-konfigurasjonen kan stilles inn.

Mindre snakk, vis meg koden

La oss sjekke en login.jsx ruteeksempel inne i en Remix-app:

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>

);
}
```

Det første som skjer her er laster funksjon som sjekker om brukeren allerede er logget inn med isLoggedIn funksjon og vil omdirigere ham til /dashboard rute, hvis ikke vil den ganske enkelt returnere en { suksess: true } svar, blir påloggingssiden gjengitt.

Den LoginRoute gjengir et skjema med e-post og passord og en innsendingsknapp, og som du kan se, er det ingen stat variabler eller en onSubmit hendelsesbehandler i komponenten vår, er det fordi hver rute i remix kan eksportere en handling og når et skjema sendes inn med en POST metoden vil handlingen bli kalt og vil håndtere den hendelsen.

Når skjemaet blir sendt inn, vil handling funksjonen vil få
FormData fra Forespørsel objekt const formData = await request.formData(), så konstruerer vi verdier objektet med en e-postadresse og passord, kan formData.get('e-post') vil se etter det første matchende feltet i skjemaet vårt med en name="e-post" egenskapen og returnerer verdien. Vi kontrollerer om legitimasjonen er riktig med verifyLogin funksjon, her kan du bruke et hvilket som helst av dine favorittbibliotek for JS-skjemavalidering og gjøre en hente til din egendefinerte backend for å sjekke om innloggingsdataene er riktige, hvis så er tilfelle omdirigere brukeren til /dashboard rute, ellers returnerer vi en json svar med feilobjektet og en HTTP-statuskode 400, den useActionData kroken vil returnere dette feilobjektet hvis det finnes noen, og vi gjengir feilmeldingen som i {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

Den useTransition kroken forteller oss alt om sidens overgangstilstand, med isSubmitting variabelen sjekker vi når en innsending skjer, hvis det er noen, vil vi deaktivere send-knappen og vise Innlogging.... i stedet for Logg innkan vi også vise brukeren en lastespinner eller en annen indikasjon i stedet.

Den json funksjon er bare en snarvei for å opprette application/json svarobjekter. De useLoaderData kroken returnerer JSON-parsede data fra ruten din laster, den useActionData returnerer ruten handling analyserte data.

SEO-vennlig

Hver rute kan også eksportere en meta funksjon som er ansvarlig for å angi metakoder for Html-dokumentet ditt, på denne måten kan du angi en tittel og en beskrivelse for hver rute og legge til Open Graph eller andre metatagger du ønsker.

export const meta = () => {
const title = 'Min fantastiske side';
const description = "Superkjempeflott side";

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

export default function AwesomeRoute() {
return

Awesome Route

;
}
```

Nyttige lenker

Vi har bare tatt for oss toppen av isfjellet om Remix, det er så mye mer å vite, her er noen nyttige lenker:

• Dokumentasjon
• Github
• Mappe med eksempler
• Spilleliste på Youtube
• Discord-server

Sammendrag

Det som er bra med Remix er at ved å bli bedre med det, blir du bedre på grunnleggende webkunnskaper, som du har sett, peker mange av lenkene i denne artikkelen til Mozilla-dokumenterDet er dette som menes med at Remix er fokusert på grunnleggende webkunnskap. Det bruker web-API-er som Response- og Request-objektet for å gi brukerne en flott brukeropplevelse, og du kan fortsatt bruke alle dine React vanlige teknikker og favorittbiblioteker.

Vi har ikke snakket om alle de flotte funksjonene som Remix tilbyr i denne artikkelen, for eksempel Nestede ruter, Feilgrenser, Remix Stacks men denne artikkelen bør likevel gi deg en god idé om filosofien bak Remix.