रीमिक्स प्लेटोब्लॉकचैन डेटा इंटेलिजेंस की मूल बातें। लंबवत खोज। ऐ.

रीमिक्स की मूल बातें

समय टिकट: 13 सितंबर, 2022 8:59 पूर्वाह्न

आपने शायद फ्रेमवर्क ब्लॉक, रीमिक्स पर सबसे नए बच्चों में से एक के बारे में बहुत प्रचार सुना है। यह आश्चर्यजनक हो सकता है कि इसकी शुरुआत 2019 में हुई, लेकिन यह मूल रूप से केवल सदस्यता-आधारित प्रीमियम ढांचे के रूप में उपलब्ध था। 2021 में, संस्थापकों ने सीड फंडिंग जुटाई और उपयोगकर्ताओं को मुफ्त में रीमिक्स का उपयोग शुरू करने देने के लिए ढांचे को खोल दिया। फ्लडगेट खुल गए और ऐसा लगता है कि हर कोई इसके बारे में बात कर रहा है, अच्छा या बुरा। आइए, रीमिक्स के बारे में कुछ बुनियादी बातों पर गौर करें और देखें।

रीमिक्स एक सर्वर "एज" पहला जावास्क्रिप्ट ढांचा है। यह प्रतिक्रिया का उपयोग करता है, कम से कम अभी के लिए, फ़्रंट एंड के लिए और एप्लिकेशन को सर्वर-साइड रेंडरिंग को प्राथमिकता देता है किनारे पर. प्लेटफ़ॉर्म सर्वर-साइड कोड ले सकते हैं और इसे इस प्रकार चला सकते हैं सर्वर रहित या किनारे के कार्य इसे पारंपरिक सर्वर से सस्ता बनाना और इसे अपने उपयोगकर्ताओं के करीब लाना। रीमिक्स के संस्थापक इसे "सेंटर स्टैक" फ्रेमवर्क कहना पसंद करते हैं क्योंकि यह सर्वर और क्लाइंट के बीच किए गए अनुरोधों और प्रतिक्रियाओं को उस प्लेटफॉर्म के लिए अनुकूलित करता है जिस पर इसे चलाया जा रहा है।

रीमिक्स की मूल बातें

रीमिक्स तैनात करना

चूंकि रीमिक्स को एक सर्वर की आवश्यकता होती है, आइए बात करते हैं कि आप इसे कैसे परिनियोजित कर सकते हैं। रीमिक्स सर्वर को स्वयं प्रदान नहीं करता है - आप सर्वर लाते हैं - इसे किसी भी में चलाने की इजाजत देता है Node.js or Deno पर्यावरण, सहित नेटलिफाई एज और DigitalOcean का ऐप प्लेटफ़ॉर्म. रीमिक्स अपने आप में एक है संकलक, एक प्रोग्राम जो उस प्लेटफॉर्म के अनुरोधों का अनुवाद करता है जिस पर वह चल रहा है। यह प्रक्रिया उपयोग करती है एस्बिल्ड सर्वर के अनुरोधों के लिए हैंडलर बनाने के लिए। इसके द्वारा उपयोग किए जाने वाले HTTP हैंडलर पर बनाए गए हैं वेब फ़ेच एपीआई और द्वारा सर्वर पर चलाए जाते हैं अनुकूल ढालने उन्हें उस प्लेटफॉर्म के लिए तैनात किया जाएगा जिस पर उन्हें तैनात किया जाएगा।

रीमिक्स स्टैक

रीमिक्स स्टैक ऐसे प्रोजेक्ट होते हैं जिनमें कुछ सामान्य उपकरण होते हैं जो आपके लिए पूर्व-कॉन्फ़िगर किए जाते हैं। वहाँ हैं तीन आधिकारिक ढेर जिनका रखरखाव रीमिक्स टीम द्वारा किया जाता है और इन सभी का नाम संगीत शैलियों के नाम पर रखा गया है। इसमें कई सामुदायिक रीमिक्स स्टैक भी शामिल हैं जिनमें शामिल हैं: के-पॉप स्टैक Netlify पर टेम्प्लेट टीम द्वारा बनाया गया। यह स्टैक एक पावरहाउस है और इसमें शामिल है a सुपाबेस डेटाबेस और प्रमाणीकरण, tailwind स्टाइल के लिए, सरू एंड-टू-एंड परीक्षण, खूबसूरत कोड स्वरूपण, ईएसएलिंट अस्तर, और टाइपप्रति स्थिर टाइपिंग। के-पॉप स्टैक को परिनियोजित करने पर तारा मानिक की पोस्ट देखें।

