یک راهنما – مجله Smashing

جی کوئری سال هاست که به توسعه دهندگان خدمات خوبی ارائه کرده است. با این حال، کتابخانه‌ها (مانند React) و Frameworks (مانند Next.js) اکنون ویژگی‌های مدرن‌تری را برای کمک به عملکرد و قابلیت نگهداری کد ما به ارمغان می‌آورند. این راهنما به شما نشان می دهد که چگونه سایت جی کوئری خود را بازنویسی کنید استفاده از Next.js برای استفاده از تمام این ویژگی‌های جدید، مانند مسیریابی سمت سرویس گیرنده برای انتقال روان‌تر و توانایی جدا کردن کد به اجزای سازنده برای استفاده مجدد بیشتر.

شروع شدن

ساده ترین راه برای شروع با Next.js اجرا کردن است npx create-next-app. این اراده داربست یک پروژه برای شما. با این حال، برای درک اینکه این دستور چه کاری انجام می دهد، برنامه خود را از ابتدا ایجاد می کنیم.

ابتدا پروژه Next.js خود را با استفاده از آن ایجاد می کنیم npm init. می توانید تنظیمات پیش فرض را ادامه دهید، زیرا بعداً آنها را تغییر خواهیم داد. سپس، می خواهیم React و Next.js را با استفاده از:

npm install react react-dom next

در مرحله بعد، ما می توانیم در را باز کنیم package.json فایل و جایگزین پیش فرض کنید scripts با:

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
}

این به شما امکان می دهد که بدوید npm run dev برای راه اندازی سرور توسعه؛ npm run build برای ساخت اپلیکیشن خود؛ و npm run start برای راه اندازی سرور آن برنامه ساخته شده.

برای افزودن صفحات – مثل شما index.html با jQuery – یک دایرکتوری به نام ایجاد کنید pages و یک فایل به نام ایجاد کنید index.jsx در آن داخل این فایل کد زیر را قرار دهید:

export default function Index() {
  return <h1>Hello World</h1> ;
}

حالا با دویدن npm run start و پیمایش به localhost:3000، باید ببینید a h1 تگ نمایش داده شد نام این تابع مهم نیست، بنابراین می توانید آن را هر چه می خواهید صدا کنید. با این حال، از یک تابع پیکان ناشناس استفاده نکنید، زیرا این کار مانع می شود تازه کردن سریع از کار کردن

CSS

در jQuery، می توانید CSS را بر اساس صفحه مشخص کنید و شیوه نامه های مختلف را برای صفحات مختلف وارد کنید. این نیز در Next.js با استفاده از next/head جزء و الف link مانند جی کوئری تگ کنید. به هر حال، راه‌های کارآمدتری برای این کار در Next.js وجود دارد.

شیت جهانی

راه اول با استایل شیت جهانی است. برای این کار باید یک سفارشی ایجاد کنیم App با ساخت فایل _app.js درون pages فهرست راهنما. نقطه شروع این فایل به شرح زیر است:

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

در بالای این فایل، می توانید یک دستور import اضافه کنید و هر فایل CSS را که می خواهید وارد کنید. به عنوان مثال، اگر یک پوشه جداگانه در سطح ریشه ایجاد کرده باشید به نام styles و بگذار main.css در آن، سپس اضافه کنید:

import "../styles/main.css"

اکنون، هر آنچه که در این فایل قرار دهید، در سراسر برنامه شما اعمال خواهد شد.

ماژول های CSS

گزینه بعدی ماژول های CSS است – که به شما امکان می دهد CSS را مشخص کنید هر جا در برنامه شما ایجاد خواهند کرد نام کلاس های منحصر به فرد از کلاس هایی که ارائه می کنید، بنابراین می توانید از یک نام کلاس در چندین مکان در کد برنامه خود استفاده کنید.

گسترش اولیه سلام دنیا به عنوان مثال، شما می توانید یک فایل ایجاد کنید index.module.css در همان دایرکتوری و سپس import را بنویسید:

import styles from "./index.module.css"

پس از آن، اگر بخواهید الف را تعریف کنید heading کلاس در فایل CSS، می توانید کارهای زیر را انجام دهید:

export default function Index() {
  return <h1 className={styles.heading}>Hello World</h1> ;
}

و آن سبک ها فقط برای آن عنصر اعمال خواهند شد.

JSX مدل دار

آخرین گزینه داخلی است سبک JSX. این بیشتر شبیه به گنجاندن a است <style> در بالای صفحه خود تگ کنید تا برخی از سبک ها را تعریف کنید. به سادگی اضافه کنید jsx به <style> تگ کنید و از یک رشته الگو در داخل استفاده کنید، مانند این:

