Valószínűleg sok felhajtást hallottál a keretblokk egyik legújabb gyereke, a Remix körül. Meglepő lehet, hogy még 2019-ben indult, de eredetileg csak előfizetéses prémium keretrendszerként volt elérhető. 2021-ben az alapítók magvető finanszírozást gyűjtöttek, és nyílt forráskódú keretrendszert hoztak létre, amely lehetővé tette a felhasználók számára a Remix ingyenes használatát. Kinyíltak a zsilipek, és úgy tűnik, mindenki erről beszél, akár jó, akár rossz. Merüljünk el, és nézzük meg a Remix néhány alapját.
A Remix egy szerver „edge” első JavaScript-keretrendszere. Reactot használ, Legalább most, az előtér számára, és az alkalmazás szerveroldali megjelenítését helyezi előtérbe szélén. A platformok átvehetik a szerveroldali kódot, és futtathatják azt szerver nélküli vagy élfunkciók olcsóbbá teszi, mint egy hagyományos szerver, és közelebb hozza a felhasználókhoz. A Remix alapítói szeretik „center stack” keretrendszernek nevezni, mert a szerver és a kliens közötti kéréseket és válaszokat a futtatott platformhoz igazítja.
Remix telepítése
Mivel a Remixhez kiszolgálóra van szükség, beszéljünk arról, hogyan telepítheti azt. A Remix nem biztosítja magát a szervert – Ön hozza magával a szervert –, így bármelyikben futtatható node.js or DENO környezet, beleértve Netlify Edge és a A DigitalOcean alkalmazásplatformja. A remix maga a fordítóprogram, egy program, amely lefordítja a kéréseket arra a platformra, amelyen fut. Ez a folyamat használ esbuild kezelők létrehozásához a szerverhez intézett kérésekhez. Az általa használt HTTP-kezelők a Web Fetch API és a szerveren futtatja őket alkalmazkodás arra a platformra, amelyre telepíteni fogják őket.
Remix verem
A remixveremek olyan projektek, amelyek néhány közös eszközzel rendelkeznek, amelyek előre be vannak állítva az Ön számára. Vannak három hivatalos stack amelyeket a Remix csapat karbantart, és mindegyiket zenei műfajokról nevezték el. Számos közösségi Remix stack is létezik, beleértve a K-Pop Stack a Netlify Templates csapata készítette. Ez a verem egy erőmű, és tartalmaz egy Supabase adatbázis és hitelesítés, Hátszél formázáshoz, Ciprus végpontok közötti tesztelés, szebb kód formázás, ESLint szöszölés, és Gépelt statikus gépelés. Tekintse meg Tara Manicsic bejegyzését a K-Pop Stack telepítéséről.
Gyorsítótárazási útvonalak
Annak ellenére, hogy a Remix szervert igényel, továbbra is kihasználhatja a Lekvár az útvonalak gyorsítótárazásából származó előnyök. A statikus webhely vagy statikus webhelygenerálás (SSG) az, amikor az összes tartalom a felépítési időben megjelenik, és megmarad statikus újabb átépítésig. A tartalom előre generált, és CDN-re helyezhető. Ez számos előnnyel és gyors webhelybetöltéssel jár a végfelhasználó számára. A Remix azonban nem csinál tipikus SSG-t, mint a többi népszerű React keretrendszer, beleértve a Next.js-t és a Gatsby-t. Az SSG előnyeinek kihasználásához használhatja a natív szolgáltatást Cache-Control HTTP fejléc egy Remixben fejléc funkció egy adott útvonal gyorsítótárazásához vagy közvetlenül a root.tsx
fájlt.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"
Ezután adja hozzá a sajátját fejléc funkció ahol akarod. Ez a gyorsítótár egy órán keresztül:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};
Útválasztás újrakeverése
Sok keretrendszer hajlott a fájlrendszereken alapuló útválasztásra. Ez egy olyan technika, ahol egy kijelölt mappát használnak az alkalmazás útvonalainak meghatározására. Jellemzően speciális szintaxisuk van a dinamikus útvonalak és végpontok deklarálására. A legnagyobb különbség jelenleg a Remix és más népszerű keretrendszerek között a használhatóság beágyazott útválasztás.
Minden Remix alkalmazás a következővel kezdődik root.tsx
fájlt. Itt jelenik meg az alkalmazás teljes alapja. Itt talál néhány olyan általános HTML-elrendezést, mint a <html>
címke, a <head>
címkét, majd a <body>
címkét az alkalmazás megjelenítéséhez szükséges összetevőkkel. Az egyetlen dolog, amit itt ki kell emelni, az a <Scripts>
komponens az, ami engedélyezi a JavaScriptet a webhelyen; néhány dolog működik nélküle, de nem minden. A root.tsx
fájl szülő elrendezésként működik minden, ami a fájlon belül van routes
könyvtár, az útvonalakban minden ott jelenik meg, ahol a <Outlet/>
komponens benne van root.tsx
. Ez a beágyazott útválasztás alapja a Remixben.
Beágyazott útválasztás
Nem csak a Remixet alapította a csapat egy része ReactRouter, Az is használ React Router. Valójában azok visszahozva néhány jó dolgot a Remixről a React Routerbe. Egy összetett probléma, amelyet a Next.js és a SvelteKit karbantartói jelenleg próbálnak megoldani, a beágyazott útválasztás.
A beágyazott útválasztás eltér a hagyományos útválasztástól. Ha egy új útvonal egy új oldalra viszi a felhasználót, minden beágyazott útvonal ugyanannak az oldalnak egy külön szakasza. Lehetővé teszi a problémák szétválasztását azáltal, hogy az üzleti logikát csak azokhoz a fájlokhoz társítja, amelyeknek szükségük van rá. A Remix képes kezelni azokat a hibákat, amelyek csak az oldal azon részében találhatók, ahol a beágyazott útvonal található. Az oldalon található többi útvonal továbbra is használható, és a megszakadt útvonal releváns kontextust biztosíthat a hibához anélkül, hogy a teljes oldal összeomlana.
A Remix ezt akkor teszi meg, amikor egy gyökérfájl bekerül app/routes
Ugyanaz a neve, mint az alapfájlba betöltődő fájlok könyvtára. A gyökérfájl a elrendezés a könyvtárban lévő fájlokhoz az an <Outlet />
összetevőt, amely megmondja a Remixnek, hogy hol töltse be a többi útvonalat.
Kimeneti komponens
A <Outlet />
A komponens egy jelzés a Remix számára, hogy hol jelenítse meg a tartalmat a beágyazott útvonalakhoz. A fájlba a gyökérbe kerül app/routes
a beágyazott útvonalakkal azonos nevű könyvtárat. A következő kód a app/routes/about.tsx
fájlt, és tartalmazza a benne lévő fájlok kimenetét app/routes/about
mappa:
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 />
</>
)
}
Mappa felépítése
Bármely fájl a app/routes/
könyvtár útvonalává válik a nevének URL-címén. Egy könyvtárat is hozzáadhatunk egy index.tsx
fájlt.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsx
Ha egy útvonalnak ugyanaz a neve, mint egy könyvtáré, a megnevezett fájl a könyvtáron belüli fájlok elrendezési fájljává válik, és az elrendezési fájlnak egy Kimeneti komponens a beágyazott útvonal elhelyezéséhez.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsx
Az elrendezések úgy is létrehozhatók, hogy dupla aláhúzásjellel (__
).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsx
https://your-url.com/about
továbbra is megjeleníti a app/routes/about.tsx
fájlt, hanem azt is rendereli, ami benne van app/routes/about/index.tsx
ahol a Kimeneti komponens jelölésében van app/routes/about.tsx
.
Dinamikus útvonalak
A dinamikus útvonal olyan útvonal, amely az url-ben található információk alapján változik. Ez lehet egy blogbejegyzés neve vagy egy ügyfél-azonosító, de nem számít, mi az $
Az útvonal elejéhez hozzáadott szintaxis jelzi a Remixnek, hogy dinamikus. A név nem számít más, mint a $
előtagot.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsx
Hozd le ezeket az adatokat!
Mivel a Remix az összes adatát a szerveren jeleníti meg, nem sok olyan dolog látható, ami a React alkalmazások szabványává vált, mint pl. useState()
és a useEffect()
horgok, Remixben. Kevésbé van szükség a kliensoldali állapotra, mivel azt már kiértékelték a szerveren.
Az sem mindegy, hogy milyen típusú szervert használ az adatok lekérésére. Mivel a Remix a kérés és a válasz között helyezkedik el, és megfelelően lefordítja azt, használhatja a szabványt Web Fetch API. A Remix ezt a loader
azt a funkciót csak fut a szerveren és használja a useLoaderData()
horog az összetevőben lévő adatok megjelenítéséhez. Íme egy példa a Cat mint szolgáltatás API véletlenszerű macskakép megjelenítéséhez.
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 />
</>
)
}
Útvonal paraméterei
Dinamikus útvonalakban a következővel jelölt útvonalak $
hozzá kell férnie az URL paraméterhez a megjelenítendő adatok kezeléséhez. A loader
funkció ezekhez a params
érv.
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>
}
Egyéb Remix funkciók
A Remixnek van néhány egyéb segédfunkciója, amelyek extra funkciókat adnak a normál HTML-elemekhez és -attribútumokhoz route modul API. Minden útvonal meghatározhatja a sajátját az ilyen típusú funkciók közül.
Akció funkció
An action
A funkció lehetővé teszi, hogy extra funkciókat adjon egy űrlapművelethez a szabványos web használatával 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}`);
}
Fejlécek funkció
Bármilyen HTTP szabványos fejlécek bemehet a headers
funkció. Mivel minden útvonalnak lehet fejléce, a beágyazott útvonalakkal való ütközések elkerülése érdekében a legmélyebb útvonalat – vagy a legtöbb perjelet tartalmazó URL-t (/
) – nyer. A fejléceket is átadhatja, actionHeaders
, loaderHeaders
vagy parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}
Meta funkció
Ez a funkció beállítja a HTML-dokumentum metacímkéit. Az egyik a root.tsx
fájl alapértelmezés szerint, de ezek minden útvonalhoz frissíthetők.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};
Linkek funkció
HTML link
elemek élnek a <head>
HTML-dokumentum címkéjét, és többek között CSS-t importálnak. A links
funkciót, nem tévesztendő össze a <Link />
összetevő, lehetővé teszi a dolgok importálását azokon az útvonalakon, amelyeknek szüksége van rájuk. Így például a CSS-fájlok hatóköre behatárolható, és csak azokon az útvonalakon importálható, amelyeknek szükségük van ezekre a fájlokra. A link
elemek visszakerülnek a links()
objektumok tömbjeként funkcionál, és lehet a HtmlLinkDescriptor
tól link
API vagy PageLinkDescriptor
amely képes előre lekérni egy oldal adatait.
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" }
]
}
Útvonalak összekapcsolása
A Remix egy komponenst biztosít az alkalmazás különböző útvonalai közötti átlépéshez <Link/>
. Az ügyféloldali útválasztáshoz használja a <Link to="">Name</Link>
komponens helyett <a href="">Name</a>
Az <Link />
komponens is egy kelléket vesz prefetch
elfogadással none
alapértelmezés szerint, intent
az adatok előzetes letöltéséhez, ha a Remix észleli, hogy a felhasználó lebeg vagy fókuszba állítja a hivatkozást, ill render
amely a hivatkozás megjelenítése után azonnal lekéri az útvonal adatait.
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>
);
}
A következő lépések
Most már ismeri a Remix alapjait, és készen áll arra, hogy elkezdjen ténylegesen alkalmazásokat építeni, igaz? Remix biztosít a Viccek alkalmazás és egy Blog bemutató hogy elkezdhesse ennek az alapvető tudásnak a megvalósítását. A nulláról is indulhat, és létrehozhat egy vadonatúj Remix alkalmazást. Vagy ha készen áll a merülésre, adja meg a K-Pop Stack próba. Nagyon élveztem a Remixszel töltött időt, és szeretem, ha a webes szabványokra összpontosítok, és visszahozom az alapokhoz. Most rajtad a sor, hogy elkezdj alkotni!