ریمکس پلیٹو بلاکچین ڈیٹا انٹیلی جنس کی بنیادی باتیں۔ عمودی تلاش۔ عی

ریمکس کی بنیادی باتیں

ٹائم سٹیمپ: 13 ستمبر 2022 صبح 8:59 بجے

آپ نے شاید فریم ورک بلاک، ریمکس کے نئے بچوں میں سے ایک کے بارے میں بہت زیادہ ہائپ سنی ہوگی۔ یہ حیران کن ہو سکتا ہے کہ اس کی شروعات 2019 میں ہوئی، لیکن یہ اصل میں صرف سبسکرپشن پر مبنی پریمیم فریم ورک کے طور پر دستیاب تھا۔ 2021 میں، بانیوں نے سیڈ فنڈنگ ​​اکٹھی کی اور فریم ورک کو اوپن سورس کیا تاکہ صارفین مفت میں ریمکس کا استعمال شروع کر سکیں۔ سیلاب کے دروازے کھل گئے اور لگتا ہے کہ ہر کوئی اس کے بارے میں بات کر رہا ہے، اچھا یا برا۔ آئیے اس میں غوطہ لگائیں اور ریمکس کی کچھ بنیادی باتیں دیکھیں۔

ریمکس ایک سرور "ایج" پہلا JavaScript فریم ورک ہے۔ یہ رد عمل کا استعمال کرتا ہے، کم از کم ابھی کے لئے، فرنٹ اینڈ کے لیے اور سرور سائیڈ رینڈرنگ ایپلی کیشن کو ترجیح دیتا ہے۔ کنارے پر. پلیٹ فارم سرور سائیڈ کوڈ لے سکتے ہیں اور اسے اس طرح چلا سکتے ہیں۔ سرور کے بغیر یا کنارے کے افعال اسے روایتی سرور سے سستا بنانا اور اسے اپنے صارفین کے قریب رکھنا۔ ریمکس کے بانی اسے "سینٹر اسٹیک" فریم ورک کہنا پسند کرتے ہیں کیونکہ یہ سرور اور کلائنٹ کے درمیان کی گئی درخواستوں اور جوابات کو اس پلیٹ فارم کے لیے اپناتا ہے جس پر اسے چلایا جا رہا ہے۔

ریمکس کی بنیادی باتیں

ریمکس تعینات کرنا

چونکہ ریمکس کو ایک سرور کی ضرورت ہوتی ہے، آئیے اس کے بارے میں بات کرتے ہیں کہ آپ اسے کیسے تعینات کر سکتے ہیں۔ ریمکس خود سرور فراہم نہیں کرتا ہے - آپ سرور لاتے ہیں - اسے کسی میں بھی چلانے کی اجازت دیتے ہیں۔ Node.js or ڈینگو ماحولیات سمیت نیٹلائف ایج اور DigitalOcean کا ایپ پلیٹ فارم. ریمکس خود ایک ہے۔ سنکلک، ایک پروگرام جو اس پلیٹ فارم کی درخواستوں کا ترجمہ کرتا ہے جس پر یہ چل رہا ہے۔ یہ عمل استعمال کرتا ہے۔ تعمیر سرور کی درخواستوں کے لیے ہینڈلرز بنانے کے لیے۔ اس کے استعمال کردہ HTTP ہینڈلرز پر بنائے گئے ہیں۔ ویب بازیافت API اور کے ذریعہ سرور پر چلایا جاتا ہے۔ اپنانے انہیں اس پلیٹ فارم کے لیے تعینات کیا جائے گا جس پر انہیں تعینات کیا جائے گا۔

ریمکس اسٹیکس

ریمکس اسٹیک ایسے پروجیکٹ ہیں جن میں کچھ عام ٹولز ہوتے ہیں جو آپ کے لیے پہلے سے تشکیل شدہ ہوتے ہیں۔ وہاں ہے تین سرکاری اسٹیک جو کہ ریمکس ٹیم کی طرف سے دیکھ بھال کی جاتی ہے اور ان سب کا نام میوزیکل انواع کے نام پر رکھا گیا ہے۔ کمیونٹی ریمکس اسٹیک کی ایک بڑی تعداد بھی ہے بشمول K-Pop اسٹیک Netlify پر ٹیمپلیٹس ٹیم کے ذریعہ تخلیق کردہ۔ یہ اسٹیک ایک پاور ہاؤس ہے اور اس میں ایک شامل ہے۔ سوپا بیس ڈیٹا بیس اور تصدیق، ٹیلانڈ اسٹائل کے لیے، Cypress آخر سے آخر تک جانچ، خوبصورت کوڈ فارمیٹنگ، ESLint linting، اور TypeScript جامد ٹائپنگ K-Pop اسٹیک کی تعیناتی پر Tara Manicsic کی پوسٹ دیکھیں۔

