Asas remix

Anehnya, ia dilancarkan pada tahun 2019, tetapi pada mulanya hanya tersedia sebagai rangka kerja berbayar berasaskan langganan. Pada tahun 2021, pengasas menaikkan dana benih dan membuka rangka kerja untuk membolehkan pengguna mula menggunakan Remix secara percuma. Banjir dibuka dan semua orang seolah -olah bercakap mengenainya, untuk lebih baik atau lebih teruk. Mari menggali beberapa asas remix.

Remix adalah rangka kerja JavaScript yang mengutamakan pelayan (tepi). Ia kini menggunakan React sebagai front-end dan mengutamakan aplikasi rendering sisi pelayan di tepi. Platform ini boleh mengambil kod pelayan dan menjalankannya sebagai fungsi tanpa pelayan atau kelebihan, yang lebih murah daripada pelayan tradisional dan lebih dekat dengan pengguna anda. Pengasas Remix suka menyebutnya rangka kerja "pusat stack" kerana ia menyesuaikan permintaan dan respons antara pelayan dan pelanggan berdasarkan platform yang menjalankannya.

Menyebarkan Remix

Sejak Remix memerlukan pelayan, mari kita bincangkan bagaimana untuk menggunakannya. Remix sendiri tidak menyediakan pelayan -anda perlu menyediakannya sendiri -membolehkannya dijalankan di mana -mana node.js atau persekitaran Deno, termasuk platform aplikasi Netlify Edge dan DigitalOcean. Remix sendiri adalah pengkompil , sebuah program yang menukarkan permintaan platform ke dalam platformnya. Proses ini menggunakan Esbuild untuk membuat pengendali untuk permintaan pelayan. Pengendali HTTP yang digunakannya adalah berdasarkan API Fetch Web dan berjalan di pelayan dengan menyesuaikannya agar sesuai dengan platform yang akan digunakan.

stack remix

Remix Stack adalah projek yang mempunyai beberapa alat biasa yang telah dikonfigurasi. Pasukan Remix mengekalkan tiga susunan rasmi, semuanya dinamakan sempena genre muzik. Di samping itu, terdapat banyak tumpukan remix komuniti, termasuk timbunan K-pop yang dibuat oleh pasukan templat Netlify. Stack ini berkuasa, termasuk pangkalan data supabase dan pengesahan, tailwind untuk tetapan gaya, ujian cypress end-to-end, pemformatan kod cantik, pemeriksaan kod eslint, dan pemeriksaan jenis statik TypeScript. Semak siaran Tara Manicsic untuk menggunakan timbunan K-pop.

Routing cache

Remix masih boleh mengambil kesempatan daripada jamStack melalui penghalaan cache. Tapak statik atau generasi tapak statik (SSG) adalah apabila semua kandungan anda diberikan pada masa membina dan kekal static sehingga membina semula seterusnya. Kandungan adalah pra-dihasilkan dan boleh diletakkan pada CDN. Ini memberikan banyak faedah dan kelajuan pemuatan tapak pantas untuk pengguna akhir. Walau bagaimanapun, Remix tidak melakukan SSG tipikal seperti kerangka reaksi popular yang lain, termasuk Next.js dan Gatsby. Untuk mendapatkan beberapa manfaat SSG, anda boleh menggunakan header HTTP Cache-Control Native dalam tajuk Remix berfungsi untuk laluan tertentu cache, atau secara langsung cache mereka dalam fail root.tsx.

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

