Dasar-dasar Kecerdasan Data Remix PlatoBlockchain. Pencarian Vertikal. Ai.

Dasar-dasar Remix

Stempel Waktu: 13 September 2022 8

Anda mungkin pernah mendengar banyak hype tentang salah satu anak terbaru di blok framework, Remix. Mungkin mengejutkan bahwa ini dimulai pada tahun 2019, tetapi pada awalnya hanya tersedia sebagai kerangka kerja premium berbasis langganan. Pada tahun 2021, para pendiri mengumpulkan dana awal dan open source kerangka kerja untuk memungkinkan pengguna mulai menggunakan Remix secara gratis. Pintu air terbuka dan semua orang sepertinya membicarakannya, baik atau buruk. Mari selami dan lihat beberapa dasar Remix.

Remix adalah kerangka kerja JavaScript pertama "tepi" server. Ini menggunakan Bereaksi, setidaknya untuk sekarang, untuk front end dan memprioritaskan rendering sisi server aplikasi di tepi. Platform dapat mengambil kode sisi server dan menjalankannya sebagai fungsi tanpa server atau tepi membuatnya lebih murah daripada server tradisional dan membuatnya lebih dekat dengan pengguna Anda. Pendiri Remix suka menyebutnya sebagai kerangka kerja "pusat tumpukan" karena mengadaptasi permintaan dan tanggapan yang dibuat antara server dan klien untuk platform yang dijalankannya.

Dasar-dasar Remix

Menyebarkan Remix

Karena Remix membutuhkan server, mari kita bicara tentang bagaimana Anda dapat menerapkannya. Remix tidak menyediakan server itu sendiri — Anda membawa server — memungkinkan untuk dijalankan di mana saja Node.js or Deno lingkungan, termasuk Tepi Netlify dan Platform Aplikasi DigitalOcean. Remix itu sendiri adalah penyusun, sebuah program yang menerjemahkan permintaan untuk platform yang dijalankannya. Proses ini menggunakan membangun untuk membuat penangan untuk permintaan ke server. Penangan HTTP yang digunakannya dibangun di atas API Ambil Web dan dijalankan di server oleh beradaptasi mereka untuk platform tempat mereka akan ditempatkan.

Tumpukan remix

Tumpukan Remix adalah proyek yang memiliki beberapa alat umum yang telah dikonfigurasikan sebelumnya untuk Anda. Ada tiga tumpukan resmi yang dikelola oleh tim Remix dan semuanya dinamai genre musik. Ada juga sejumlah tumpukan Remix komunitas termasuk Tumpukan K-Pop dibuat oleh Tim Template di Netlify. Tumpukan ini adalah pembangkit tenaga listrik dan termasuk supabase basis data dan otentikasi, Tailwind untuk penataan, Cypress pengujian ujung ke ujung, Lebih cantik pemformatan kode, ESLint serat, dan TypeScript mengetik statis. Lihat posting Tara Manicsic tentang menyebarkan K-Pop Stack.

Rute cache

Meskipun Remix membutuhkan server, Remix tetap dapat memanfaatkan tumpukan jam manfaat dengan rute caching. Situs statis atau pembuatan situs statis (SSG) adalah saat semua konten Anda dirender pada waktu pembuatan dan tetap statis sampai yang lain membangun kembali. Konten sudah dibuat sebelumnya dan dapat dimasukkan ke CDN. Ini memberikan banyak manfaat dan pemuatan situs yang cepat bagi pengguna akhir. Namun, Remix tidak melakukan SSG biasa seperti kerangka kerja React populer lainnya, termasuk Next.js dan Gatsby. Untuk mendapatkan beberapa manfaat SSG, Anda dapat menggunakan yang asli Header HTTP Kontrol Cache dalam sebuah Remix fungsi header untuk men-cache rute tertentu atau langsung di root.tsx file.

