Kom godt i gang med Remix Framework

Ja, dette er endnu en JS men bliv hængende lidt længere, da dette framework er lavet af Michael Jackson og Ryan Florence de smarte fyre bag React Router. Jeg håber, at det fik din opmærksomhed, så lad os se, hvad der er godt ved Remix-rammeværk.

Tekniske detaljer

Remix er en serverside-ramme, der er bygget oven på API til webhentning og React Routerhar hver rute i remix tre primære eksportvarer a læsser, en handling og en standard komponent eksport. Den læsser funktion vil blive kaldt på serveren før rendering for at levere data til ruten, vil handling er ansvarlig for datamutationen, er standardeksporten den komponent, der vil blive gengivet på den pågældende rute. Den læsser og handling funktioner køres kun på serversiden og skal returnere en Svar objektet, den standard eksport køres både på server- og klientsiden.

Kom godt i gang

Sådan initialiseres et nyt remix projekt:

npx create-remix@latest

VIGTIGT: Vælg "Just the basics" og derefter "Remix App Server", når du bliver bedt om det.

cd [det navn, du har givet projektet]
npm run dev
```

Åbn op http://localhost:3000. den skab-remix kommandoen giver dig en startskabelon med følgende struktur:

• Den app mappen vil indeholde alle dine programruter og Kode.
• Den app/entry.client.jsx er det første stykke kode, der kører i browseren, og som bruges til at hydrat React-komponenterne.
• Den app/entry.server.jsx er det første stykke kode, der kører, når en anmodning rammer serveren. Denne fil omdanner vores React-app til en streng/stream og sender den som vores svar til klienten.
• Den app/root.jsx er der, hvor rodkomponenten skal hen.
• Den app/routes/ er der, hvor alle dine rutemoduler skal hen, remix bruger en filsystem-baseret routing.
• Den offentlig mappen er der, hvor dine statiske aktiver placeres (billeder/fonts/etc.).
• Den remix.config.js er der, hvor remix-konfigurationen kan indstilles.

Mindre snak, vis mig koden

Lad os tjekke en login.jsx ruteeksempel inde 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, der sker her, er læsser funktion, der kontrollerer, om brugeren allerede er logget ind med erLoggetInd funktion og vil omdirigere ham til /dashboard rute, hvis ikke vil den blot returnere en { succes: true } svar, så bliver login-siden gengivet.

Den LoginRoute gengiver en formular med en e-mail- og adgangskodeindgang og en send-knap, som du kan se, er der ingen stat variabler eller en onSubmit i vores komponent, er det, fordi hver rute i remix kan eksportere en handling og når en formular indsendes med en POST metoden vil handlingen blive kaldt og vil håndtere den pågældende begivenhed.

Når formularen bliver sendt, vil handling funktion vil få den
FormData fra Anmodning objekt const formData = await request.formData(), så er vi ved at konstruere værdier objekt med en e-mail og adgangskodeegenskaber, kan formData.get('e-mail') vil lede efter det første matchende felt i vores formular med en name="e-mail" og returnere dens værdi. Vi kontrollerer, om legitimationsoplysningerne er korrekte med verifyLogin funktion, her kan du bruge et hvilket som helst af dine foretrukne JS-skemavalideringsbiblioteker og lave en Hent til din brugerdefinerede backend for at tjekke, om login-dataene er korrekte. omdirigere brugeren til /dashboard rute, ellers returnerer vi en json svar med fejlobjektet og en HTTP-statuskode 400, den useActionData hook returnerer dette fejlobjekt, hvis der er nogen, og vi gengiver betinget fejlmeddelelsen som i {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

Den brug Overgang hook fortæller os alt om sidens overgangstilstand, med isSubmitting variabel kontrollerer vi, hvornår der sker en indsendelse, hvis der er nogen, vil vi deaktivere Send-knappen og vis Login.... i stedet for Loginkunne vi også vise brugeren en indlæsningsspinner eller en anden indikation i stedet.

Den json funktion er bare en genvej til at oprette applikation/json svarobjekter. De useLoaderData hook returnerer de JSON-parsede data fra din rute læsser, den useActionData returnerer ruten handling analyserede data.

SEO-venlig

Hver rute kan også eksportere en meta funktion, der er ansvarlig for at indstille metatags for dit Html-dokument, på denne måde kan du indstille en titel og en beskrivelse for hver rute og tilføj eventuelle Open Graph- eller andre metatags, du ønsker.

export const meta = () => {
const title = 'Min fantastiske side';
const description = 'Super fed 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': titel,
'twitter:description': beskrivelse,
};
};

export default function AwesomeRoute() {
return

Fantastisk rute

;
}
```

Nyttige links

Vi har kun taget fat på toppen af isbjerget om Remix, der er så meget mere at vide, her er nogle nyttige links:

• Dokumentation
• Github
• Mappe med eksempler
• Youtube-playliste
• Discord-server

Sammenfatning

Det gode ved Remix er, at når du bliver bedre til det, bliver du også bedre til webfundamentet, og som du har set, peger mange af denne artikels links til Mozilla-dokumenterDet er det, der menes med, at Remix er fokuseret på webfundamentaliteter, det bruger web-API'er som Response- og Request-objektet til at give brugerne en fantastisk UX, og du kan stadig bruge alle dine React sædvanlige teknikker og yndlingsbiblioteker.

Vi har ikke talt om alle de fantastiske funktioner i Remix i denne artikel, f.eks. Indlejrede ruter, Grænser for fejl, Remix-stakke men alligevel burde denne artikel give dig en god idé om filosofien bag Remix.