Muhtemelen çerçeve bloğundaki en yeni çocuklardan biri olan Remix hakkında çok fazla yutturmaca duymuşsunuzdur. 2019'da yeniden başlaması şaşırtıcı olabilir, ancak başlangıçta yalnızca abonelik tabanlı bir premium çerçeve olarak mevcuttu. 2021'de kurucular, kullanıcıların Remix'i ücretsiz kullanmaya başlamasına izin vermek için tohum finansmanı sağladı ve çerçeveyi açık kaynaklı hale getirdi. Bent kapakları açıldı ve herkes bunun hakkında iyi ya da kötü konuşuyor gibi görünüyor. Gelin ve Remix'in bazı temellerine bakalım.
Remix, bir sunucu “uç” ilk JavaScript çerçevesidir. React'i kullanır, en azından şimdilik, ön uç için ve uygulamanın sunucu tarafında oluşturulmasına öncelik verir sınırda. Platformlar sunucu tarafı kodunu alabilir ve şu şekilde çalıştırabilir: sunucusuz veya uç işlevler geleneksel bir sunucudan daha ucuz hale getirmek ve kullanıcılarınıza daha yakın hale getirmek. Remix kurucuları, sunucu ile istemci arasında yapılan istekleri ve yanıtları çalıştırıldığı platforma uyarladığı için buna "merkez yığını" çerçevesi adını vermeyi seviyor.
Remix'i Dağıtma
Remix bir sunucu gerektirdiğinden, onu nasıl dağıtabileceğinizden bahsedelim. Remix sunucunun kendisini sağlamaz - sunucuyu siz getirirsiniz - herhangi bir şekilde çalıştırılmasına izin verir. node.js or Deno dahil olmak üzere çevre Netlify Edge ve DigitalOcean'ın Uygulama Platformu. Remix'in kendisi bir derleyici, üzerinde çalıştığı platform için istekleri çeviren bir program. Bu süreç kullanır inşa etmek sunucuya yapılan istekler için işleyiciler oluşturmak için. Kullandığı HTTP işleyicileri, Web Getirme API'si ve sunucuda çalıştırılır uyarlanması konuşlandırılacakları platform için.
Remiks yığınları
Remix yığınları, sizin için önceden yapılandırılmış olarak gelen bazı ortak araçlara sahip projelerdir. Var üç resmi yığın Remix ekibi tarafından sürdürülür ve hepsi müzik türlerinden sonra adlandırılır. Ayrıca, aşağıdakiler de dahil olmak üzere bir dizi topluluk Remix yığını vardır. K-Pop Yığını Netlify'daki Şablonlar Ekibi tarafından oluşturulmuştur. Bu yığın bir güç merkezidir ve bir supabaz veritabanı ve kimlik doğrulama, Tailwind stil için, Selvi uçtan uca test, Daha güzel kod biçimlendirme, ESLint tiftiklenme ve daktilo ile yazılmış yazı statik yazma. Tara Manicsic'in K-Pop Yığını dağıtma konusundaki gönderisine göz atın.
Önbelleğe alma yolları
Remix bir sunucu gerektirse de, yine de aşağıdakilerden yararlanabilir. çöp yığını yolları önbelleğe alarak fayda sağlar. Statik site veya statik site oluşturma (SSG), tüm içeriğinizin oluşturma zamanında oluşturulduğu ve kaldığı zamandır. statik başka bir yeniden yapılanmaya kadar. İçerik önceden oluşturulmuştur ve bir CDN'ye yerleştirilebilir. Bu, son kullanıcı için birçok avantaj ve hızlı site yüklemeleri sağlar. Ancak Remix, Next.js ve Gatsby dahil olmak üzere diğer popüler React çerçeveleri gibi tipik SSG yapmaz. SSG'nin bazı avantajlarından yararlanmak için yerel Önbellek Kontrolü HTTP başlığı bir remixte başlıklar işlevi belirli bir rotayı önbelleğe almak için veya doğrudan root.tsx
dosyası.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"
Sonra ekleyin başlıklar işlevi nereye istersen. Bu, bir saat boyunca önbelleğe alınır:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};
Yönlendirmeyi yeniden karıştırma
Birçok çerçeve, dosya sistemlerine dayalı yönlendirmeye yöneldi. Bu, uygulamanız için yolları tanımlamak için belirlenmiş bir klasörün kullanıldığı bir tekniktir. Tipik olarak dinamik rotaları ve bitiş noktalarını bildirmek için özel sözdizimlerine sahiptirler. Şu anda Remix ve diğer popüler çerçeveler arasındaki en büyük fark, kullanma yeteneğidir. iç içe yönlendirme.
Her Remix uygulaması ile başlar root.tsx
dosya. Bu, uygulamanın tüm tabanının oluşturulduğu yerdir. Burada, aşağıdaki gibi yaygın HTML düzenlerinden bazılarını bulacaksınız. <html>
etiketi <head>
etiketi ve ardından <body>
Uygulamayı oluşturmak için gereken bileşenleri içeren etiket. Burada belirtilmesi gereken tek şey, <Scripts>
bileşen, sitede JavaScript'i etkinleştiren şeydir; bazı şeyler onsuz çalışır, ama her şey değil. bu root.tsx
dosya, içindeki her şey için bir üst düzen görevi görür. routes
dizinde, rotalardaki her şey, <Outlet/>
bileşen root.tsx
. Bu, Remix'teki iç içe yönlendirmenin temelidir.
iç içe yönlendirme
Remix sadece bazı ekipler tarafından kurulmamıştır. React Yönlendirici, ayrıca kullanım Reaksiyon Yönlendiricisi. Aslında, onlar Remix ile ilgili bazı iyi şeyleri React Router'a geri getirmek. Next.js ve SvelteKit bakımcılarının şu anda çözmeye çalıştığı karmaşık bir sorun, iç içe yönlendirmedir.
İç içe yönlendirme, geleneksel yönlendirmeden farklıdır. Yeni bir rotanın kullanıcıyı yeni bir sayfaya götüreceği yerde, iç içe geçmiş her rota aynı sayfanın ayrı bir bölümüdür. İş mantığını yalnızca ihtiyaç duyan dosyalarla ilişkilendirerek endişelerin ayrılmasını sağlar. Remix, sayfanın yalnızca iç içe rotanın bulunduğu bölümünde yerelleştirilmiş hataları işleyebilir. Sayfadaki diğer rotalar hala kullanılabilir durumdadır ve kopan rota, tüm sayfa çökmeden hatayla ilgili bağlam sağlayabilir.
Remix, bir kök dosya içindeyken bunu yapar. app/routes
temel dosyanın içine yüklenecek bir dosya dizini ile aynı şekilde adlandırılır. Kök dosya bir olur düzen kullanarak dizindeki dosyalar için <Outlet />
Remix'e diğer rotaları nereye yükleyeceğini söyleyen bileşen.
Çıkış bileşeni
The <Outlet />
Bileşen, iç içe geçmiş rotalar için içeriği nerede oluşturması gerektiğine dair Remix'e bir sinyaldir. Dosyanın kökündeki dosyaya konur. app/routes
iç içe rotalarla aynı ada sahip dizin. Aşağıdaki kod bir app/routes/about.tsx
dosya ve içindeki dosyaların çıkışını içerir app/routes/about
Klasör:
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 />
</>
)
}
Klasör yapısı
içindeki herhangi bir dosya app/routes/
dizin, adının URL'sinde bir yol haline gelir. Bir dizin de eklenebilir. index.tsx
dosyası.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsx
Bir rota, bir dizinle aynı ada sahipse, adlandırılmış dosya, dizin içindeki dosyalar için bir yerleşim dosyası olur ve yerleşim dosyasının bir dizine ihtiyacı vardır. Çıkış bileşeni iç içe rotayı yerleştirmek için.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsx
Düzenler, önlerine çift alt çizgi () eklenerek de oluşturulabilir.__
).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsx
https://your-url.com/about
yine de işleyecek app/routes/about.tsx
dosya, ama aynı zamanda içinde ne varsa app/routes/about/index.tsx
burada Çıkış bileşeni işaretlemesinde app/routes/about.tsx
.
Dinamik Rotalar
Dinamik rota, url'deki bilgilere göre değişen bir rotadır. Bu, bir blog gönderisinin adı veya bir müşteri kimliği olabilir, ancak ne olursa olsun $
Rotanın önüne eklenen sözdizimi, Remix'e dinamik olduğunu bildirir. isim dışında önemli değil $
önek.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsx
Bu verileri getir!
Remix tüm verilerini sunucuda oluşturduğundan, bir React uygulamasının standardı haline gelen pek çok şeyi görmezsiniz, örneğin: useState()
ve useEffect()
kancalar, Remix'te. Sunucuda zaten değerlendirildiği için istemci tarafı durumuna daha az ihtiyaç vardır.
Ayrıca, veri almak için ne tür bir sunucu kullandığınızın önemi yoktur. Remix, istek ve yanıt arasında oturduğu ve uygun şekilde çevirdiği için standardı kullanabilirsiniz. Web Getirme API'si. Remix bunu bir loader
işlevi bir tek sunucuda çalışır ve useLoaderData()
bileşendeki verileri işlemek için kanca. İşte kullanarak bir örnek Hizmet API'si Olarak Kedi rastgele bir kedi görüntüsü oluşturmak için.
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 />
</>
)
}
Rota parametreleri
Dinamik rotalarda, ön ekli rotalar $
işlenmesi gereken verileri işlemek için URL parametresine erişebilmeniz gerekir. bu loader
işlevin bunlara bir aracılığıyla erişimi vardır. params
argüman.
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>
}
Diğer Remiks işlevleri
Remix'te normal HTML öğelerine ve özniteliklere ekstra işlevsellik ekleyen birkaç yardımcı işlev daha vardır. rota modülü API'si. Her rota, bu tür işlevlerden kendi tanımını yapabilir.
Eylem işlevi
An action
işlev, standart web'i kullanarak bir form eylemine ekstra işlevsellik eklemenize olanak tanır. FormData API'si.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}
Başlıklar işlevi
herhangi HTTP standart başlıkları bir girebilir headers
işlev. Her rotanın bir başlığı olabileceğinden, iç içe geçmiş rotalarla, en derin rotayla veya en eğik çizgiye sahip URL'yle (/
) - kazanır. Ayrıca başlıkların geçmesini sağlayabilirsiniz, actionHeaders
, loaderHeaders
ya da parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}
meta işlev
Bu işlev, HTML belgesi için meta etiketleri ayarlayacaktır. Bir root.tsx
varsayılan olarak dosyadır, ancak her rota için güncellenebilirler.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};
Bağlantılar işlevi
HTML link
elementler yaşar <head>
bir HTML belgesinin etiketidir ve diğer şeylerin yanı sıra CSS'yi içe aktarırlar. bu links
işlevi ile karıştırılmamalıdır. <Link />
bileşen, yalnızca ihtiyaç duyulan rotalardaki şeyleri içe aktarmanıza olanak tanır. Bu nedenle, örneğin, CSS dosyalarının kapsamı belirlenebilir ve yalnızca bu belirli dosyalara ihtiyaç duyan rotalarda içe aktarılabilir. bu link
elemanlar bir links()
nesneler dizisi olarak işlev görür ve HtmlLinkDescriptor
itibaren link
API ya da PageLinkDescriptor
bu, bir sayfanın verilerini önceden getirebilir.
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" }
]
}
Rotalar arasında bağlantı kurma
Remix, uygulamanızda adı verilen farklı yollar arasında gitmek için bir bileşen sağlar. <Link/>
. İstemci tarafı yönlendirme almak için <Link to="">Name</Link>
yerine bileşen <a href="">Name</a>
. <Link />
bileşen ayrıca bir destek alır prefetch
kabul eden none
varsayılan olarak, intent
Remix, kullanıcının bağlantının üzerine geldiğini veya bağlantıya odaklandığını tespit ederse verileri önceden getirmek için veya render
bu, bağlantı oluşturulur oluşturulmaz rotanın verilerini getirecektir.
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>
);
}
Sonraki adımlar
Artık Remix'in temellerini biliyorsunuz ve aslında uygulamalar oluşturmaya başlamaya hazırsınız, değil mi? Remix sağlar Şakalar uygulaması ve Blog eğitimi bu temel bilgiyi uygulamaya başlamanızı sağlamak için. Ayrıca sıfırdan başlayabilir ve yepyeni bir Remix uygulaması oluşturabilirsiniz. Veya dalmaya hazırsanız, K-Pop Yığını bir deneme. Remix ile geçirdiğim zamandan gerçekten keyif aldım ve web standartlarına odaklanmayı ve onu temellere geri getirmeyi seviyorum. Şimdi yaratmaya başlama sırası sizde!