[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

Kemudian tambahkan Anda fungsi header di mana Anda menginginkannya. Ini cache selama satu jam:

export function headers() {
  return {
    "Cache-Control": "public, s-maxage=360",
  };
};

Perutean remix

Banyak kerangka kerja yang condong ke perutean berdasarkan sistem file. Ini adalah teknik di mana folder yang ditunjuk digunakan untuk menentukan rute untuk aplikasi Anda. Mereka biasanya memiliki sintaks khusus untuk mendeklarasikan rute dinamis dan titik akhir. Perbedaan terbesar saat ini antara Remix dan kerangka kerja populer lainnya adalah kemampuan untuk menggunakan routing bersarang.

Setiap aplikasi Remix dimulai dengan root.tsx mengajukan. Di sinilah seluruh dasar aplikasi dirender. Anda akan menemukan beberapa tata letak HTML umum di sini seperti <html> tag, itu <head> tag, lalu <body> tag dengan komponen yang diperlukan untuk merender aplikasi. Satu hal yang perlu ditunjukkan di sini adalah <Scripts> komponen yang mengaktifkan JavaScript di situs; beberapa hal akan berhasil tanpanya, tetapi tidak semuanya. Itu root.tsx file bertindak sebagai tata letak induk untuk semua yang ada di dalam routes direktori, semua yang ada di rute dirender di mana <Outlet/> komponen ada di root.tsx. Ini adalah dasar perutean bersarang di Remix.

Perutean bersarang

Remix tidak hanya didirikan oleh beberapa tim dari Bereaksi Router, juga kegunaan Bereaksi Router. Faktanya, mereka adalah membawa beberapa hal baik tentang Remix kembali ke React Router. Masalah kompleks yang coba dipecahkan oleh pengelola Next.js dan SvelteKit saat ini adalah perutean bersarang.

Perutean bersarang tidak seperti perutean tradisional. Di mana rute baru akan membawa pengguna ke halaman baru, setiap rute bersarang adalah bagian terpisah dari halaman yang sama. Ini memungkinkan pemisahan masalah dengan menjaga logika bisnis hanya terkait dengan file yang membutuhkannya. Remix mampu menangani kesalahan yang dilokalkan hanya ke bagian halaman tempat rute bersarang berada. Rute lain pada halaman masih dapat digunakan dan rute yang rusak dapat memberikan konteks yang relevan dengan kesalahan tanpa seluruh halaman mogok.

Remix melakukan ini ketika file root masuk app/routes dinamai sama dengan direktori file yang akan dimuat di dalam file dasar. File root menjadi tata ruang untuk file dalam direktori dengan menggunakan an <Outlet /> komponen untuk memberi tahu Remix tempat memuat rute lain.

Komponen outlet

Grafik <Outlet /> Komponen adalah sinyal ke Remix untuk merender konten untuk rute bersarang. Itu dimasukkan ke dalam file di root app/routes direktori dengan nama yang sama dengan rute bersarang. Kode berikut masuk a app/routes/about.tsx file dan termasuk outlet untuk file di dalamnya app/routes/about folder:

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 />
    </>
  )
}

Struktur folder

File apa saja di app/routes/ direktori menjadi rute di URL namanya. Direktori juga dapat ditambahkan dengan index.tsx file.

app/
├── routes/
│   │
│   └── blog
|   |   ├── index.tsx ## The /blog route
│   └── about.tsx  ## The /about route
│   ├── index.tsx  ## The / or home route
└── root.tsx

Jika rute memiliki nama yang sama dengan direktori, file bernama menjadi file tata letak untuk file di dalam direktori dan file tata letak memerlukan Komponen outlet untuk menempatkan rute bersarang di.

app/
├── routes/
│   │
│   └── about
│   │   ├── index.tsx
│   ├── about.tsx ## this is a layout for /about/index.tsx
│   ├── index.tsx
└── root.tsx

Tata letak juga dapat dibuat dengan mengawalinya dengan garis bawah ganda (__).

app/
├── routes/
│   │
│   └── about
│   │   ├── index.tsx
│   ├── index.tsx
│   ├── about.tsx
│   ├── __blog.tsx ## this is also a layout
└── root.tsx

https://your-url.com/about masih akan membuat app/routes/about.tsx file, tetapi juga akan membuat apa pun yang ada di app/routes/about/index.tsx dimana Komponen outlet ada di markup app/routes/about.tsx.

Rute Dinamis

Rute dinamis adalah rute yang berubah berdasarkan informasi di url. Itu mungkin nama posting blog atau id pelanggan, tetapi tidak peduli apa itu $ sintaks ditambahkan ke depan sinyal rute ke Remix yang dinamis. Nama tidak masalah selain $ awalan.

app/
├── routes/
│   │
│   └── about
│   │   ├── $id.tsx
│   │   ├── index.tsx
│   ├── about.tsx ## this is a layout for /about/index.tsx
│   ├── index.tsx
└── root.tsx

