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.tsxHa 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.tsxAz 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.tsxhttps://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.tsxHozd 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, loaderHeadersvagy 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!