कैशिंग मार्ग

हालांकि रीमिक्स को सर्वर की आवश्यकता होती है, फिर भी वह इसका लाभ उठा सकता है जैमस्टैक कैशिंग मार्गों से लाभ। एक स्थिर साइट या स्थिर साइट पीढ़ी (एसएसजी) तब होती है जब आपकी सभी सामग्री निर्माण समय पर प्रस्तुत की जाती है और रहती है स्थिर एक और पुनर्निर्माण तक। सामग्री पूर्व-निर्मित है और इसे सीडीएन पर रखा जा सकता है। यह अंतिम उपयोगकर्ता के लिए कई लाभ और त्वरित साइट लोड प्रदान करता है। हालांकि, रीमिक्स नेक्स्ट.जेएस और गैट्सबी सहित अन्य लोकप्रिय रिएक्ट फ्रेमवर्क की तरह विशिष्ट एसएसजी नहीं करता है। SSG के कुछ लाभों को प्राप्त करने के लिए, आप मूल निवासी का उपयोग कर सकते हैं कैश-कंट्रोल HTTP हेडर एक रीमिक्स में हेडर फ़ंक्शन किसी विशेष मार्ग को कैश करने के लिए या सीधे में root.tsx फ़ाइल.

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

फिर अपने में जोड़ें हेडर फ़ंक्शन आप इसे कहाँ चाहते हैं। यह एक घंटे के लिए कैश करता है:

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

रीमिक्सिंग रूटिंग

फाइल सिस्टम के आधार पर बहुत सारे ढांचे रूटिंग में झुक गए हैं। यह एक ऐसी तकनीक है जहां आपके एप्लिकेशन के लिए मार्गों को परिभाषित करने के लिए एक निर्दिष्ट फ़ोल्डर का उपयोग किया जाता है। गतिशील मार्ग और समापन बिंदु घोषित करने के लिए उनके पास आमतौर पर विशेष वाक्यविन्यास होता है। रीमिक्स और अन्य लोकप्रिय ढांचे के बीच वर्तमान में सबसे बड़ा अंतर उपयोग करने की क्षमता है नेस्टेड रूटिंग.

हर रीमिक्स ऐप से शुरू होता है root.tsx फ़ाइल। यह वह जगह है जहां ऐप का पूरा आधार प्रस्तुत किया जाता है। आपको यहां कुछ सामान्य HTML लेआउट मिलेंगे जैसे: <html> टैग, द <head> टैग, और फिर <body> ऐप को रेंडर करने के लिए आवश्यक घटकों के साथ टैग करें। यहाँ इंगित करने वाली एक बात है <Scripts> घटक वह है जो साइट पर जावास्क्रिप्ट को सक्षम बनाता है; कुछ चीजें इसके बिना काम करेंगी, लेकिन सब कुछ नहीं। root.tsx फ़ाइल के अंदर सब कुछ के लिए एक पैरेंट लेआउट के रूप में कार्य करता है routes निर्देशिका, मार्गों में सब कुछ प्रदान किया जाता है जहां <Outlet/> घटक में है root.tsx. यह रीमिक्स में नेस्टेड रूटिंग का आधार है।

नेस्टेड रूटिंग

रीमिक्स न केवल कुछ टीम द्वारा स्थापित किया गया था प्रतिक्रिया राउटर, यह भी का उपयोग करता है प्रतिक्रिया राउटर। वास्तव में, वे हैं रीमिक्स के बारे में कुछ अच्छी बातें रिएक्ट राउटर में वापस लाना. एक जटिल समस्या जिसे नेक्स्ट.js और SvelteKit के अनुरक्षक अभी हल करने का प्रयास कर रहे हैं, वह है नेस्टेड रूटिंग।

नेस्टेड रूटिंग पारंपरिक रूटिंग के विपरीत है। जहां एक नया मार्ग उपयोगकर्ता को एक नए पृष्ठ पर ले जाएगा, प्रत्येक नेस्टेड मार्ग उसी पृष्ठ का एक अलग खंड है। यह केवल आवश्यक फाइलों के साथ व्यावसायिक तर्क को जोड़कर चिंताओं को अलग करने की अनुमति देता है। रीमिक्स केवल उस पृष्ठ के अनुभाग में स्थानीयकृत त्रुटियों को संभालने में सक्षम है जिस पर नेस्टेड मार्ग है। पृष्ठ पर अन्य मार्ग अभी भी प्रयोग करने योग्य हैं और जो मार्ग टूटा है वह पूरे पृष्ठ को क्रैश किए बिना त्रुटि के लिए प्रासंगिक संदर्भ प्रदान कर सकता है।

