Darba sākšana ar Remix Framework

Jā, šis ir vēl viens JS sistēmu, bet tikai pieturēties nedaudz ilgāk, jo šī sistēma ir izveidota ar Maikls Džeksons un Raiens Florencs gudrie puiši, kas stāv aiz React maršrutētājs. Ceru, ka tas ieguva jūsu uzmanību, tāpēc paskatīsimies, kas ir labs par Remiksu sistēma.

Tehniskā informācija

Remix ir servera puses ietvars, kas veidots, pamatojoties uz Web Fetch API un React maršrutētājs, katram maršrutam remiksā ir trīs galvenie eksporta veidi a iekrāvēji, un darbība un noklusējuma komponents eksports. Portāls iekrāvēji funkcija tiks izsaukta serverī pirms renderēšanas, lai nodrošinātu dati maršrutam, tad darbība funkcija ir atbildīga par datu mutāciju, noklusējuma eksports ir komponents, kas tiks atveidots šajā maršrutā. . iekrāvēji un darbība funkcijas tiek izpildītas tikai servera pusē, un tām jāatgriež Atbildes objekts, objekts noklusējuma eksports tiek veikts gan servera, gan klienta pusē.

Darba sākšana

Jaunas Remix programmas inicializēšana projekts:

npx create-remix@latest

SVARĪGI: izvēlieties "Tikai pamatlietas" un pēc tam "Remix App Server", kad tiks uzaicināts.

cd [neatkarīgi no projekta nosaukuma]
npm run dev
```

Atveriet http://localhost:3000. . create-remix komandā tiks izveidots starta veidni ar šādu struktūru:

• Portāls lietotne mapē būs ietverti visi jūsu lietojumprogrammas maršruti un kods.
• Portāls app/entry.client.jsx ir pirmā koda daļa, kas tiek palaista pārlūkprogrammā un tiek izmantota, lai hidrāts . React sastāvdaļas.
• Portāls app/entry.server.jsx ir pirmais koda elements, kas tiek palaists, kad pieprasījums nonāk uz servera, un šis fails atveido mūsu React lietotni uz virkni/straumi un nosūta to kā atbildi klientam.
• Portāls app/root.jsx ir vieta, kur atrodas saknes komponents.
• Portāls app/routes/ ir vieta, kur tiks novietoti visi jūsu maršruta moduļi, remix izmanto uz failu sistēmu balstītu maršrutēšanu.
• Portāls publiski mapē tiek saglabāti statiskie resursi (attēli, fonti u. c.).
• Portāls remix.config.js ir vieta, kur var iestatīt remiksa konfigurāciju.

Mazāk runu, parādiet man kodu

Pārbaudīsim login.jsx maršruta piemērs Remix lietotnē:

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>

);
}
```

Pirmais, kas šeit notiek, ir iekrāvēji funkcija, kas pārbauda, vai lietotājs jau ir pieteicies ar isLoggedIn funkciju un novirzīt viņu uz /dashboard maršruts, bet, ja tā nav, tas vienkārši atgriezīs { success: true } atbildi, tad tiek atveidota pieteikšanās lapa.

Portāls LoginRoute atveido veidlapu ar e-pasta un paroles ievades un iesniegšanas pogu, kā redzat, nav nekādu valsts mainīgie, ne arī onSubmit notikumu apstrādātājs mūsu komponentē, tas ir tāpēc, ka remiksā katrs maršruts var eksportēt darbība un kad veidlapa tiek nosūtīta ar POST metode tiks izsaukta darbība, kas apstrādās šo notikumu.

Kad veidlapa tiek nosūtīta darbība funkcija iegūs
FormData no Pieprasījums objekts const formData = await request.formData(), tad mēs konstruējam vērtības objekts ar e-pasta un paroles īpašībām. formData.get('email') meklēs pirmo atbilstošo lauku mūsu veidlapā ar name="e-pasts" īpašību un atdod tās vērtību. Mēs pārbaudām, vai akreditācijas dati ir pareizi, izmantojot verifyLogin funkciju, šeit varat izmantot jebkuru no savām iecienītākajām JS shēmas validācijas bibliotēku un veikt iegūt lai pārbaudītu, vai pieteikšanās dati ir pareizi, un, ja ir, mēs novirzīt lietotājam uz /dashboard maršruts, pretējā gadījumā mēs atgriežam json atbildi ar kļūdas objektu un HTTP statusa kods 400, un useActionData āķis atgriezīs šo kļūdu objektu, ja tāds ir, un mēs nosacīti atveidosim kļūdas ziņojumu, kā norādīts {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

Portāls useTransition āķis stāsta mums visu par lapas pārejas stāvokli, ar isSubmitting mainīgais mēs pārbaudām, kad notiek iesniegšana, ja ir kāds, mēs atslēgt iesniegt pogu un parādīt Login.... nevis Pieteikšanās, tā vietā mēs varētu lietotājam parādīt arī iekraušanas rotatoru vai citu norādi.

Portāls json funkcija ir tikai saīsne, lai izveidotu application/json atbildes objekti. Portāls useLoaderData āķis atgriež no maršruta izanalizētos JSON datus. iekrāvēji, un useActionData atgriež maršrutu darbība analizētus datus.

SEO draudzīgs

Katrs maršruts var arī eksportēt meta funkcija, kas ir atbildīga par jūsu Html dokumenta meta tagu iestatīšanu, šādā veidā jūs varat iestatīt virsraksts un apraksts katram maršrutam un pievienojiet Open Graph vai citas nepieciešamās meta birkas.

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

return {
charset: 'utf-8',
title,
description,
atslēgvārdi: '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,
};
};

eksportēt noklusējuma funkciju AwesomeRoute() {
return

Awesome Route

;
}
```

Noderīgas saites

Mēs esam apskatījuši tikai aisberga virsotni par Remix, ir vēl daudz kas jāzina, tāpēc šeit ir dažas noderīgas saites:

• Dokumentācija
• Github
• Piemēru mape
• Youtube atskaņošanas saraksts
• Discord serveris

Kopsavilkums

Remix ir lieliski tas, ka, kļūstot ar to labāks, jūs varēsiet labāk. tīmekļa vietne pamati, kā jūs esat redzējuši daudzi no šī raksta saites norāda uz Mozilla dokumenti, tas ir tas, ko nozīmē, ka Remix ir vērsts uz tīmekļa pamatiem, tas izmanto tīmekļa API, piemēram, atbildes un pieprasījuma objektu, lai nodrošinātu lietotājiem lielisku. UX turklāt joprojām varat izmantot visas ierastās React metodes un iecienītākās bibliotēkas.

Šajā rakstā mēs nerunājām par visām lieliskajām Remix sniegtajām funkcijām, piemēram. Iedalītie maršruti, Kļūdu robežas, Remix Stacks tomēr šis raksts sniegs jums labu priekšstatu par Remix filozofiju.