Olete ilmselt kuulnud palju kära raamistikuploki ühe uusima lapse Remix ümber. Võib olla üllatav, et see sai alguse 2019. aastal, kuid algselt oli see saadaval ainult tellimuspõhise lisatasu raamistikuna. 2021. aastal kogusid asutajad iduraha ja hankisid avatud lähtekoodiga raamistiku, et võimaldada kasutajatel hakata Remixit tasuta kasutama. Ujuvluugid avanesid ja kõik justkui räägivad sellest, olgu see hea või halb. Sukeldume ja vaatame mõningaid Remixi põhitõdesid.
Remix on serveri "edge" esimene JavaScripti raamistik. See kasutab Reacti, vähemalt praegu, esiotsa jaoks ja eelistab serveripoolset rakenduse renderdamist äärel. Platvormid võivad võtta serveripoolse koodi ja käivitada selle nimega serverita või servafunktsioonid muutes selle traditsioonilisest serverist odavamaks ja tuues selle kasutajatele lähemale. Remixi asutajatele meeldib seda nimetada "keskpinu" raamistikuks, kuna see kohandab serveri ja kliendi vahel tehtud päringuid ja vastuseid selle platvormi jaoks, millel see töötab.
Remixi juurutamine
Kuna Remix nõuab serverit, räägime sellest, kuidas saate seda juurutada. Remix ei paku serverit ennast – sina tood serveri –, mis võimaldab seda käivitada mis tahes Node.js or DENO keskkond, sealhulgas Netlify Edge ja DigitalOceani rakenduste platvorm. Remix ise on a kompilaator, programm, mis tõlgib selle platvormi päringud, millel see töötab. See protsess kasutab ehitama serveri päringute töötlejate loomiseks. Selle kasutatavad HTTP-käsitlejad on üles ehitatud Web Fetch API ja neid juhib serveris kohanemine neid platvormi jaoks, kuhu nad kasutusele võetakse.
Remikside virnad
Remix-virnad on projektid, millel on mõned tavalised tööriistad, mis on teie jaoks eelnevalt konfigureeritud. Seal on kolm ametlikku virna mida haldab Remixi meeskond ja need kõik on nimetatud muusikažanrite järgi. Samuti on mitmeid kogukonna remixi virnasid, sealhulgas K-Pop Stack mille on loonud Netlify mallide meeskond. See virn on jõuallikas ja sisaldab a Supabaas andmebaas ja autentimine, Tail wind kujundamiseks, Küpress otsast lõpuni testimine, Uhkem koodi vormindamine, ESLint linting ja TypeScript staatiline tippimine. Vaadake Tara Manicsici postitust K-Pop Stacki juurutamise kohta.
Vahemälu marsruudid
Kuigi Remix nõuab serverit, saab see siiski ära kasutada Jamstack kasu marsruutide vahemällu salvestamisest. Staatiline sait või staatilise saidi genereerimine (SSG) on see, kui kogu teie sisu renderdatakse ehitamise ajal ja see jääb alles staatiline kuni järjekordse ümberehituseni. Sisu on eelnevalt loodud ja selle saab panna CDN-i. See pakub lõppkasutajale palju eeliseid ja kiire saidi laadimise. Remix ei tee aga tüüpilist SSG-d nagu teised populaarsed Reacti raamistikud, sealhulgas Next.js ja Gatsby. SSG eeliste kasutamiseks võite kasutada natiivset versiooni Cache-Control HTTP päis remiksis päiste funktsioon konkreetse marsruudi vahemällu salvestamiseks või otse root.tsx faili.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Seejärel lisage oma päiste funktsioon kuhu tahad. See vahemällu jääb üheks tunniks:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Marsruutimise remiksimine
Paljud raamistikud on kaldunud failisüsteemidel põhinevale marsruutimisele. See on tehnika, mille puhul kasutatakse teie rakenduse marsruutide määratlemiseks määratud kausta. Tavaliselt on neil dünaamiliste marsruutide ja lõpp-punktide deklareerimiseks spetsiaalne süntaks. Suurim erinevus Remixi ja teiste populaarsete raamistike vahel on kasutusvõimalus pesastatud marsruutimine.
Iga Remixi rakendus algab tähega root.tsx faili. See on koht, kus renderdatakse kogu rakenduse alus. Siit leiate mõned tavalised HTML-i paigutused, näiteks <html> silt, <head> silt ja seejärel <body> sildi rakenduse renderdamiseks vajalike komponentidega. Üks asi, mida siin välja tuua, on <Scripts> komponent on see, mis lubab saidil JavaScripti; mõned asjad töötavad ilma selleta, kuid mitte kõik. The root.tsx fail toimib vanemapaigutusena kõigele, mis on failis routes kataloogis renderdatakse kõik marsruutides sinna, kus <Outlet/> komponent on sees root.tsx. See on Remixis pesastatud marsruutimise alus.
Pesastatud marsruutimine
Remixi ei asutanud mitte ainult mõni meeskond Reageeri ruuter, see samuti kasutusalad Reageeri ruuter. Tegelikult nad on tuues mõned head asjad Remixist tagasi React Routerisse. Keeruline probleem, mida Next.js'i ja SvelteKiti hooldajad praegu lahendada püüavad, on pesastatud marsruutimine.
Pesastatud marsruutimine erineb tavapärasest marsruutimisest. Kui uus marsruut viiks kasutaja uuele lehele, on iga pesastatud marsruut sama lehe eraldi jaotis. See võimaldab mured eraldada, hoides äriloogikat seotuna ainult seda vajavate failidega. Remix suudab käsitleda vigu, mis on lokaliseeritud ainult selles lehe jaotises, kus pesastatud marsruut asub. Teised lehel olevad marsruudid on endiselt kasutatavad ja katkenud marsruut võib anda veale asjakohase konteksti, ilma et kogu leht kokku jookseks.
Remix teeb seda juurfaili sisestamisel app/routes on sama nimega kui failide kataloog, mis laaditakse põhifaili. Juurfailist saab a paigutus kataloogis olevate failide jaoks, kasutades an <Outlet /> komponent, mis ütleb Remixile, kuhu teised marsruudid laadida.
Väljalaskeava komponent
. <Outlet /> Komponent on Remixile signaal, kus see peaks pesastatud marsruutide jaoks sisu renderdama. See pannakse faili juure app/routes pesastatud marsruutidega sama nimega kataloog. Järgmine kood läheb a app/routes/about.tsx fail ja sisaldab sees olevate failide väljundit app/routes/about kausta:
import { Outlet } from "@remix-run/react";
export default function About() {
return (
<>
<section>
I am the parent layout. I will be on any page inside of my named directory.
</section>
{ /* All of my children, the files in the named directory, will go here. */ }
<Outlet />
</>
)
}Kausta struktuur
Mis tahes failis app/routes/ kataloogist saab marsruut selle nime URL-i juures. Kataloogi saab lisada ka tähega index.tsx faili.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxKui marsruudil on sama nimi mis kataloogil, muutub nimega fail kataloogis olevate failide paigutusfailiks ja paigutusfail vajab Väljalaskeava komponent pesastatud marsruudi paigutamiseks.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxPaigutusi saab luua ka nende ette topelt allkriipsuga (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about renderdab ikkagi app/routes/about.tsx faili, kuid renderdab ka kõik, mis on sees app/routes/about/index.tsx kus Väljalaskeava komponent on märgistuses app/routes/about.tsx.
Dünaamilised marsruudid
Dünaamiline marsruut on marsruut, mis muutub URL-is oleva teabe põhjal. See võib olla ajaveebi postituse nimi või kliendi ID, kuid olenemata sellest, mis see on $ marsruudi esiosale lisatud süntaks annab Remixile märku, et see on dünaamiline. Nimel pole muud tähtsust kui $ eesliide.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxTooge need andmed!
Kuna Remix renderdab kõik oma andmed serveris, ei näe te palju asju, mis on muutunud Reacti rakenduse standardiks, näiteks useState() ja useEffect() konksud, Remixis. Kliendipoolset olekut on vähem vaja, kuna see on serveris juba hinnatud.
Samuti pole vahet, millist tüüpi serverit andmete toomiseks kasutate. Kuna Remix asub päringu ja vastuse vahel ning tõlgib selle asjakohaselt, saate kasutada standardit Web Fetch API. Remix teeb seda a loader seda funktsiooni ainult töötab serveris ja kasutab useLoaderData() konks komponendi andmete renderdamiseks. Siin on näide Cat kui teenuse API juhusliku kassipildi renderdamiseks.
import { Outlet, useLoaderData } from '@remix-run/react'
export async function loader() {
const response = await fetch('<https://cataas.com/cat?json=true>')
const data = await response.json()
return {
data
}
}
export default function AboutLayout() {
const cat = useLoaderData<typeof loader>()
return (
<>
<img
src={`https://cataas.com/cat/${cat}`}
alt="A random cat."
/>
<Outlet />
</>
)
}Marsruudi parameetrid
Dünaamilistel marsruutidel on marsruudid eesliitega $ peavad saama juurdepääsu URL-i parameetrile, et töödelda neid andmeid, mida tuleks renderdada. The loader funktsioonil on neile juurdepääs läbi a params argument.
import { useLoaderData } from '@remix-run/react'
import type { LoaderArgs } from '@remix-run/node'
export async function loader({ params }: LoaderArgs) {
return {
params
}
}
export default function AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}Muud Remix funktsioonid
Remixil on veel mõned abifunktsioonid, mis lisavad tavalistele HTML-i elementidele ja atribuutidele lisafunktsioone marsruudimooduli API. Iga marsruut saab seda tüüpi funktsioonidest ise määrata.
Tegevusfunktsioon
An action funktsioon võimaldab teil standardset veebi kasutades vormitoimingule lisafunktsioone lisada FormData API.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Päiste funktsioon
mistahes HTTP standardsed päised saab sisse minna headers funktsiooni. Kuna igal marsruudil võib olla päis, vältimaks konflikte pesastatud marsruutidega, on kõige sügavam marsruut või URL, millel on kõige rohkem kaldkriipse (/) — võidab. Samuti saate päised läbi lasta, actionHeaders, loaderHeadersvõi parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Meta funktsioon
See funktsioon määrab HTML-dokumendi metasildid. Üks on seatud root.tsx vaikimisi faili, kuid neid saab iga marsruudi jaoks värskendada.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Linkide funktsioon
HTML link elemendid elavad <head> HTML-dokumendi sildi ja impordivad muu hulgas CSS-i. The links funktsiooniga, mida ei tohi segi ajada <Link /> komponent, võimaldab importida asju ainult nendel marsruutidel, mis neid vajavad. Näiteks saab CSS-faile hõlmata ja importida ainult marsruutidel, mis neid konkreetseid faile vajavad. The link elemendid tagastatakse a-st links() toimib objektide massiivina ja võib olla kas a HtmlLinkDescriptor alates link API või PageLinkDescriptor mis saab lehe andmeid eellaadida.
export function links() {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "<https://example.com/some/styles.css>",
crossOrigin: "true",
},
// add a local stylesheet,
{ rel: "stylesheet", href: stylesHref },
// prefetch a page's data
{ page: "/about/community" }
]
}Marsruutide vaheline sidumine
Remix pakub komponenti teie rakenduse erinevate marsruutide vahel liikumiseks <Link/>. Kliendipoolse marsruutimise saamiseks kasutage <Link to="">Name</Link> asemel komponent <a href="">Name</a>. <Link /> komponent võtab ka prop of prefetch aktseptidega none algselt, intent andmete eellaadimiseks, kui Remix tuvastab, et kasutaja hõljub või fokuseerib linki, või render mis toob marsruudi andmed kohe pärast lingi renderdamist.
import { Link } from "@remix-run/react";
export default function Nav() {
return (
<nav>
<Link to="/">Home</Link>{" "}
<Link to="/about">About</Link>{" "}
<Link to="/about/community" prefetch="intent">Community</Link>
</nav>
);
}Järgmised sammud
Nüüd teate Remixi põhitõdesid ja olete valmis rakendusi tegelikult looma, eks? Remix pakub a Naljarakendus ja Blogi õpetus et saaksite alustada nende põhiteadmiste rakendamist. Võite alustada ka nullist ja luua uhiuue Remixi rakenduse. Või kui olete valmis sukelduma, andke see K-Pop Stack proovi. Olen Remixiga koos veedetud aega väga nautinud ja mulle meeldib keskenduda veebistandarditele ja viia see tagasi põhitõdede juurde. Nüüd on teie kord hakata looma!