रीमिक्स ऐसा तब करता है जब रूट फ़ाइल में app/routes फ़ाइलों की निर्देशिका के समान नाम दिया गया है जो आधार फ़ाइल के अंदर लोड होगी। रूट फ़ाइल बन जाती है a ख़ाका निर्देशिका में फ़ाइलों के लिए an . का उपयोग करके <Outlet /> रीमिक्स को यह बताने के लिए कि अन्य मार्गों को कहाँ लोड करना है।

आउटलेट घटक

RSI <Outlet /> घटक रीमिक्स के लिए एक संकेत है जहां इसे नेस्टेड मार्गों के लिए सामग्री प्रस्तुत करनी चाहिए। इसे फ़ाइल के मूल में रखा गया है app/routes नेस्टेड मार्गों के समान नाम वाली निर्देशिका। निम्नलिखित कोड a . में जाता है app/routes/about.tsx फ़ाइल और अंदर की फाइलों के लिए आउटलेट शामिल है app/routes/about फ़ोल्डर:

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

फ़ोल्डर संरचना

में कोई फ़ाइल app/routes/ निर्देशिका अपने नाम के URL पर एक मार्ग बन जाती है। एक निर्देशिका को a . के साथ भी जोड़ा जा सकता है index.tsx फ़ाइल.

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

यदि किसी मार्ग का नाम निर्देशिका के समान है, तो नामित फ़ाइल निर्देशिका के अंदर फ़ाइलों के लिए एक लेआउट फ़ाइल बन जाती है और लेआउट फ़ाइल को एक की आवश्यकता होती है आउटलेट घटक नेस्टेड मार्ग को अंदर रखने के लिए।

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

लेआउट को डबल अंडरस्कोर के साथ प्रीफ़िक्स करके भी बनाया जा सकता है (__).

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

https://your-url.com/about अभी भी प्रस्तुत करेंगे app/routes/about.tsx फ़ाइल, लेकिन जो कुछ भी है उसे भी प्रस्तुत करेगा app/routes/about/index.tsx जहां आउटलेट घटक के मार्कअप में है app/routes/about.tsx.

गतिशील मार्ग

डायनेमिक रूट एक ऐसा रूट है जो यूआरएल में जानकारी के आधार पर बदलता है। यह एक ब्लॉग पोस्ट या ग्राहक आईडी का नाम हो सकता है, लेकिन कोई फर्क नहीं पड़ता कि यह क्या है $ मार्ग के सामने सिंटैक्स जोड़ा गया रीमिक्स को संकेत देता है कि यह गतिशील है। नाम के अलावा कोई मायने नहीं रखता $ उपसर्ग।

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

वह डेटा लाओ!

चूंकि रीमिक्स अपने सभी डेटा को सर्वर पर प्रस्तुत करता है, आप बहुत सी चीजें नहीं देखते हैं जो एक रिएक्ट ऐप के मानक बन गए हैं, जैसे useState() और useEffect() हुक, रीमिक्स में। क्लाइंट-साइड स्थिति की कम आवश्यकता है क्योंकि सर्वर पर इसका मूल्यांकन पहले ही किया जा चुका है।

इससे कोई फर्क नहीं पड़ता कि आप डेटा लाने के लिए किस प्रकार के सर्वर का उपयोग करते हैं। चूंकि रीमिक्स अनुरोध और प्रतिक्रिया के बीच बैठता है और इसका उचित अनुवाद करता है, आप मानक का उपयोग कर सकते हैं वेब फ़ेच एपीआई. रीमिक्स यह करता है a loader समारोह है कि केवल सर्वर पर चलता है और का उपयोग करता है useLoaderData() घटक में डेटा प्रस्तुत करने के लिए हुक। यहाँ एक उदाहरण का उपयोग कर रहा है सेवा API के रूप में बिल्ली एक यादृच्छिक बिल्ली छवि प्रस्तुत करने के लिए।

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

मार्ग पैरामीटर