<style jsx>{`
  .heading {
      font-weight: 700
  `}</style>

این گزینه این مزیت را دارد که در زمان اجرا قابل تغییر است. به عنوان مثال، اگر می‌خواهید وزن فونت را در اجزای سازنده خود قرار دهید، می‌توانید این کار را انجام دهید:

<style jsx>{`
  .heading{
      font-weight: ${props.fontWeight}
  `}</style>

یکی از معایب این روش معرفی آن است جاوا اسکریپت زمان اجرا اضافی را وارد برنامه خود کنید و اندازه را 12 کیلوبایت افزایش دهید (3 کیلوبایت gzipped).

مناسبت ها

در jQuery، ممکن است رویدادهایی برای پاسخ دادن به عناصر DOM تنظیم شده باشند. برای اینکه ایده ای به شما بدهد، ممکن است بخواهید کد را زمانی که a p برچسب کلیک می شود و این کار را به صورت زیر انجام دهید:

$( "p" ).click(function() {
    console.log( "You clicked a paragraph!" );
});

در عوض، React استفاده می کند گردانندگان رویداد – که ممکن است در HTML دیده باشید – مانند onclick. توجه داشته باشید که React به جای آن از camelCase استفاده می کند و همینطور onclick باید به عنوان ارجاع شود onClick. بنابراین، بازنویسی این مثال کوچک در React به شکل زیر است:

export default function Index() {
  function clickParagraph(){
    console.log("You clicked a paragraph!");
  }
  return <p onClick={clickParagraph}>Hello World</p>;
}

هر روشی مزایا و معایب خود را دارد. در jQuery، اتفاقی برای آن آسان است همه پاراگراف ها، در حالی که در React باید مشخص کنید مطابق پاراگراف با این حال، برای پایگاه‌های کد بزرگ‌تر، نیاز به مشخص کردن، دیدن اینکه با تعامل با هر عنصری چه اتفاقی می‌افتد را آسان می‌کند، جایی که ممکن است تابع jQuery را فراموش کرده باشید.

جلوه ها

از افکت ها در جی کوئری استفاده می شود نمایش و پنهان کردن محتوا. ممکن است قبلاً چیزی شبیه به این داشته باشید:

$( "p" ).hide();

در React این رفتار با استفاده از آن پیاده سازی می شود رندر شرطی. می توانید این را با ترکیب آن با جایگزینی برای رویدادهایی که اخیراً دیدیم مشاهده کنید:

import {useState} from "react"
export default function Index() {
  const [show, setShow] = useState(true);
  function clickButton(){
    setShow(false)
  }
  return (
    <div>
      <h1>Hello world</h1>
      {show && <button onClick={clickButton}>Click me</button>}
    </div>
  )
}

وقتی روی این دکمه کلیک کنید، مقدار آن تغییر می کند show به false و بنابراین، بیانیه چیزی را ارائه نمی کند. این را می توان با عملگر شرطی گسترش داد تا یک چیز یا چیز دیگری را نشان دهد، بسته به مقداری مانند این:

show ? <p>Show this if show is true</p> : <p>Show this if show is false</p>

واکشی داده ها

در jQuery از Ajax برای استفاده می شود واکشی داده های خارجی بدون بارگیری مجدد در React، این کار را می توان با استفاده از useEffect قلاب. برای این مثال، هنگام بارگیری صفحه، نرخ ارز را از یک API عمومی دریافت می‌کنیم:

import { useState, useEffect } from "react";
export default function Index() {
  const [er, setEr] = useState(true);
  useEffect(async () => {
    const result = await fetch("https://api.exchangerate.host/latest");
    const exchangerate = await result.json();
    setEr(exchangerate.rates["GBP"]);
  }, []);
  return (
    <div>
      <h1>Hello world</h1>
      <p>Exchange rate: {er}</p>
    </div> 
  );
}

useEffect یک تابع و یک آرایه وابستگی می گیرد. تابع با استفاده از واکشی داده ها را انجام می دهد async به عنوان fetch API به صورت ناهمزمان سپس می‌توانیم هر حالتی را که می‌خواهیم در آنجا تنظیم کنیم و در صفحه به‌روزرسانی می‌شود. آرایه وابستگی تعیین می کند که کدام تغییرات مقدار تابع را اجرا می کند. در این حالت، روی یک آرایه خالی تنظیم می‌شود که به این معنی است که تابع تنها زمانی اجرا می‌شود که صفحه برای اولین بار بارگذاری شود.