Ini akan cache selama satu jam:

 <code> Headers fungsi eksport () {return {"Cache-Control": "Awam, S-Maxage = 360",}; Ini adalah teknik yang menggunakan folder yang ditentukan untuk menentukan penghalaan aplikasi. Mereka biasanya mempunyai sintaks khas untuk mengisytiharkan penghalaan dan titik akhir dinamik. Perbezaan terbesar antara Remix dan rangka kerja popular yang lain adalah keupayaan untuk menggunakan penghalaan bersarang.  <p> Setiap aplikasi remix bermula dengan fail root.tsx. Di sinilah asas -asas keseluruhan aplikasi diberikan. Anda akan menemui beberapa susun atur HTML yang biasa di sini, seperti tag  </p></code> tag, tag <code>  </code>, dan kemudian <code>  </code> tag dan komponen yang anda perlukan untuk memberikan permohonan anda. Satu perkara yang perlu ditunjukkan di sini ialah komponen <code> <cript> </cript></code> membolehkan JavaScript di laman web; Fail root.tsx bertindak sebagai susun atur induk segala -galanya dalam direktori laluan, dan segala -galanya dalam laluan diberikan di mana komponen <code> <utlet>  </utlet></code> terletak di root.tsx. Ini adalah asas untuk penghalaan bersarang di Remix. #### Router bersarang  <p> Remix bukan sahaja dicipta oleh beberapa ahli pasukan Router React, ia juga menggunakan Router React. Malah, mereka membawa beberapa manfaat Remix kembali ke React Router. Satu masalah yang kompleks bahawa kakitangan penyelenggaraan Next.js dan Sveltekit sedang berusaha menyelesaikannya adalah penghalaan bersarang. </p> <p> Routing bersarang adalah berbeza daripada penghalaan tradisional. Laluan tradisional membawa pengguna ke halaman baru, dan setiap laluan bersarang adalah bahagian berasingan dari halaman yang sama. Ia membolehkan pemisahan kebimbangan dengan mengaitkan logik perniagaan hanya dengan fail yang memerlukannya. Remix dapat mengendalikan kesilapan yang terhad kepada bahagian halaman di mana laluan bersarang terletak. Laluan lain di halaman masih tersedia, dan laluan yang rosak dapat memberikan konteks yang berkaitan dengan ralat tanpa menyebabkan seluruh halaman jatuh. </p> <p> Remix melakukan ini apabila fail root dalam aplikasi/laluan mempunyai nama yang sama dengan direktori fail yang akan dimuatkan dalam fail asas. Fail root menjadi susun atur fail dalam direktori dengan menggunakan komponen <code> <utlet>  </utlet></code> untuk memberitahu Remix di mana untuk memuat laluan lain. </p> <h4> komponen outlet </h4> <p> <code> <utset>  </utset></code> Komponen adalah isyarat dari remix yang menunjukkan di mana ia harus memberikan kandungan untuk laluan bersarang. Ia diletakkan dalam fail dalam direktori root direktori App/Laluan, dan namanya sama dengan laluan bersarang. Kod berikut terletak di dalam fail/laluan/kira-kira. Direktori bernama, akan pergi ke sini. </p><h4> Struktur Fail </h4> Mana -mana fail dalam aplikasi/laluan/direktori <p> ​​menjadi laluan ke URL namanya. Anda juga boleh menambah direktori yang mengandungi fail index.tsx. </p> <pre class="brush:php;toolbar:false"> <code> App/├── Laluan/│ │ │ └── Blog | Fail susun atur fail dalam direktori, dan fail susun atur memerlukan komponen outlet untuk meletakkan laluan bersarang.  <pre class="brush:php;toolbar:false"> <code> app/├── Laluan/│ │ │ └── kira -kira │ ├── index.tsx │ ├ ├─ ─ ─ erscores (__) sebelum nama fail susun atur.  <pre class="brush:php;toolbar:false"> <code> App/├── Laluan/│ │ │ └── kira -kira │ │ ├── index.tsx │ ├ ├iku index.tsx │ ├ ├iku. href = "https://www.php.cn/link/232a031118725240918c5a4a0ab33e9b3"> https://www.php.cn/link/232a .tsx fail, tetapi juga membuat komponen <code> <utlet> </utlet></code> di mana komponen terletak di apl/routes/about.tsx tag.  <h4> Routing dinamik </h4> <p> Routing dinamik adalah laluan yang berubah berdasarkan maklumat dalam URL. Ini mungkin nama atau ID pelanggan pos blog, tetapi apa sahaja, sintaks $ ditambah ke hadapan isyarat laluan Remix bahawa ia dinamik. Nama itu tidak penting kecuali awalan $. </p> <pre class="brush:php;toolbar:false"> <code> App/├── Laluan/│ │ │ └── kira -kira │ ├── $ id.tsx │ ├ ├iku index.tsx │ ├── Mengenai.tsx ## Ini adalah susun atur untuk/  <p> Sejak Remix menjadikan semua data pada pelayan, tidak ada cara untuk melihat banyak remix yang telah menjadi standard dalam aplikasi React, seperti cangkuk useState () dan useeffect (). Oleh kerana data telah dinilai pada pelayan, keperluan untuk keadaan klien dikurangkan. </p> <p> Tidak kira jenis pelayan yang digunakan untuk mendapatkan data. Oleh kerana Remix terletak di antara permintaan dan respons dan menukarnya dengan sewajarnya, anda boleh menggunakan API Web Standard. Remix melakukan ini dalam fungsi loader yang berjalan pada pelayan sahaja dan membuat data dalam komponen menggunakan cangkuk useloaderData (). Ini adalah contoh membuat imej kucing rawak menggunakan kucing sebagai API perkhidmatan. </p> <pre class="brush:php;toolbar:false"> <code> import {outlet, useloaderData} dari '@remix-run/react' eksport async function loader () {const response = Await fetch ('https://cataas.com/cat') > <img alt="Kucing rawak." src="%7B%60https://cataas.com/cat/%24">  <outlet></outlet> )} </code> 

parameter routing

Fungsi loader boleh mengakses parameter ini melalui parameter Params.

 <code> import {useloaderData} dari '@remix-run/react' import jenis {loaderArgs} dari '@remix-run/node' export async function loader ({params}: loaderArgs) {return {param} <p> Parameter URL adalah {params.tag}. </p>} </code>  <h3> Fungsi Remix Lain </h3> <p> Remix Terdapat beberapa fungsi penolong lain yang menambah fungsi tambahan kepada unsur -unsur HTML yang normal dan atribut dalam API modul penghalaan. Setiap laluan boleh menentukan fungsi ini sendiri. </p> <h4> Fungsi Tindakan </h4> <p> Fungsi tindakan membolehkan anda menambah fungsi tambahan untuk membentuk operasi menggunakan API FormData Web standard. </p> <cope> {{request}) {const body = const. > Mana -mana tajuk standard HTTP boleh diletakkan dalam fungsi tajuk. Kerana setiap laluan boleh mempunyai header, untuk mengelakkan konflik dengan laluan bersarang, laluan terdalam -atau URL dengan slashes yang paling maju (/) - menang. Anda juga boleh mendapatkan tajuk yang diluluskan, ActionHeaders, Loaderheaders, atau Parentheaders  <pre class="brush:php;toolbar:false"> <code> tajuk fungsi eksport ({ActionHeaders, LoaderHeaders, Parentheaders,}) Fungsi ini menetapkan tag meta dokumen HTML. Secara lalai, satu ditetapkan dalam fail root.tsx, tetapi mereka boleh dikemas kini untuk setiap laluan.  <pre class="brush:php;toolbar:false"> <code> fungsi eksport meta () {return {title: "Tajuk halaman anda", keterangan: "Penerangan baru untuk setiap laluan.",}; Fungsi Pautan (tidak boleh dikelirukan dengan komponen <code> <inly> </inly></code>) membolehkan anda mengimport kandungan hanya dalam laluan yang memerlukannya. Oleh itu, sebagai contoh, fail CSS boleh dikeluarkan dan diimport hanya dalam laluan yang memerlukan fail khusus ini. Elemen pautan dikembalikan sebagai pelbagai objek dari fungsi pautan (), yang boleh menjadi htmllinkdescriptor API pautan atau pagelinkdescriptor data halaman yang dapat mempraktikkan data halaman.  <cre> <code> Pautan fungsi eksport () {return [// tambah favicon {rel: "ikon", href: "/favicon.png", type: "image/png",}, // tambah stylesheet luaran {rel: " }, // Tambahkan lembaran gaya tempatan, {rel: "stylesheet", href: styleshref}, // prefetch data halaman {halaman: "/tentang/komuniti"} ]} </code> </cre></code>

Pautan Antara Laluan

Remix menyediakan komponen untuk melompat antara laluan yang berbeza dari aplikasi, yang dipanggil <in link> </in>. Untuk mendapatkan penghalaan pelanggan, gunakan komponen <link to=""> dan bukan <a href=""> name </a> . Komponen <inly> </inly> juga dilengkapi dengan harta prefetch yang tidak menerima secara lalai.

import {link} dari "@remix-run/react"; > Seterusnya <p> Sekarang anda mempunyai asas -asas remix, adakah anda bersedia untuk memulakan sebenarnya membina permohonan anda? Remix menyediakan aplikasi jenaka dan tutorial blog untuk membantu anda memulakan asas -asas ini. Anda juga boleh membuat aplikasi remix baru dari awal. Atau, jika anda sudah bersedia untuk menggali lebih mendalam, cuba gunakan timbunan k-pop. Saya sangat suka menggunakan Remix dan menyukai fokusnya pada piawaian web dan kembali ke asas -asas. Sekarang giliran anda untuk mula mencipta! </p>

Atas ialah kandungan terperinci Asas remix. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!