کیشنگ کے راستے

اگرچہ ریمکس کو سرور کی ضرورت ہے، پھر بھی یہ اس سے فائدہ اٹھا سکتا ہے۔ جام اسٹیک کیشنگ راستوں سے فوائد۔ جامد سائٹ یا جامد سائٹ جنریشن (SSG) اس وقت ہوتی ہے جب آپ کا تمام مواد تعمیراتی وقت پر پیش کیا جاتا ہے اور رہتا ہے۔ مستحکم جب تک کہ ایک اور دوبارہ تعمیر نہ ہو۔ مواد پہلے سے تیار کیا گیا ہے اور اسے CDN پر رکھا جا سکتا ہے۔ یہ اختتامی صارف کے لیے بہت سے فوائد اور تیزی سے سائٹ بوجھ فراہم کرتا ہے۔ تاہم، ریمکس عام SSG نہیں کرتا ہے جیسا کہ دیگر مقبول React فریم ورک، بشمول Next.js اور Gatsby۔ 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. یہ ریمکس میں نیسٹڈ روٹنگ کی بنیاد ہے۔

نیسٹڈ روٹنگ

ریمکس کو نہ صرف ٹیم میں سے کچھ نے قائم کیا تھا۔ رد Rou عمل، یہ بھی استعمال رد عمل راؤٹر. اصل میں، وہ ہیں Remix کے بارے میں کچھ اچھی چیزوں کو React Router پر واپس لانا. ایک پیچیدہ مسئلہ جسے Next.js اور SvelteKit کے مینٹینرز ابھی حل کرنے کی کوشش کر رہے ہیں وہ ہے نیسٹڈ روٹنگ۔

نیسٹڈ روٹنگ روایتی روٹنگ کے برعکس ہے۔ جہاں ایک نیا راستہ صارف کو ایک نئے صفحہ پر لے جائے گا، ہر اندراج شدہ راستہ اسی صفحہ کا الگ حصہ ہے۔ یہ کاروباری منطق کو صرف ان فائلوں سے منسلک رکھ کر خدشات کو الگ کرنے کی اجازت دیتا ہے جن کو اس کی ضرورت ہے۔ ریمکس صفحہ کے صرف اس حصے میں مقامی غلطیوں کو ہینڈل کرنے کے قابل ہے جس پر نیسٹڈ روٹ ہے۔ صفحہ پر دوسرے راستے اب بھی قابل استعمال ہیں اور جو راستہ ٹوٹ گیا ہے وہ پورے صفحہ کے کریش ہونے کے بغیر خرابی کو متعلقہ سیاق و سباق فراہم کر سکتا ہے۔

ریمکس ایسا اس وقت کرتا ہے جب روٹ فائل ان میں ہو۔ app/routes اس کا نام فائلوں کی ڈائرکٹری کے طور پر رکھا گیا ہے جو بیس فائل کے اندر لوڈ ہوگی۔ روٹ فائل بن جاتی ہے۔ ترتیب ڈائرکٹری میں فائلوں کے لیے ایک کا استعمال کرتے ہوئے <Outlet /> ریمکس کو بتانے کے لیے جزو دوسرے راستوں کو کہاں لوڈ کرنا ہے۔

آؤٹ لیٹ جزو

۔ <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 پر ایک روٹ بن جاتی ہے۔ ایک ڈائرکٹری بھی ایک کے ساتھ شامل کی جا سکتی ہے۔ 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

وہ ڈیٹا حاصل کریں!

چونکہ ریمکس اپنا تمام ڈیٹا سرور پر پیش کرتا ہے، اس لیے آپ کو بہت سی چیزیں نظر نہیں آتیں جو ایک React ایپ کا معیار بن چکی ہیں، جیسے useState() اور useEffect() ہکس، ریمکس میں۔ کلائنٹ سائیڈ اسٹیٹ کی ضرورت کم ہے کیونکہ سرور پر پہلے ہی اس کا جائزہ لیا جا چکا ہے۔