فراتر از این، Next.js نیز ارائه می دهد گزینه هایی برای واکشی داده ها در سرور یا در زمان ساخت برای زمان ساخت واکشی داده ها، تابع getStaticProps می تواند به کار رود. این تابع عملکرد را بهبود می بخشد زیرا داده ها را می توان با صفحه ارائه کرد – به جای انتظار در یک سرویس خارجی. برای استفاده از آن، این تابع را در a ایجاد کنید صفحه چون در کامپوننت ها کار نمی کند.

export async function getStaticProps() {
  return {
    props: {},
  }
}

می‌توانید قبل از بازگشت، هر واکشی داده‌ای را که می‌خواهید انجام دهید و پس از آن، داده‌ها را به صفحه زیر منتقل کنید props – سپس داده‌ها به صفحه ارائه می‌شوند و می‌توان به آنها دسترسی داشت.

با جایگزینی نام تابع از getStaticProps به getServerSideProps، تابع فراخوانی می شود در هر درخواست، به شما این امکان را می دهد که در صورت نیاز از توابع Node.js استفاده کنید. همچنین به شما این امکان را می‌دهد که درخواست‌های داده زیادی را روی سرور انجام دهید و آنها را پردازش کنید تا پهنای باند مورد استفاده مشتری را کاهش دهید.

شما همچنین می توانید یک راه میانی بین این دو به نام بازسازی استاتیکی افزایشی. این گزینه یک صفحه استاتیک را به همان روش ایجاد می کند getStaticProps، اما به شما امکان می دهد a را مشخص کنید دوره اعتبار سنجی مجدد – زمانی که درخواستی حداکثر به اندازه دوره ای که شما مشخص کرده اید، صفحه را دوباره ایجاد می کند. برای انجام این کار، باید در کنار لوازم جانبی، a revalidate با زمان بر حسب ثانیه که می خواهید کلید بزنید.

اشیاء در عناصر DOM

با jQuery، باید مراقب باشید که از کدام روش برای تبدیل یک شی به عناصر DOM استفاده می کنید. متداول‌ترین مثال این است که فهرستی از آیتم‌ها ایجاد کنید زیرا با jQuery، یک حلقه روی آیتم‌ها هر کدام را یکی یکی به DOM اضافه می‌کند. با React، DOM مجازی برای ایجاد استفاده می شود تفاوت های حالت جدید از فعلی این بدان معنی است که با وجود افزودن موارد در یک حلقه، آنها به عنوان یک عملیات به DOM واقعی اضافه می شوند.

این کار با استفاده از map عملکرد در جاوا اسکریپت، جایی که می توانید هر مورد را به JSX نگاشت کنید.

