Remix Frameworkin käytön aloittaminen

Kyllä, tämä on jälleen yksi JS kehys, mutta pysy vain hieman kauemmin, koska tämä kehys on tehty Michael Jackson ja Ryan Florence fiksut kaverit takana React Reititin. Toivottavasti tämä sai huomionne, joten katsotaanpa, mitä hyvää on Remix-kehys.

Tekniset tiedot

Remix on palvelinpuolen kehys, joka on rakennettu päälle Web Fetch API ja React Reititin, jokaisella remixin reitillä on kolme ensisijaista vientituotetta a kuormaaja, an toiminta ja oletusarvo komponentti vienti. . kuormaaja funktiota kutsutaan palvelimella ennen renderöintiä tietojen toimittamiseksi reitille. toiminta toiminto vastaa tietojen mutaatiosta, oletusvienti on komponentti, joka renderöidään kyseisellä reitillä. Osoite kuormaaja ja toiminta funktiot suoritetaan vain palvelinpuolella ja niiden on palautettava arvoksi Vastaus objekti, oletus vienti suoritetaan sekä palvelin- että asiakaspuolella.

Aloittaminen

Uuden Remixin alustaminen projekti:

npx create-remix@latest

TÄRKEÄÄ: Valitse "Vain perusasiat" ja sitten "Remix App Server", kun sinua pyydetään.

cd [mikä tahansa nimesi projektille]
npm run dev
```

Avaa http://localhost:3000. create-remix komennolla saat aloituspohjan, jonka rakenne on seuraava:

• The sovellus kansio sisältää kaikki sovellusreitit ja koodi.
• The app/entry.client.jsx on ensimmäinen selaimessa suoritettava koodinpätkä, jota käytetään selaimen hydratoi React-komponentit.
• The app/entry.server.jsx on ensimmäinen osa koodia, joka suoritetaan, kun pyyntö saapuu palvelimelle, tämä tiedosto renderöi React-sovelluksemme merkkijonoksi/virraksi ja lähettää sen vastauksena asiakkaalle.
• The app/root.jsx on juurikomponentin paikka.
• The app/routes/ on paikka, jonne kaikki reittimoduulisi menevät, remix käyttää tiedostojärjestelmään perustuvaa reititystä.
• The julkinen kansioon laitetaan staattiset aineistosi (kuvat/fonit/jne).
• The remix.config.js voidaan asettaa remix-konfiguraatio.

Vähemmän puhetta, näytä minulle koodi

Tarkistetaan login.jsx reittiesimerkki Remix-sovelluksen sisällä:

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>

);
}
```

Ensimmäinen asia, joka tässä tapahtuu, on kuormaaja funktio, joka tarkistaa, onko käyttäjä jo kirjautunut sisään tunnuksella isLoggedIn toiminto ja uudelleenohjaus hänet /dashboard reittiä, jos ei, se yksinkertaisesti palauttaa { success: true } vastaus, kirjautumissivu renderöidään.

The LoginRoute renderöi lomakkeen, jossa on sähköpostiosoite ja salasana sekä lähetä-painike, kuten näet, lomakkeessa ei ole yhtään valtio muuttujia eikä onSubmit tapahtumankäsittelijä komponentissamme, se johtuu siitä, että remixissä jokainen reitti voi viedä komponentin toiminta ja kun lomake lähetetään POST metodia kutsutaan ja se käsittelee kyseisen tapahtuman.

Kun lomake lähetetään toiminta funktio saa
FormData alkaen Pyyntö kohde const formData = await request.formData(), niin olemme rakentamassa arvot objekti, jolla on sähköpostiosoite ja salasanaominaisuudet, on formData.get('email') etsii lomakkeemme sisältä ensimmäistä vastaavaa kenttää, jossa on merkkijono name="email" ominaisuus ja palauttaa sen arvon. Tarkistamme, ovatko valtakirjat oikeat, ja käytämme verifyLogin funktiota, tässä voit käyttää mitä tahansa suosikkisi JS-skeeman validointikirjastoa ja tehdä nouto mukautettuun backendiin tarkistamaan, ovatko kirjautumistiedot oikein, jos näin on, me uudelleenohjaus käyttäjä /dashboard reittiä, muuten palautamme json vastaus, jossa on virheet-objekti ja HTTP-tilakoodi 400... useActionData koukku palauttaa tämän virheobjektin, jos sellainen on olemassa, ja me ehdollisesti renderöimme virheilmoituksen kuten seuraavassa {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

The useTransition koukku kertoo meille kaiken sivun siirtymätilasta, ja koukku isSubmitting muuttujan tarkistamme, kun lähetys tapahtuu, jos on olemassa me disable lähetä-painiketta ja näytä Kirjaudu sisään.... sen sijaan, että Kirjaudu sisään, voisimme sen sijaan näyttää käyttäjälle latauspinnerin tai jonkin muun merkin.

The json funktio on vain oikotie luotaessa application/json vastausobjektit. Osoite useLoaderData koukku palauttaa reitin JSON-parsittua dataa. kuormaaja... useActionData palauttaa reitin toiminta analysoidut tiedot.

SEO-ystävällinen

Jokainen reitti voi myös viedä meta funktio, joka vastaa metatunnisteiden asettamisesta Html-dokumenttiisi, tällä tavalla voit asettaa otsikko ja kuvaus jokaiselle reitille ja lisää haluamasi Open Graph- tai muut metatunnisteet.

export const meta = () => {
const title = 'Mahtava sivuni';
const description = 'Super mahtava sivu';

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

export default function AwesomeRoute() {
return

Mahtava reitti

;
}
```

Hyödyllisiä linkkejä

Olemme vasta käsitelleet jäävuoren huippua Remixistä, on niin paljon muuta tiedettävää, tässä on muutamia hyödyllisiä linkkejä:

• Dokumentointi
• Github
• Esimerkit-kansio
• Youtube-soittolista
• Discord-palvelin

Yhteenveto

Mikä on hienoa Remix on saamalla paremmin sen kanssa saat paremmin web perusteet, kuten olet nähnyt monet tämän artikkelin linkit viittaavat siihen, että Mozillan asiakirjat, tätä tarkoitetaan sillä, että Remix on keskittynyt webin perusteisiin, se käyttää web-rajapintoja, kuten Response- ja Request-objekteja, tarjotakseen käyttäjille loistavan UX:n. Lisäksi voit silti käyttää kaikkia React tavallisia tekniikoita ja suosikkikirjastoja.

Emme puhuneet kaikista Remixin tarjoamista hienoista ominaisuuksista tässä artikkelissa, kuten Sisäkkäiset reitit, Virherajat, Remix pinot mutta silti tämän artikkelin pitäisi antaa sinulle hyvä käsitys Remixin filosofiasta.