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. etiketi etiketi ve ardından Uygulamayı oluşturmak için gereken bileşenleri içeren etiket. Burada belirtilmesi gereken tek şey, 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, 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 Remix'e diğer rotaları nereye yükleyeceğini söyleyen bileşen.

Çıkış bileşeni

The 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 (
    
      

        I am the parent layout. I will be on any page inside of my named directory.
      
      { /* All of my children, the files in the named directory, will go here. */ }
      
    
  )
}

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('')
  const data = await response.json()
  return {
    data
  }
}

export default function AboutLayout() {
  const cat = useLoaderData()
  return (
    
      
      
    
  )
}

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()
  return 
The url parameter is {params.tag}.
}

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, loaderHeadersya 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 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. 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: "",
      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. . İstemci tarafı yönlendirme almak için Name yerine bileşen Name. 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 (
    
  );
}

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!