गतिशील मार्गों में, मार्गों से पहले $ उस डेटा को संभालने के लिए यूआरएल पैरामीटर तक पहुंचने में सक्षम होना चाहिए जिसे प्रस्तुत किया जाना चाहिए। loader फ़ंक्शन के पास a . के माध्यम से इन तक पहुंच है params तर्क।

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

अन्य रीमिक्स कार्य

रीमिक्स में कुछ अन्य सहायक कार्य हैं जो सामान्य HTML तत्वों और विशेषताओं में अतिरिक्त कार्यक्षमता जोड़ते हैं मार्ग मॉड्यूल एपीआई. प्रत्येक मार्ग इस प्रकार के कार्यों में से स्वयं को परिभाषित कर सकता है।

क्रिया समारोह

An action फ़ंक्शन आपको मानक वेब का उपयोग करके प्रपत्र क्रिया में अतिरिक्त कार्यक्षमता जोड़ने की अनुमति देता है फॉर्मडाटा एपीआई.

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

शीर्षलेख कार्य

कोई HTTP मानक शीर्षलेख में जा सकते हैं headers समारोह। क्योंकि प्रत्येक मार्ग में एक हेडर हो सकता है, नेस्टेड मार्गों के साथ संघर्ष से बचने के लिए, सबसे गहरा मार्ग - या सबसे आगे की स्लैश वाले URL (/) - जीत। आप हेडर भी पास करवा सकते हैं, actionHeaders, loaderHeadersया, parentHeaders

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

मेटा फ़ंक्शन

यह फ़ंक्शन HTML दस्तावेज़ के लिए मेटा टैग सेट करेगा। एक में सेट है root.tsx फ़ाइल डिफ़ॉल्ट रूप से, लेकिन उन्हें प्रत्येक मार्ग के लिए अद्यतन किया जा सकता है।

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

एचटीएमएल link तत्वों में रहते हैं <head> एक HTML दस्तावेज़ का टैग और वे अन्य बातों के अलावा, CSS आयात करते हैं। links समारोह, के साथ भ्रमित नहीं होना चाहिए <Link /> अंग, आपको केवल उन्हीं मार्गों में चीजें आयात करने की अनुमति देता है जिनकी उन्हें आवश्यकता है। इसलिए, उदाहरण के लिए, सीएसएस फाइलों को स्कोप किया जा सकता है और केवल उन मार्गों पर आयात किया जा सकता है जिन्हें उन विशिष्ट फाइलों की आवश्यकता होती है। link तत्व a . से लौटाए जाते हैं links() वस्तुओं की एक सरणी के रूप में कार्य करता है और या तो a . हो सकता है HtmlLinkDescriptor से link API या एक PageLinkDescriptor जो किसी पेज के लिए डेटा प्रीफेच कर सकता है।

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

मार्गों के बीच जोड़ना

रीमिक्स आपके ऐप में विभिन्न मार्गों के बीच जाने के लिए एक घटक प्रदान करता है जिसे कहा जाता है <Link/>. क्लाइंट-साइड रूटिंग प्राप्त करने के लिए, का उपयोग करें <Link to="">Name</Link> के बजाय घटक <a href="">Name</a>। <Link /> घटक भी एक सहारा लेता है prefetch स्वीकार के साथ none डिफ़ॉल्ट रूप से, intent डेटा को प्रीफ़ेच करने के लिए यदि रीमिक्स यह पता लगाता है कि उपयोगकर्ता लिंक पर होवर करता है या फ़ोकस करता है, या render जो लिंक प्रदान करते ही मार्ग का डेटा प्राप्त कर लेगा।

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

अगले चरण

अब आप रीमिक्स की मूल बातें जानते हैं और आप वास्तव में एप्लिकेशन बनाना शुरू करने के लिए तैयार हैं, है ना? रीमिक्स एक प्रदान करता है चुटकुले ऐप और एक ब्लॉग ट्यूटोरियल आपको इस बुनियादी ज्ञान को लागू करना शुरू करने के लिए। आप स्क्रैच से भी शुरुआत कर सकते हैं और एक नया रीमिक्स ऐप बना सकते हैं। या यदि आप गोता लगाने के लिए तैयार हैं, तो दें के-पॉप स्टैक एक कोशिश। मैंने वास्तव में रीमिक्स के साथ अपने समय का आनंद लिया है और वेब मानकों पर ध्यान केंद्रित करना और इसे मूल बातों पर वापस लाना पसंद करता हूं। अब बनाना शुरू करने की आपकी बारी है!

समय टिकट:

से अधिक सीएसएस ट्रिक्स