Pradedama dirbti su "Remix Framework

Taip, tai dar vienas JS sistemą, bet tiesiog laikykitės šiek tiek ilgiau, nes šią sistemą sukūrė Michaelas Jacksonas ir Ryanas Florence'as protingi vaikinai už React maršrutizatorius. Tikiuosi, kad tai patraukė jūsų dėmesį, todėl pažiūrėkime, kas gero Remiksų sistema.

Techninė informacija

"Remix" yra serverio pusės sistema, sukurta ant Web Fetch API ir React maršrutizatorius, kiekvienas maršrutas remix sistemoje turi tris pagrindinius eksportus a krautuvas, an veiksmas ir numatytoji komponentas eksportuoti. Svetainė krautuvas funkcija bus iškviesta serveryje prieš atvaizdavimą, kad duomenys į maršrutą, į veiksmas funkcija yra atsakinga už duomenų mutaciją, numatytasis eksportas yra komponentas, kuris bus atvaizduojamas tame maršrute. Adresas krautuvas ir veiksmas funkcijos vykdomos tik serverio pusėje ir turi grąžinti Atsakymas objektą, objektas numatytasis eksportas vykdomas ir serverio, ir kliento pusėje.

Darbo pradžia

Inicializuoti naują "Remix projektas:

npx create-remix@latest

SVARBU: pasirinkite "Just the basics", o tada "Remix App Server", kai būsite paraginti.

cd [kaip pavadinote projektą]
npm run dev
```

Atverti http://localhost:3000. . create-remix komandą gausite pradinį šabloną, kurio struktūra yra tokia:

• Svetainė programa aplanke bus visi jūsų programos maršrutai ir kodas.
• Svetainė app/entry.client.jsx yra pirmoji naršyklėje paleidžiama kodo dalis, kuri naudojama hidratuoti . React sudedamosios dalys.
• Svetainė app/entry.server.jsx tai pirmasis kodo elementas, kuris paleidžiamas, kai užklausa patenka į serverį; šiame faile mūsų React programa atvaizduojama į eilutę / srautą ir siunčiama kaip atsakymas klientui.
• Svetainė app/root.jsx ten patenka šakninis komponentas.
• Svetainė programa/maršrutai/ yra vieta, į kurią pateks visi jūsų maršruto moduliai, remix naudoja failų sistema pagrįstą maršrutizavimą.
• Svetainė viešasis aplanke talpinami statiniai ištekliai (paveikslėliai, šriftai ir kt.).
• Svetainė remix.config.js čia galima nustatyti remikso konfigūraciją.

Mažiau kalbų, parodykite man kodą

Patikrinkime login.jsx maršruto pavyzdys "Remix" programoje:

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>

);
}
```

Pirmasis dalykas, kuris čia vyksta, yra krautuvas funkcija, tikrinanti, ar naudotojas jau yra prisijungęs su isLoggedIn funkciją ir nukreipti jį į /dashboard maršrutas, o jei ne, jis tiesiog grąžins { success: true } atsakymą, tada atvaizduojamas prisijungimo puslapis.

Svetainė LoginRoute atvaizduoja formą su el. pašto ir slaptažodžio įvestimis bei pateikimo mygtuku, kaip matote, nėra jokių valstybė kintamųjų, nei onSubmit įvykių tvarkyklę mūsų komponente, nes remix sistemoje kiekvienas maršrutas gali eksportuoti veiksmas ir kai forma pateikiama su POST bus iškviestas veiksmo metodas, kuris apdoros šį įvykį.

Pateikus formą veiksmas funkcija gaus
FormData iš Užklausa objektas const formData = await request.formData(), tada mes konstruojame reikšmės objektą su el. pašto ir slaptažodžio savybėmis. formData.get('email') bus ieškoma pirmojo atitinkančio lauko formoje su name="el. paštas" savybę ir grąžinti jos vertę. Tikriname, ar įgaliojimai yra teisingi, naudodami verifyLogin funkciją, čia galite naudoti bet kurią mėgstamą JS schemos patvirtinimo biblioteką ir atlikti parsisiųsti į savo pasirinktinį backend patikrinti, ar prisijungimo duomenys yra teisingi, jei taip, mes nukreipti naudotoją į /dashboard maršrutas, kitu atveju grąžiname json atsakymą su klaidų objektu ir HTTP būsenos kodas 400. useActionData jei yra klaidų, šis objektas bus grąžintas, ir mes sąlyginai atvaizduosime klaidos pranešimą, kaip nurodyta {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

Svetainė useTransition kabliukas pasakoja mus viską apie puslapio pereinamąją būseną, su isSubmitting kintamasis mes tikriname, kada vyksta pateikimas, jei yra, mes išjungti pateikti mygtuką ir parodyti Login.... vietoj Prisijungimas, taip pat galėtume naudotojui rodyti krovimo sukiklį ar kitą nuorodą.

Svetainė json funkcija yra tik trumpinys, skirtas sukurti application/json atsakymo objektai. . useLoaderData kabliukas grąžina iš jūsų maršruto parsiųstus JSON duomenis. krautuvas. useActionData grąžina maršrutą veiksmas analizuojami duomenys.

SEO draugiškas

Kiekvienas maršrutas taip pat gali eksportuoti meta funkcija, atsakinga už Html dokumento metažymių nustatymą, tokiu būdu galite nustatyti pavadinimas ir aprašymas kiekvienam maršrutui ir pridėkite visas "Open Graph" ar kitas norimas metažymas.

export const meta = () => {
const title = 'My Awesome Page';
const description = 'Super nuostabus puslapis';

return {
charset: 'utf-8',
title,
description,
raktažodžiai: 'Remix,Awesome',
'twitter:image': 'https://awesome-page.com/awesome.png',
'twitter:card': 'summarylargeimage',
'twitter:creator': '@awesome',
'twitter:site': '@awesome',
'twitter:title': pavadinimas,
'twitter:description': aprašymas,
};
};

eksportuoti numatytąją funkciją AwesomeRoute() {
return

Awesome Route

;
}
```

Naudingos nuorodos

Mes tik apžvelgėme ledkalnio viršūnę apie "Remix", dar daug ką reikia žinoti, todėl pateikiame keletą naudingų nuorodų:

• Dokumentai
• "Github"
• Pavyzdžių aplankas
• "Youtube" grojaraštis
• Discord serveris

Santrauka

"Remix" puikus dalykas yra tai, kad tobulėdami su juo geriau žiniatinklio svetainė pagrindai, kaip matėte, daugelis šio straipsnio nuorodų nukreipia į "Mozilla" dokumentai, tai reiškia, kad "Remix" yra orientuota į žiniatinklio pagrindus, ji naudoja žiniatinklio API, pvz., atsakymo ir užklausos objektą, kad naudotojams suteiktų puikią UX be to, vis dar galite naudoti visus įprastus React metodus ir mėgstamas bibliotekas.

Šiame straipsnyje nekalbėjome apie visas puikias "Remix" teikiamas funkcijas, pvz. Įterpti maršrutai, Klaidų ribos, "Remix Stacks bet vis dėlto šis straipsnis turėtų padėti suprasti "Remix" filosofiją.