Að byrja með Remix Framework

Já, þetta er enn einn JS rammi en vertu bara aðeins lengur þar sem þessi rammi er gerður af Michael Jackson og Ryan Florence snjallir strákar á bak við React beinir. Vona að þetta hafi fengið athygli þína, svo skulum við sjá hvað er gott við Endurblöndunargrind.

Tæknilegar upplýsingar

Remix er þjónshliðarrammi sem byggður er ofan á Web Fetch API og React beinir, hver leið í remix hefur þrjár aðalútgöngur a hleðari, einn aðgerð og vanskil hluti útflutningur. The hleðari Fall verður kallað á netþjóninum áður en birting fer fram til að veita gögn að leiðinni, hinni aðgerð Aðgerðin ber ábyrgð á gagnabreytingum, sjálfgefna útflutningurinn er íhluturinn sem verður birtur á þeirri slóð. The hleðari og aðgerð Fall eru keyrð eingöngu á þjónuhlið og verða að skila a Svar hluturinn, hinn staðlað Útflutningur er keyrður bæði á þjóninum og á viðskiptavinahliðinni.

Að byrja

Til að frumstilla nýjan Remix verkefni:

npx create-remix@latest

Mikilvægt: Veldu "Just the basics", og síðan "Remix App Server" þegar þess er óskað.

cd [verkefnisnafn]
npm run dev

Opnaðu þig http://localhost:3000. hinn búa til endurblöndun Þessi skipun gefur þér upphafsskipulag með eftirfarandi uppbyggingu:

• Þeir forrit möppunni mun innihalda allar forritaleiðir þínar og kóði.
• Þeir app/entry.client.jsx er fyrsta kóðalínan sem keyrir í vafranum og er notuð til að Vatnvæða hinn React hlutar.
• Þeir app/entry.server.jsx er fyrsta kóðahlutinn sem keyrir þegar beiðni berst á netþjóninn, þessi skrá sýnir React-forritið okkar í streng/streymi og sendir það sem svar til viðskiptavinarins.
• Þeir app/root.jsx er þar sem rótareiningin fer.
• Þeir app/leiðir/ er þar sem allir leiðarmódular þínir munu fara, remix notar skráarkerfis-bundna leiðasetningu.
• Þeir opinber Mappan er þar sem kyrrstæðir auðlindir þínar fara (myndir/letur/o.s.frv.).
• Þeir Endurblöndunarstillingar.js er þar sem hægt er að stilla endurhljóðblandunarstillinguna.

Minni tala, sýndu mér kóðann

Skoðum a skrái inn.jsx dæmi um leið í Remix-forriti:

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>

);
}
```

Fyrsta sem gerist hér er hleðari fall sem athugar hvort notandinn sé þegar innskráður með er innskráður fall og erfðaskrift Endurbeina honum til /mælaborð leið, annars mun það einfaldlega skila a { success: true } Svari, þá er innskráningarsíðan birt.

Þeir Innskráningarleið Sýnir eyðublað með reitum fyrir netfang og lykilorð og sendahnapp; eins og þú sérð eru engar ríki breytur né einn við innsendingu viðburðahandfari í íhlutnum okkar, það er vegna þess að í Remix getur hver leið útflutt an aðgerð og þegar eyðublað er sent inn með a Póstur aðferð sem aðgerðin verður kölluð og mun meðhöndla það atburð.

Þegar formið er sent inn aðgerð fall fær
Formgögn frá Beiðni hlutur const formData = await request.formData(), þá erum við að byggja upp gildi hlutur með eiginleikana netfang og lykilorð, the formData.get('netfang') mun leita að fyrsta samsvarandi reitnum í eyðublaðinu okkar með nafn="netfang" eign og skila gildi hennar. Við erum að athuga hvort auðkennin séu rétt með the staðfesta innskráningu Í falli gætirðu notað hvaða uppáhalds sem er. JS skema-gildaprófunarbókasafn og gera a sækja í sérsniðna bakendann þinn til að athuga hvort innskráningarupplýsingarnar séu réttar, ef svo er, við Endurbeina notandann til /mælaborð leið, annars skilarðu a JSON svara með errors-hlutnum og einn HTTP-statuskóði 400, hinn Notaðu aðgerðargögn hook mun skila þessu errors-hlutinu ef einhverjir villur eru til staðar og við birtum villuskilaboðin skilyrðislega eins og í {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

Þeir Notaðu umbreytingu krókur segir okkur allt sem snýr að ástandi síðuskipta, með er að senda inn breytilegur sem við erum að athuga þegar skilað er inn, ef einhver er munum við Óvirkja senda hnappinn og sýna Innskrá.... í staðinn fyrir Innskráning, við gætum einnig sýnt notandanum hleðslusnúningstákn eða einhverja aðra vísbendingu í staðinn.

Þeir JSON fall er bara skammleið til að búa til forrit/json svarshlutir. The notaLoaderGögn hook skilar JSON-greindum gögnum frá leiðinni þinni hleðari, hinn Notaðu aðgerðargögn skilar leiðinni aðgerð greind gögn.

Vænt fyrir SEO

Hver leið getur einnig flutt út a um fall sem sér um að stilla meta-merki fyrir HTML-skjalið þitt, þannig geturðu stillt a titill og a lýsing fyrir hverja leið og bættu við hvaða Open Graph- eða aðrar meta-merki sem þú vilt.

export const meta = () => {
const title = 'Frábæra síðan mín';
const description = 'Mjög frábær síða';

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

export default function AwesomeRoute() {
return

Awesome Route

;
}
```

Hagnýtar tenglar

Við höfum aðeins rakið ábrot af ísjakanum um Remix, svo margt fleira er til að vita. Hér eru nokkrar gagnlegar krækjur:

• Skjalagerð
• Github
• Dæmaskjalmöppu
• Youtube spilunarlisti
• Discord-þjónn

Yfirlit

Það sem er frábært við Remix er að með því að verða betri í því munt þú verða betri í vefur grunnatriði, eins og þú hefur séð margar af tenglum þessarar greinar vísa til Mozilla skjöl, þetta er það sem átt er við þegar Remix beinir sjónum að grunnatriðum vefsins; það notar Web API eins og Response- og Request-hlutina til að bjóða notendum frábæra upplifun Notendaupplifun Auk þess geturðu enn notað allar venjulegu React aðferðirnar þínar og uppáhalds bókasöfn.

Við ræddum ekki um allar frábæru eiginleikana sem Remix býður upp á í þessari grein, eins og Innfelldar leiðir, Villumörk, Endurblöndunarstaflar En samt ætti þessi grein að gefa þér góða hugmynd um heimspeki Remix.