Ambil data itu!

Karena Remix merender semua datanya di server, Anda tidak melihat banyak hal yang telah menjadi standar aplikasi React, seperti useState() dan useEffect() kait, di Remix. Ada lebih sedikit kebutuhan untuk status sisi klien karena telah dievaluasi di server.

Juga tidak masalah jenis server apa yang Anda gunakan untuk mengambil data. Karena Remix berada di antara permintaan dan respons dan menerjemahkannya dengan tepat, Anda dapat menggunakan standar API Ambil Web. Remix melakukan ini dalam a loader fungsi itu hanya berjalan di server dan menggunakan useLoaderData() hook untuk merender data dalam komponen. Berikut adalah contoh menggunakan Cat sebagai API Layanan untuk membuat gambar kucing acak.

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 />
    </>
  )
}

Parameter rute

Dalam rute dinamis, rute diawali dengan $ harus dapat mengakses parameter URL untuk menangani data yang harus dirender. Itu loader fungsi memiliki akses ke ini melalui a params argumen.

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>
}

Fungsi Remix lainnya

Remix memiliki beberapa fungsi pembantu lain yang menambahkan fungsionalitas ekstra ke elemen dan atribut HTML normal di API modul rute. Setiap rute dapat menentukan sendiri jenis fungsi ini.

Fungsi aksi

An action fungsi memungkinkan Anda untuk menambahkan fungsionalitas ekstra ke tindakan formulir menggunakan web standar API Data Formulir.

export async function action({ request }) {
  const body = await request.formData();
  const todo = await fakeCreateTodo({
      title: body.get("title"),
  });
  return redirect(`/todos/${todo.id}`);
}

Fungsi header

Apa saja Header standar HTTP bisa masuk headers fungsi. Karena setiap rute dapat memiliki header, untuk menghindari konflik dengan rute bersarang, rute terdalam — atau URL dengan garis miring paling depan (/) — menang. Anda juga bisa melewati header, actionHeaders, loaderHeaders, atau parentHeaders

export function headers({
  actionHeaders,
  loaderHeaders,
  parentHeaders,
}) {
  return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
  };
}

Fungsi meta

Fungsi ini akan mengatur meta tag untuk dokumen HTML. Salah satunya diatur dalam root.tsx file secara default, tetapi mereka dapat diperbarui untuk setiap rute.

export function meta() {
  return {
    title: "Your page title",
    description: "A new description for each route.",
  };
};

HTML link elemen hidup di <head> tag dokumen HTML dan mereka mengimpor CSS, antara lain. Itu links fungsi, jangan bingung dengan <Link /> komponen, memungkinkan Anda untuk hanya mengimpor barang di rute yang membutuhkannya. Jadi, misalnya, file CSS dapat dicakup dan hanya diimpor pada rute yang memerlukan file spesifik tersebut. Itu link elemen dikembalikan dari a links() berfungsi sebagai array objek dan dapat berupa HtmlLinkDescriptor dari link API atau PageLinkDescriptor yang dapat mengambil data lebih dulu untuk sebuah halaman.

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" }
  ]
}

Menghubungkan antar rute

Remix menyediakan komponen untuk berpindah di antara berbagai rute di aplikasi Anda yang disebut <Link/>. Untuk mendapatkan perutean sisi klien, gunakan <Link to="">Name</Link> komponen bukannya <a href="">Name</a>. itu <Link /> komponen juga membutuhkan prop prefetch dengan menerima none secara default, intent untuk mengambil data terlebih dahulu jika Remix mendeteksi pengguna mengarahkan atau memfokuskan tautan, atau render yang akan mengambil data rute segera setelah tautan dirender.

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>
  );
}

Langkah berikutnya

Sekarang Anda mengetahui dasar-dasar Remix dan Anda siap untuk mulai benar-benar membangun aplikasi, bukan? Remix menyediakan Aplikasi lelucon dan tutorial blog untuk membantu Anda mulai menerapkan pengetahuan dasar ini. Anda juga dapat memulai dari awal dan membuat aplikasi Remix baru. Atau jika Anda siap untuk menyelam, berikan Tumpukan K-Pop mencoba. Saya sangat menikmati waktu saya dengan Remix dan menyukai fokus pada standar web dan membawanya kembali ke dasar. Sekarang giliran Anda untuk mulai berkreasi!

Stempel Waktu:

Lebih dari Trik CSS