Olet luultavasti kuullut paljon hypeä yhdestä kehyslohkon uusimmasta lapsesta, Remixistä. Saattaa olla yllättävää, että se sai alkunsa jo vuonna 2019, mutta se oli alun perin saatavilla vain tilauspohjaisena premium-kehyksenä. Vuonna 2021 perustajat keräsivät siemenrahoitusta ja avoimen lähdekoodin puitteet, joiden avulla käyttäjät voivat alkaa käyttää Remixiä ilmaiseksi. Tulvat avautuivat ja kaikki näyttävät puhuvan siitä, hyvästä tai pahasta. Sukellaan ja katsotaan joitain Remixin perusasioita.
Remix on palvelimen "edge" ensimmäinen JavaScript-kehys. Se käyttää Reactia, ainakin toistaiseksi, käyttöliittymälle ja priorisoi sovelluksen palvelinpuolen renderöinnin reunalla. Alustat voivat ottaa palvelinpuolen koodin ja suorittaa sen muodossa palvelimettomat tai reunatoiminnot tehdä siitä halvempaa kuin perinteinen palvelin ja tuoda sen lähemmäs käyttäjiäsi. Remixin perustajat kutsuvat sitä mielellään "keskipinoksi", koska se mukauttaa palvelimen ja asiakkaan väliset pyynnöt ja vastaukset käyttöympäristöön, jolla sitä käytetään.
Remixin käyttöönotto
Koska Remix vaatii palvelimen, puhutaanpa siitä, kuinka voit ottaa sen käyttöön. Remix ei tarjoa itse palvelinta - sinä tuot palvelimen - jolloin sitä voidaan käyttää missä tahansa Node.js or DENO ympäristö, mukaan lukien Netlify Edge ja DigitalOceanin sovellusalusta. Remix itsessään on a kääntäjä, ohjelma, joka kääntää pyynnöt sille alustalle, jolla se on käynnissä. Tämä prosessi käyttää rakentaa luodaksesi käsittelijöitä palvelimelle lähetettäville pyynnöille. Sen käyttämät HTTP-käsittelijät on rakennettu Web Fetch API ja niitä pyörittää palvelimella mukauttaminen niitä alustalle, jolle ne otetaan käyttöön.
Remix pinot
Remix-pinot ovat projekteja, joissa on joitain yleisiä työkaluja, jotka on valmiiksi määritetty sinulle. Siellä on kolme virallista pinoa joita ylläpitää Remix-tiimi ja ne on kaikki nimetty musiikkilajien mukaan. Siellä on myös useita yhteisön Remix-pinoja, mukaan lukien K-Pop Stack Netlifyn Templates Teamin luoma. Tämä pino on voimakas ja sisältää a superperusta tietokanta ja todennus, myötätuuli muotoilua varten, Sypressi päästä päähän -testaus, kauniimpi koodin muotoilu, ESLint nukka ja konekirjoitusteksti staattinen kirjoitus. Katso Tara Manicsicin viesti K-Pop Stackin käyttöönotosta.
Välimuistireittejä
Vaikka Remix vaatii palvelimen, se voi silti hyödyntää Jamstack hyötyjä välimuistiin tallentamisesta. Staattinen sivusto tai staattisen sivuston sukupolvi (SSG) tarkoittaa, että kaikki sisältösi hahmonnetaan rakennusaikana ja pysyy. staattinen uuteen remonttiin asti. Sisältö on luotu valmiiksi ja se voidaan laittaa CDN:ään. Tämä tarjoaa monia etuja ja nopean sivuston latauksen loppukäyttäjälle. Remix ei kuitenkaan tee tyypillistä SSG:tä kuten muut suositut React-kehykset, mukaan lukien Next.js ja Gatsby. Voit käyttää natiivia saadaksesi joitain SSG:n etuja Cache-Control HTTP-otsikko Remixissä otsikkotoiminto välimuistiin tietyn reitin tai suoraan root.tsx tiedosto.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Lisää sitten omasi otsikkotoiminto missä haluat. Tämä tallentaa välimuistiin tunnin ajan:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Remiksausreititys
Monet puitteet ovat taipuneet tiedostojärjestelmiin perustuvaan reitittämiseen. Tämä on tekniikka, jossa sovelluksesi reittien määrittämiseen käytetään määritettyä kansiota. Niillä on yleensä erityinen syntaksi dynaamisten reittien ja päätepisteiden ilmoittamiseen. Suurin ero tällä hetkellä Remixin ja muiden suosittujen kehysten välillä on käyttökyky sisäkkäinen reititys.
Jokainen Remix-sovellus alkaa root.tsx tiedosto. Tämä on paikka, jossa sovelluksen koko pohja hahmonnetaan. Löydät täältä joitain yleisiä HTML-asetteluja, kuten <html> tag, <head> tunniste ja sitten <body> -tunniste sovelluksen hahmontamiseen tarvittavilla komponenteilla. Yksi asia, joka tässä on huomautettava, on <Scripts> komponentti mahdollistaa JavaScriptin sivustolla; Jotkut asiat toimivat ilman sitä, mutta eivät kaikki. The root.tsx tiedosto toimii yläasetteluna kaikelle tiedoston sisällä routes hakemistoon, kaikki reitit hahmonnetaan sinne, missä <Outlet/> komponentti on sisällä root.tsx. Tämä on Remixin sisäkkäisen reitityksen perusta.
Sisäkkäinen reititys
Remixin perustaja ei ollut vain osa tiimistä Reagoi reititin, se myös käyttötarkoituksiin React Router. Itse asiassa he ovat tuodaan joitain hyviä asioita Remixistä takaisin React Routeriin. Monimutkainen ongelma, jota Next.js:n ja SvelteKitin ylläpitäjät yrittävät ratkaista juuri nyt, on sisäkkäinen reititys.
Sisäkkäinen reititys on toisin kuin perinteinen reititys. Jos uusi reitti vie käyttäjän uudelle sivulle, jokainen sisäkkäinen reitti on erillinen osio samalla sivulla. Se mahdollistaa huolenaiheiden erottamisen pitämällä liiketoimintalogiikka yhdistettynä vain sitä tarvitseviin tiedostoihin. Remix pystyy käsittelemään virheet, jotka on lokalisoitu vain siihen sivun osaan, jossa sisäkkäinen reitti on. Muut sivulla olevat reitit ovat edelleen käyttökelpoisia ja katkennut reitti voi tarjota virheelle relevantin kontekstin ilman, että koko sivu kaatuu.
Remix tekee tämän, kun juuritiedosto sisään app/routes on nimeltään sama kuin tiedostohakemisto, joka ladataan perustiedoston sisään. Päätiedostosta tulee a layout hakemiston tiedostoille käyttämällä an <Outlet /> komponentti kertoo Remixille, mihin muut reitit ladataan.
Ulostulokomponentti
- <Outlet /> Komponentti on signaali Remixille siitä, missä sen pitäisi hahmontaa sisältöä sisäkkäisille reiteille. Se laitetaan tiedostoon tiedoston juureen app/routes hakemistoon, jolla on sama nimi kuin sisäkkäisillä reiteillä. Seuraava koodi menee a app/routes/about.tsx tiedosto ja sisältää ulostulon sisällä oleville tiedostoille app/routes/about kansio:
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 />
</>
)
}Kansion rakenne
Mikä tahansa tiedosto app/routes/ hakemistosta tulee reitti sen nimen URL-osoitteessa. Hakemisto voidaan lisätä myös index.tsx tiedosto.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxJos reitillä on sama nimi kuin hakemistolla, nimetystä tiedostosta tulee asettelutiedosto hakemiston sisällä oleville tiedostoille ja asettelutiedosto tarvitsee Ulostulokomponentti sijoittaaksesi sisäkkäisen reitin.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxAsetteluja voidaan luoda myös lisäämällä niiden eteen kaksoisalaviiva (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about tekee silti app/routes/about.tsx tiedostoa, mutta hahmontaa myös sen, mitä siinä on app/routes/about/index.tsx jossa Ulostulokomponentti on merkinnässä app/routes/about.tsx.
Dynaamiset reitit
Dynaaminen reitti on reitti, joka muuttuu URL-osoitteen tietojen perusteella. Se voi olla blogikirjoituksen nimi tai asiakastunnus, mutta ei väliä mikä se on $ Reitin etuosaan lisätty syntaksi ilmoittaa Remixille, että se on dynaaminen. Nimellä ei ole muuta väliä kuin $ etuliite.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxHae ne tiedot!
Koska Remix renderöi kaikki tietonsa palvelimelle, et näe monia asioita, joista on tullut React-sovelluksen standardi, kuten useState() ja useEffect() koukut, Remixissä. Asiakaspuolen tilaa tarvitaan vähemmän, koska se on jo arvioitu palvelimella.
Sillä ei myöskään ole väliä, minkä tyyppistä palvelinta käytät tietojen hakemiseen. Koska Remix on pyynnön ja vastauksen välissä ja kääntää sen asianmukaisesti, voit käyttää standardia Web Fetch API. Remix tekee tämän a loader toiminto tuo vain toimii palvelimella ja käyttää useLoaderData() koukku komponentin tietojen renderöimiseksi. Tässä on esimerkki Cat as a Service API tehdäksesi satunnaisen kissakuvan.
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 />
</>
)
}Reitin parametrit
Dynaamisilla reiteillä reitit, joissa on etuliite $ täytyy pystyä käyttämään URL-parametria käsitelläkseen hahmonnettavia tietoja. The loader toiminnolla on pääsy näihin kautta a params Perustelu.
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>
}Muut Remix-toiminnot
Remixissä on muutamia muita aputoimintoja, jotka lisäävät lisätoimintoja normaaleihin HTML-elementteihin ja -attribuutteihin reittimoduulin API. Jokainen reitti voi määrittää omat tämän tyyppiset toiminnot.
Toimintatoiminto
An action -toiminnon avulla voit lisätä lisätoimintoja lomaketoimintoon käyttämällä tavallista verkkoa 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}`);
}Otsikkotoiminto
mitään HTTP-standardiotsikot voi mennä a headers toiminto. Koska jokaisella reitillä voi olla otsikko, jotta vältetään ristiriidat sisäkkäisten reittien kanssa, syvin reitti tai URL-osoite, jossa on eniten eteenpäin suuntautuvat vinoviivat (/) - voittaa. Voit myös saada otsikot läpi, actionHeaders, loaderHeaderstai parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Meta-toiminto
Tämä toiminto asettaa sisällönkuvauskentät HTML-asiakirjalle. Yksi on asetettu root.tsx oletuksena, mutta ne voidaan päivittää jokaiselle reitille.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Linkit-toiminto
HTML link elementit elävät <head> HTML-dokumentin tunnisteen ja tuovat muun muassa CSS:ää. The links toiminto, jota ei pidä sekoittaa <Link /> komponentti, voit tuoda asioita vain niillä reiteillä, jotka niitä tarvitsevat. Joten esimerkiksi CSS-tiedostot voidaan rajata ja tuoda vain reiteillä, jotka tarvitsevat kyseiset tiedostot. The link elementit palautetaan kohteesta a links() toimivat objektien joukkona ja voivat olla joko a HtmlLinkDescriptor mistä link API tai PageLinkDescriptor joka voi esihakua sivun tiedot.
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" }
]
}Linkitys reittien välillä
Remix tarjoaa komponentin siirtyäksesi sovelluksesi eri reittien välillä <Link/>. Jos haluat saada asiakaspuolen reitityksen, käytä <Link to="">Name</Link> komponentin sijaan <a href="">Name</a>. <Link /> komponentti ottaa myös prop of prefetch hyväksyntöjen kanssa none oletuksena, intent esihakeaksesi tiedot, jos Remix havaitsee, että käyttäjä vie hiiren osoittimeen tai tarkentaa linkkiä, tai render joka hakee reitin tiedot heti, kun linkki on renderöity.
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>
);
}Seuraavat vaiheet
Nyt tiedät Remixin perusteet ja olet valmis aloittamaan sovellusten rakentamisen, eikö niin? Remix tarjoaa a Vitsit sovellus ja Blogin opetusohjelma jotta pääset aloittamaan tämän perustiedon toteuttamisen. Voit myös aloittaa alusta ja luoda upouuden Remix-sovelluksen. Tai jos olet valmis sukeltamaan, anna K-Pop Stack yritys. Olen todella nauttinut ajastani Remixin parissa ja rakastan keskittymistä verkkostandardeihin ja sen palauttamiseen perusasioihin. Nyt on sinun vuorosi aloittaa luominen!