export default function Index() {
  const fruits = ["Apple", "Orange", "Pear"];
  return (
    <div>
      <h1>Hello world</h1>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

توجه داشته باشید که عنصر داخل map نیاز دارد الف key پشتیبانی این در فرآیند تفاوت که در بالا مورد بحث قرار گرفت استفاده می شود و تشخیص هر عنصر را برای React آسان می کند، بنابراین هر یک از این عناصر باید منحصر به فرد باشند.

معوق

استفاده از Deferred ها در jQuery را می توان با جاوا اسکریپت اصلی جایگزین کرد promise عملکرد. نحو برای deffereds طراحی شده است آینه عملکرد وعده ها، بنابراین نحو باید آشنا باشد و نیازی به تغییر زیاد نداشته باشد. یک مثال از جایی که ممکن است از deffered استفاده شود، in است واکشی داده ها. اگر این کار را با fetch روش در جاوا اسکریپت، سپس می توانید a اضافه کنید .then تا پایان واکشی همانطور که یک وعده را برمی گرداند. این کد فقط زمانی اجرا می شود که واکشی کامل شود و بنابراین داده (یا یک خطا) وجود خواهد داشت. شما می توانید این عملکرد را در حال استفاده در اینجا مشاهده کنید:

fetch("example.com")
.then((response) => {
  console.log(response)
})
.catch((error) => {
console.error(error)
})

این واکشی خواهد شد example.com و پاسخ واکشی شده را ثبت کنید مگر اینکه خطایی رخ دهد – در این صورت به عنوان یک خطا ثبت می شود.

علاوه بر این نحو، جدیدتر async/await از نحو نیز می توان استفاده کرد. اینها به تابعی نیاز دارند که به صورت تعریف شده است async، به همان روشی که ممکن است یک تابع را صادر کنید. شما می توانید آن را به این صورت اعلام کنید:

async function myFunction(){
  return
}

در داخل این تابع، می‌توانید با قرار دادن توابع غیرهمگام بیشتر فراخوانی کنید await در مقابل آنها، به عنوان مثال:

async function myFunction(){
  const data = await fetch("example.com")
  return data
}

این کد وعده ای را برمی گرداند که هنگام واکشی داده ها برطرف می شود، بنابراین باید در داخل یک تابع ناهمزمان فراخوانی شود تا منتظر نتیجه بماند. با این حال، برای اینکه خطاها را نیز دریافت کنید، باید یک شرطی بنویسید وضعیت پاسخ را بررسی کنید – اگر data.ok درست نیست، باید یک خطا پرتاب شود. سپس، می توانید این عبارات را به جای استفاده، در یک بلوک try catch بپیچید .catch. در این مقاله می توانید در مورد این روش ها بیشتر بخوانید.

بهبودها

مسیریابی

Next.js استفاده می کند مسیریابی سیستم فایل، که بسیار شبیه به استفاده از متفاوت است .html صفحات در یک وب سایت سنتی با این حال، این سیستم همچنین ویژگی های فراتر از آن را ارائه می دهد، مسیرهای پویا را ارائه می دهد و امکان دسترسی به یک صفحه را تحت طیف وسیعی از URL ها فراهم می کند.

به عنوان مثال، اگر یک وبلاگ دارید، ممکن است همه فایل های خود را در زیر نگه دارید /blog/*، ایجاد یک فایل [slug].jsx درون blog پوشه – که به آن محتوا اجازه می دهد برای همه صفحات زیر ارائه شود blog. سپس، می‌توانید از روتر در Next.js برای پیدا کردن مسیری که به آن پیمایش شده است استفاده کنید، مانند:

const router = useRouter()
const { slug } = router.query

مسیرهای API

مسیرهای API به شما این امکان را می‌دهند که باطن خود را در برنامه Next.js خود بنویسید. برای استفاده از این مسیرها، یک api پوشه در شما pages دایرکتوری – اکنون، هر فایلی که در داخل آن ایجاد می شود، مانند بقیه صفحات، به جای مشتری، روی سرور اجرا می شود.

برای شروع با اینها، باید صادرات یک تابع پیش فرض از فایل، و این می تواند دو پارامتر داشته باشد. اولی درخواست ورودی است و دومی به شما امکان می دهد پاسخ را ایجاد کنید. یک مسیر اصلی API را می توان به صورت زیر نوشت:

export default function handler(request, response) {
  response.status(200).json({ magazine: 'Smashing' })
}

محدودیت ها

رابط کاربری جی کوئری

شما ممکن است از jQuery UI در برنامه خود برای رابط کاربری استفاده کنید، اما React یک کتابخانه رسمی UI مانند این ارائه نمی دهد. با این وجود، طیف وسیعی از جایگزین ها تولید شده است. دو تا از محبوب ترین ها هستند دسترسی به UI و واکنش آریا. هر دوی این گزینه‌ها به شدت بر قابلیت دسترسی تمرکز می‌کنند و اطمینان می‌دهند که پروژه‌ای که ایجاد می‌کنید برای طیف وسیع‌تری از کاربران قابل استفاده است.

انیمیشن

در حالی که می‌توانید به‌جای افکت‌ها از رندر شرطی استفاده کنید، این کارکرد یکسانی را ارائه نمی‌دهد، زیرا نمی‌توانید کارهایی مانند محو کردن محتوا را انجام دهید. یکی از کتابخانه هایی که به ارائه این قابلیت کمک می کند این است React Transition Group – که به شما امکان می دهد انتقال ورودی و خروجی را تعریف کنید.

نتیجه

حرکت از jQuery به Next.js یک است تعهد بزرگبه خصوص برای پایه های کد بزرگ. با این حال، این انتقال به شما امکان می‌دهد از مفاهیم جدیدتر (مانند واکشی داده‌ها در زمان ساخت) استفاده کنید و مسیرهای مهاجرت ساده‌ای به نسخه‌های جدید React و Next.js را به همراه ویژگی‌هایی که ارائه می‌کنند، تنظیم می‌کند.

React می تواند به شما کمک کند کد خود را بهتر سازماندهی کنید (که به ویژه برای پایگاه های کد بزرگ مهم است) و بهبود عملکرد قابل توجهی را از طریق استفاده از DOM مجازی به ارمغان می آورد. به طور کلی، من معتقدم که انتقال از jQuery به Next.js ارزش تلاش را دارد و امیدوارم اگر تصمیم به مهاجرت دارید، از تمام ویژگی‌هایی که React و Next.js ارائه می‌دهند لذت ببرید.

مطالعه بیشتر در مجله Smashing