اس سے بھی کوئی فرق نہیں پڑتا کہ آپ ڈیٹا لانے کے لیے کس قسم کا سرور استعمال کرتے ہیں۔ چونکہ ریمکس درخواست اور جواب کے درمیان بیٹھتا ہے اور اس کا مناسب ترجمہ کرتا ہے، اس لیے آپ معیاری استعمال کر سکتے ہیں۔ ویب بازیافت API. ریمکس یہ ایک میں کرتا ہے۔ 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 />
    </>
  )
}

روٹ کے پیرامیٹرز

متحرک راستوں میں، راستوں کے ساتھ سابقہ ​​لگا ہوا ہے۔ $ اس ڈیٹا کو ہینڈل کرنے کے لیے URL پیرامیٹر تک رسائی حاصل کرنے کی ضرورت ہے جو پیش کیا جانا چاہیے۔ دی loader فنکشن کو ایک کے ذریعے ان تک رسائی حاصل ہے۔ 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 عناصر اور صفات میں اضافی فعالیت کا اضافہ کرتے ہیں۔ روٹ ماڈیول API. ہر راستہ اس قسم کے افعال کی اپنی وضاحت کرسکتا ہے۔

ایکشن فنکشن

An action فنکشن آپ کو معیاری ویب کا استعمال کرتے ہوئے فارم ایکشن میں اضافی فعالیت شامل کرنے کی اجازت دیتا ہے۔ فارم ڈیٹا API.

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

ہیڈرز فنکشن

کوئی HTTP معیاری ہیڈر a میں جا سکتے ہیں۔ headers فنکشن کیونکہ ہر روٹ کا ایک ہیڈر ہو سکتا ہے، نیسٹڈ روٹس، گہرے ترین راستے — یا سب سے زیادہ فارورڈ سلیش کے ساتھ یو آر ایل (/) - جیتتا ہے۔ آپ ہیڈر بھی پاس کر سکتے ہیں، 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.",
  };
};

HTML link عناصر میں رہتے ہیں <head> ایک HTML دستاویز کا ٹیگ اور وہ دوسری چیزوں کے علاوہ سی ایس ایس درآمد کرتے ہیں۔ دی links فنکشن، کے ساتھ الجھن میں نہ پڑے <Link /> جزو، آپ کو صرف ان راستوں سے چیزیں درآمد کرنے کی اجازت دیتا ہے جن کی ضرورت ہے۔ لہذا، مثال کے طور پر، CSS فائلوں کو اسکوپ کیا جا سکتا ہے اور صرف ان راستوں پر درآمد کیا جا سکتا ہے جنہیں ان مخصوص فائلوں کی ضرورت ہوتی ہے۔ دی link عناصر a سے لوٹے جاتے ہیں۔ links() اشیاء کی ایک صف کے طور پر کام کرتا ہے اور یا تو ہو سکتا ہے۔ 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>
  );
}

اگلے مراحل

اب آپ ریمکس کی بنیادی باتیں جانتے ہیں اور آپ واقعی ایپلی کیشنز بنانا شروع کرنے کے لیے تیار ہیں، ٹھیک ہے؟ ریمکس فراہم کرتا ہے a لطیفے ایپ اور ایک بلاگ ٹیوٹوریل تاکہ آپ اس بنیادی علم کو نافذ کرنا شروع کر دیں۔ آپ شروع سے بھی شروع کر سکتے ہیں اور بالکل نیا ریمکس ایپ بنا سکتے ہیں۔ یا اگر آپ غوطہ لگانے کے لیے تیار ہیں تو دے دیں۔ K-Pop اسٹیک ایک کوشش میں نے واقعی ریمکس کے ساتھ اپنے وقت کا لطف اٹھایا ہے اور مجھے ویب کے معیارات پر توجہ مرکوز کرنا اور اسے بنیادی باتوں پر واپس لانا پسند ہے۔ اب تخلیق شروع کرنے کی باری ہے!

ٹائم اسٹیمپ:

سے زیادہ سی ایس ایس ٹیکنیکس