Probabil ați auzit multă hype în jurul unuia dintre cei mai noi copii din cadrul blocului, Remix. Poate fi surprinzător că a început în 2019, dar inițial a fost disponibil doar ca cadru premium bazat pe abonament. În 2021, fondatorii au strâns fonduri de bază și au deschis cadrul pentru a permite utilizatorilor să înceapă să folosească Remix gratuit. S-au deschis porțile și toată lumea pare să vorbească despre asta, bine sau rău. Să ne aprofundăm și să privim câteva dintre elementele de bază ale Remixului.
Remix este un cadru JavaScript primul server „de margine”. Folosește React, cel putin pentru moment, pentru front-end și acordă prioritate redării aplicației pe partea de server pe margine. Platformele pot lua codul de pe server și îl pot rula ca funcții serverless sau edge făcându-l mai ieftin decât un server tradițional și apropiindu-l de utilizatorii dvs. Fondatorilor Remix le place să-l numească un cadru „centr stack”, deoarece adaptează cererile și răspunsurile făcute între server și client pentru platforma pe care rulează.
Implementarea Remixului
Deoarece Remix necesită un server, să vorbim despre cum îl puteți implementa. Remix nu oferă serverul în sine - tu aduci serverul - permițându-i să fie rulat în orice Node.js or Deno mediu, inclusiv Netlify Edge și Platforma de aplicații DigitalOcean. Remixul în sine este un compilator, un program care traduce cererile pentru platforma pe care rulează. Acest proces folosește esbuild pentru a crea handlere pentru cererile către server. Managerii HTTP pe care le folosește sunt construite pe API-ul Web Fetch și sunt rulate pe server de de adaptare pentru platforma pe care vor fi desfășurați.
Remix stive
Stivele de remixuri sunt proiecte care au unele instrumente comune care vin preconfigurate pentru tine. Sunt trei stive oficiale care sunt întreținute de echipa Remix și toate sunt numite după genuri muzicale. Există, de asemenea, o serie de stive de Remix comunitare, inclusiv Stiva K-Pop creat de echipa de șabloane de la Netlify. Această stivă este o centrală puternică și include un Supabaza baza de date si autentificare, tailwind pentru coafare, Chiparos testare end-to-end, mai frumos formatarea codului, ESLint scame, și manuscris dactilografiat tastare statică. Consultați postarea Tarei Manicsic despre implementarea stivei K-Pop.
Memorarea în cache a rutelor
Chiar dacă Remix necesită un server, poate profita totuși de Jamstack beneficii prin memorarea în cache a rutelor. Un site static sau o generare de site static (SSG) este atunci când tot conținutul dvs. este redat în timpul construirii și rămâne static până la o altă reconstrucție. Conținutul este pre-generat și poate fi pus pe un CDN. Acest lucru oferă multe beneficii și încărcare rapidă a site-ului pentru utilizatorul final. Cu toate acestea, Remix nu face SSG tipic ca alte framework-uri React populare, inclusiv Next.js și Gatsby. Pentru a obține unele dintre beneficiile SSG, puteți folosi nativul Antet HTTP Cache-Control într-un Remix funcția antetelor pentru a stoca în cache o anumită rută sau direct în root.tsx fișier.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Apoi adăugați în dvs funcția antetelor unde vrei tu. Aceasta se păstrează în cache timp de o oră:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Remixarea rutare
O mulțime de cadre s-au orientat către rutarea bazată pe sisteme de fișiere. Aceasta este o tehnică în care un folder desemnat este utilizat pentru a defini rutele pentru aplicația dvs. De obicei, au o sintaxă specială pentru declararea rutelor dinamice și a punctelor finale. Cea mai mare diferență în prezent între Remix și alte cadre populare este capacitatea de utilizare rutare imbricată.
Fiecare aplicație Remix începe cu root.tsx fişier. Aici este redată întreaga bază a aplicației. Veți găsi aici o parte din aspectul HTML comun, cum ar fi <html> eticheta, <head> eticheta, iar apoi <body> etichetați cu componentele necesare pentru redarea aplicației. Singurul lucru de subliniat aici este <Scripts> componenta este cea care activează JavaScript pe site; unele lucruri vor funcționa fără el, dar nu totul. The root.tsx fișierul acționează ca un aspect părinte pentru tot ce se află în interiorul routes director, totul din rute este redat acolo unde <Outlet/> componenta este in root.tsx. Aceasta este baza de rutare imbricată în Remix.
Dirijare imbricată
Nu numai că Remix a fost fondat de o parte din echipa din ReactRouter, de asemenea utilizări React Router. De fapt, ei sunt aducând unele dintre lucrurile bune despre Remix înapoi la React Router. O problemă complexă pe care menținătorii Next.js și SvelteKit încearcă să o rezolve chiar acum este rutarea imbricată.
Rutarea imbricată este spre deosebire de rutarea tradițională. Acolo unde o rută nouă ar duce un utilizator la o pagină nouă, fiecare rută imbricată este o secțiune separată a aceleiași pagini. Permite separarea preocupărilor prin păstrarea logicii de afaceri asociate doar cu fișierele care au nevoie de ea. Remix este capabil să gestioneze erorile localizate doar în secțiunea paginii în care se află ruta imbricată. Celelalte rute de pe pagină sunt încă utilizabile, iar ruta care s-a rupt poate oferi context relevant pentru eroare fără ca întreaga pagină să se prăbușească.
Remix face acest lucru atunci când este introdus un fișier rădăcină app/routes este numit la fel ca un director de fișiere care se va încărca în interiorul fișierului de bază. Fișierul rădăcină devine a aspect pentru fișierele din director folosind un <Outlet /> componentă pentru a-i spune lui Remix unde să încarce celelalte rute.
Componenta de iesire
<Outlet /> Componenta este un semnal către Remix pentru unde ar trebui să redeze conținut pentru rutele imbricate. Este pus în fișierul de la rădăcina fișierului app/routes director cu același nume ca rutele imbricate. Următorul cod merge în a app/routes/about.tsx fișier și include priza pentru fișierele din interior app/routes/about pliant:
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 />
</>
)
}Structura folderului
Orice fișier din app/routes/ directorul devine o rută la adresa URL a numelui său. Un director poate fi adăugat și cu un index.tsx fișier.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxDacă o rută are același nume ca un director, fișierul numit devine un fișier de aspect pentru fișierele din director și fișierul de aspect are nevoie de un Componenta de iesire pentru a plasa traseul imbricat în.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxAspectele pot fi create și prin prefixarea lor cu o liniuță de subliniere dublă (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about va reda în continuare app/routes/about.tsx fișier, dar va reda și orice se află în app/routes/about/index.tsx unde Componenta de iesire este în marcajul de app/routes/about.tsx.
Trasee dinamice
O rută dinamică este o rută care se modifică pe baza informațiilor din adresa URL. Acesta poate fi numele unei postări de blog sau un ID de client, dar indiferent de ce este acesta $ Sintaxa adăugată în partea din față a traseului semnalează lui Remix că este dinamică. Numele nu contează în afară de $ prefix.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxPreluați acele date!
Deoarece Remix redă toate datele sale pe server, nu vedeți multe dintre lucrurile care au devenit standardul unei aplicații React, cum ar fi useState() și useEffect() hooks, în Remix. Există mai puțină nevoie de starea clientului, deoarece a fost deja evaluată pe server.
De asemenea, nu contează ce tip de server utilizați pentru preluarea datelor. Deoarece Remix se află între cerere și răspuns și îl traduce în mod corespunzător, puteți utiliza standardul API-ul Web Fetch. Remix face acest lucru într-un loader functia care afară rulează pe server și folosește useLoaderData() cârlig pentru a reda datele din componentă. Iată un exemplu folosind Cat as a Service API pentru a reda o imagine aleatorie a pisicii.
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 />
</>
)
}Parametrii rutei
În rutele dinamice, traseele prefixate cu $ trebuie să poată accesa parametrul URL pentru a gestiona acele date care ar trebui redate. The loader funcția are acces la acestea prin a params a susținut.
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>
}Alte funcții Remix
Remix are câteva alte funcții de ajutor care adaugă funcționalitate suplimentară elementelor și atributelor HTML normale din API-ul modulului de rută. Fiecare rută își poate defini propriile tipuri de funcții.
Funcția de acțiune
An action funcția vă permite să adăugați funcționalitate suplimentară unei acțiuni de formular folosind web-ul standard API FormData.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Funcția antete
Orice Antete standard HTTP poate intra într-o headers funcţie. Deoarece fiecare rută poate avea un antet, pentru a evita conflictele cu rutele imbricate, cea mai profundă rută - sau adresa URL cu cele mai multe bare oblice (/) — câștigă. De asemenea, puteți trece anteturile, actionHeaders, loaderHeaders, Sau parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Funcția meta
Această funcție va seta metaetichetele pentru documentul HTML. Unul este plasat în root.tsx fișier în mod implicit, dar pot fi actualizate pentru fiecare rută.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Funcția de legături
HTML link elementele trăiesc în <head> eticheta unui document HTML și importă CSS, printre altele. The links funcția, a nu fi confundată cu <Link /> component, vă permite să importați doar lucruri pe rutele care au nevoie de ele. Deci, de exemplu, fișierele CSS pot fi acoperite și importate numai pe rutele care au nevoie de acele fișiere specifice. The link elementele sunt returnate de la a links() funcţionează ca o matrice de obiecte şi poate fi fie a HtmlLinkDescriptor de la link API sau un PageLinkDescriptor care poate prelua datele pentru o pagină.
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" }
]
}Legătura între rute
Remix oferă o componentă pentru a merge între diferitele rute din aplicația dvs. numite <Link/>. Pentru a obține rutarea pe partea client, utilizați <Link to="">Name</Link> componentă în loc de <a href="">Name</a>. <Link /> componenta ia si o recuzita de prefetch cu acceptă none în mod implicit, intent pentru a prelua datele în prealabil dacă Remix detectează că utilizatorul trece cu mouse-ul sau concentrează linkul sau render care va prelua datele rutei de îndată ce legătura este redată.
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>
);
}Pasii urmatori
Acum cunoașteți elementele de bază ale Remixului și sunteți gata să începeți să construiți aplicații, nu? Remixul oferă o Aplicația de glume și Tutorial pe blog pentru a începe să implementați aceste cunoștințe de bază. De asemenea, puteți începe de la zero și puteți crea o aplicație Remix nou-nouță. Sau, dacă sunteți gata să vă scufundați, dați Stiva K-Pop o incercare. Mi-a plăcut foarte mult timpul petrecut cu Remix și îmi place concentrarea pe standardele web și readucerea lui la elementele de bază. Acum este rândul tău să începi să creezi!
