Aan de slag met Remix Framework

Ja, dit is weer een JS framework, maar blijf nog even hangen want dit framework is gemaakt door Michael Jackson en Ryan Florence de slimme jongens achter React router. Ik hoop dat dit je aandacht heeft getrokken, dus laten we eens kijken wat er goed is aan de Remix kader.

Technische details

Remix is een server-side framework gebouwd bovenop de Web API ophalen en React routerElke route in remix heeft drie primaire exports a voorladereen actie en een standaard component export. De voorlader functie wordt aangeroepen op de server vóór het renderen om gegevens aan de route te leveren, de actie functie verantwoordelijk is voor de gegevensmutatie, is de standaardexport de component die zal worden weergegeven op die route. De voorlader en actie functies worden alleen aan de serverkant uitgevoerd en moeten een Reactie object, de standaard export wordt zowel op de server als op de client uitgevoerd.

Aan de slag

Een nieuwe Remix initialiseren project:

npx maak-remix@laatste

BELANGRIJK: Kies "Alleen de basis" en dan "Remix App Server" wanneer daarom wordt gevraagd.

cd [hoe je het project ook genoemd hebt]
npm run dev
```

Openen http://localhost:3000. de maak-remix commando krijg je een startsjabloon met de volgende structuur:

• De app map bevat al je applicatieroutes en code.
• De app/entry.client.jsx is het eerste stukje code dat in de browser wordt uitgevoerd en wordt gebruikt om hydrateren de React componenten.
• De app/entry.server.jsx is het eerste stuk code dat wordt uitgevoerd wanneer een verzoek de server bereikt, dit bestand rendert onze React app naar een string/stream en stuurt dat als ons antwoord naar de client.
• De app/root.jsx is waar de hoofdcomponent naartoe gaat.
• De app/routes/ is waar al je routemodules naartoe gaan, remix gebruikt een bestandssysteemgebaseerde routing.
• De openbaar map is waar je statische onderdelen (afbeeldingen/fonts/etc) in komen.
• De remix.config.js is waar de remixconfiguratie kan worden ingesteld.

Minder praten, laat me de code zien

Laten we een login.jsx routevoorbeeld in een 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>

);
}
```

Het eerste wat hier gebeurt is de voorlader functie die controleert of de gebruiker al is ingelogd met de isLoggedIn functie en zal doorsturen hem naar de /dashboard route, zo niet dan zal het gewoon een {succes: true } antwoord, dan wordt de aanmeldpagina weergegeven.

De Aanmeldingsroute rendert een formulier met een e-mail en wachtwoordinvoer en een verzendknop, zoals je kunt zien zijn er geen staat variabelen noch een Verzenden event handler in onze component, komt dat omdat in remix elke route een actie en wanneer een formulier wordt verzonden met een POST methode wordt de actie aangeroepen en wordt die gebeurtenis afgehandeld.

Wanneer het formulier wordt verzonden, wordt de actie functie krijgt de
FormData van de Aanvraag object const formData = await request.formData()dan construeren we de waarden object met een e-mail en wachtwoordeigenschappen, de formulierData.get('e-mail') zoekt naar het eerste overeenkomende veld in ons formulier met een name="e-mail". eigenschap en de waarde ervan retourneren. We controleren of de referenties correct zijn met de verifyLogin functie, hier zou je een van je favoriete JS schema validatiebibliotheken kunnen gebruiken en een ophalen naar je aangepaste backend om te controleren of de inloggegevens correct zijn. Als dat zo is, kunnen we doorsturen de gebruiker naar de /dashboard route, anders retourneren we een json antwoord met het foutenobject en een HTTP-statuscode 400de useActionData hook retourneert dit foutenobject als er fouten zijn en we geven de foutmelding voorwaardelijk weer zoals in {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

De gebruikOvergang hook vertelt ons alles over de overgangstoestand van de pagina, met de isSubmitting variabele controleren we wanneer een indiening plaatsvindt, als er een is zullen we uitschakelen de verzendknop en toon Inloggen.... in plaats van InloggenWe kunnen de gebruiker ook een laadspinner of een andere indicatie laten zien.

De json functie is gewoon een snelkoppeling voor het maken van toepassing/json antwoordobjecten. De useLoaderData hook retourneert de JSON-geparseerde gegevens van je route voorladerde useActionData geeft de route actie geparseerde gegevens.

SEO vriendelijk

Elke route kan ook een meta functie die verantwoordelijk is voor het instellen van metatags voor je html-document, op deze manier kun je een titel en een beschrijving voor elke route en voeg Open Graph of andere metatags toe.

export const meta = () => {
const title = 'Mijn geweldige pagina';
const description = 'Super awesome pagina';

return {
karakterset: 'utf-8',
titel,
beschrijving,
trefwoorden: 'Remix,Awesome',
twitter:image": "https://awesome-page.com/awesome.png",
twitter:card": "summarylargeimage",
twitter:creator": "@awesome",
twitter:site": "@awesome",
twitter:title": titel,
twitter:description": description,
};
};

exportstandaardfunctie AwesomeRoute() {
teruggeven

Geweldige route

;
}
```

Nuttige links

We hebben slechts het topje van de ijsberg over Remix behandeld, er is nog zoveel meer te weten, hier zijn enkele nuttige links:

• Documentatie
• Github
• Voorbeelden map
• Youtube-afspeellijst
• Discord server

Samenvatting

Het mooie van Remix is dat als je er beter mee wordt, je ook beter wordt in webfundamentals, zoals je hebt gezien wijzen veel van de links in dit artikel naar de Mozilla-documentenDit is wat wordt bedoeld met Remix is gericht op webfundamentals het gebruikt Web API's zoals het Response en Request object om de gebruikers te voorzien van een geweldige UX plus je kunt nog steeds al je React gebruikelijke technieken en favoriete bibliotheken gebruiken.

We hebben het in dit artikel niet gehad over alle geweldige functies van Remix, zoals Geneste routes, Foutgrenzen, Remix Stapels maar toch zou dit artikel je een goed idee moeten geven over de filosofie achter Remix.