Komma igång med Remix Framework

Ja, detta är ännu en JS men håll ut ett tag till eftersom detta ramverk är tillverkat av Michael Jackson och Ryan Florence de smarta killarna bakom React router. Hoppas att det fick din uppmärksamhet, så låt oss se vad som är bra med Remix-ramverk.

Tekniska detaljer

Remix är ett ramverk för serversidan som bygger på API för webbhämtning och React routerhar varje rutt i remix tre primära exporter a lastare, en åtgärd och en standard komponent export. Den lastare funktionen kommer att anropas på servern före rendering för att tillhandahålla data till rutten, funktionen åtgärd är ansvarig för datamutationen är standardexporten den komponent som kommer att återges på den rutten. Funktionen lastare och åtgärd funktioner körs endast på serversidan och måste returnera ett Svar objektet standard export körs både på server- och klientsidan.

Komma igång

För att initiera en ny Remix projekt:

npx skapa-remix@nyaste

VIKTIGT: Välj "Bara grunderna" och sedan "Remix App Server" när du uppmanas att göra det

cd [vad du än namngav projektet]
npm kör dev
```

Öppna upp http://localhost:3000. den skapa-remix kommandot får du en startmall med följande struktur:

• Den app mappen kommer att innehålla alla dina applikationsvägar och kod.
• Den app/entré.klient.jsx är den första delen av koden som körs i webbläsaren och används för att hydrat React-komponenterna.
• Den app/entré.server.jsx är den första kodstycket som körs när en begäran träffar servern, den här filen renderar vår React-app till en sträng/ström och skickar den som vårt svar till klienten.
• Den app/root.jsx är där rotkomponenten hamnar.
• Den app/routes/ är där alla dina ruttmoduler kommer att hamna, remix använder en filsystembaserad routing.
• Den allmänheten mappen är där dina statiska tillgångar hamnar (bilder/teckensnitt/etc.).
• Den remix.config.js är den plats där remixkonfigurationen kan ställas in.

Mindre prat, visa mig koden

Låt oss kontrollera en inloggning.jsx exempel på en rutt inuti 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örsta som händer här är att lastare funktion som kontrollerar om användaren redan är inloggad med ärInloggad funktion och kommer omdirigera honom till /tavla annars returnerar den helt enkelt en { framgång: sant } svar, så renderas inloggningssidan.

Den Inloggningsrutt renderar ett formulär med en e-postadress och ett lösenord och en skicka-knapp, som du kan se finns det inga tillstånd variabler eller en påSänd i vår komponent, beror det på att i remix kan varje rutt exportera en åtgärd och när ett formulär skickas in med en POST metoden kommer åtgärden att anropas och hantera den händelsen.

När formuläret skickas in kommer åtgärd funktionen kommer att få
Formulärdata från Begäran objekt const formData = await request.formData()då är det vi som konstruerar värden objekt med egenskaperna e-post och lösenord, kommer formData.get('e-post') kommer att leta efter det första matchande fältet i vårt formulär med en name="e-post" egenskap och returnera dess värde. Vi kontrollerar om referenserna är korrekta med verifieraLogin funktion, här kan du använda något av dina favoritbibliotek för validering av JS-scheman och göra en hämta till din anpassade backend för att kontrollera om inloggningsuppgifterna är korrekta, om så är fallet omdirigera användaren till /tavla rutt, annars returnerar vi en json svar med felobjektet och ett HTTP-statuskod 400, den användaAktionsData kroken returnerar detta felobjekt om det finns något och vi återger felmeddelandet på ett villkorligt sätt som i {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

Den användningTransition kroken berättar allt om sidans övergångstillstånd, med ärSändande variabel kontrollerar vi när en inlämning sker, om det finns någon kommer vi att avaktivera skicka-knappen och visa Logga in.... istället för Logga inkan vi också visa användaren en laddningsspinner eller någon annan indikation istället.

Den json funktionen är bara en genväg för att skapa applikation/json svarsobjekt. De användaLaddningsData hook returnerar JSON-parsade data från din rutt lastare, den användaAktionsData returnerar rutten åtgärd analyserad data.

SEO-vänlig

Varje rutt kan också exportera en meta funktion som ansvarar för att ställa in metataggar för ditt Html-dokument, på detta sätt kan du ställa in en titel och en beskrivning för varje rutt och lägg till Open Graph eller andra metataggar som du vill ha.

export const meta = () => {
const title = "Min fantastiska sida";
const description = "Superhäftig sida";

returnera {
charset: 'utf-8',
title,
beskrivning,
nyckelord: 'Remix,Fantastiskt',
'twitter:image': 'https://awesome-page.com/awesome.png',
'twitter:card': 'summarylargeimage',
'twitter:skapare': '@awesome',
'twitter:site': '@awesome',
'twitter:title': titel,
'twitter:description': beskrivning,
};
};

export default funktion AwesomeRoute() {
returnera

Fantastisk rutt

;
}
```

Användbara länkar

Vi har bara tagit itu med toppen av isberget om Remix, det finns så mycket mer att veta, här är några användbara länkar:

• Dokumentering
• Github
• Exempel på mapp
• Youtube-spellista
• Discord-server

Sammanfattning

Det som är bra med Remix är att genom att bli bättre med det blir du bättre på webbfundament, som du har sett många av de här artikellänkarna pekar på Mozilla-dokumentdet här är vad som menas med Remix som är fokuserat på webbfundamentaler det använder webb-API: er som Response och Request-objektet för att ge användarna en fantastisk UX plus att du fortfarande kan använda alla dina React vanliga tekniker och favoritbibliotek.

Vi pratade inte om alla fantastiska funktioner som tillhandahålls av Remix i den här artikeln som Nästlade rutter, Gränser för fel, Remix Staplar men ändå bör den här artikeln ge dig en bra uppfattning om filosofin bakom Remix.