خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

انتقال برنامه از jQuery به React

ارشیا یوسفی ادیب ۸ آبان, ۱۴۰۱ 5 min read

حرکت به سمت واکنش؟ کشف کنید که چگونه فرآیند انتقال از jQuery را آسان کنید.

jQuery و React هر دو کتابخانه های محبوب جاوا اسکریپت برای توسعه front-end هستند. در حالی که jQuery یک کتابخانه دستکاری DOM است، React یک کتابخانه جاوا اسکریپت برای ساخت رابط های کاربر است.

نحوه انتقال یک برنامه موجود از jQuery به React را بیاموزید.

jQuery در مقابل React؟

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

چرا از jQuery به React مهاجرت کنیم؟

دلایل مختلفی وجود دارد که ممکن است بخواهید برنامه خود را از jQuery به React منتقل کنید.

  • React سریعتر از jQuery است: اگر در مورد عملکرد خام صحبت می کنیم، React سریعتر از jQuery است. این به این دلیل است که React از یک DOM مجازی استفاده می‌کند که یک نمایش جاوا اسکریپت از DOM واقعی است. این بدان معنی است که وقتی کاربر با یک برنامه React تعامل می کند، تنها بخش هایی از DOM که تغییر می کنند به روز می شوند. این کارآمدتر از دستکاری کامل DOM جی کوئری است.
  • React قابل نگهداری تر است: یکی دیگر از دلایل مهاجرت به React این است که قابل نگهداری تر از jQuery است. این به این دلیل است که کامپوننت های React مستقل هستند، بنابراین می توانید به راحتی از آنها استفاده مجدد کنید. این به این معنی است که اگر نیاز به تغییر در کامپوننت React دارید، می‌توانید این کار را بدون تأثیرگذاری بر بقیه پایگاه کد انجام دهید.
  • React مقیاس پذیرتر است: در نهایت، React مقیاس پذیرتر از jQuery است. از معماری مبتنی بر کامپوننت استفاده می کند که مقیاس پذیرتر از رویکرد یکپارچه jQuery است. این بدان معنی است که شما می توانید به راحتی یک برنامه React را در صورت لزوم گسترش دهید و تغییر دهید.
  • React پشتیبانی بهتری برای تست واحد دارد: وقتی نوبت به تست واحد می رسد، React از jQuery پشتیبانی بهتری دارد. از آنجایی که می توانید به راحتی کامپوننت های React را ایزوله کنید، نوشتن تست های واحد برای آنها آسان تر است.
مطلب مرتبط:   3 ارائه دهنده خدمات Backend-as-a-a-Service برای React Apps

چگونه برنامه خود را از jQuery به React منتقل کنیم

اگر قصد دارید برنامه خود را از jQuery به React منتقل کنید، چند نکته وجود دارد که باید در نظر داشته باشید. مهم است که بدانید برای شروع به چه چیزی نیاز دارید و ایده خوبی در مورد اینکه چگونه می توانید بخش های جداگانه برنامه خود را منتقل کنید، مهم است.

پیش نیازها

قبل از شروع فرآیند مهاجرت، چند کار وجود دارد که باید برای تنظیم موارد انجام دهید. ابتدا باید یک برنامه React با استفاده از create-react-app ایجاد کنید.

پس از نصب این وابستگی ها، باید فایلی به نام index.js در دایرکتوری src خود ایجاد کنید. این فایل نقطه ورود برنامه React شما خواهد بود.

در نهایت، می‌توانید به بخش‌های جداگانه کدهای خود بروید و آنها را بر اساس آن به‌روزرسانی کنید.

1. رسیدگی به رویدادها

در jQuery می توانید رویدادها را به عناصر پیوست کنید. برای مثال، اگر یک دکمه دارید، ممکن است یک رویداد کلیکی را به آن ضمیمه کنید. هنگامی که شخصی روی دکمه کلیک می کند، کنترل کننده رویداد اجرا می شود.

$("button").click(function() {
// do something
});

React رویدادها را متفاوت مدیریت می کند. به جای پیوستن رویدادها به عناصر، آنها را در مولفه ها تعریف می کنید. به عنوان مثال، اگر یک دکمه دارید، رویداد کلیک را در مؤلفه تعریف می کنید:

class Button extends React.Component {
handleClick() {
// do something
}
render() {
return (
<button onClick={this.handleClick}>
Click me!
</button>
);
}
}

در اینجا، مؤلفه Button شامل تعریف متد handleClick() است. هنگامی که شخصی روی دکمه کلیک می کند، این روش اجرا می شود.

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

مطلب مرتبط:   با استفاده از پایتون یک ادای احترام به Excitebike ایجاد کنید

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

2. اثرات

در jQuery، ممکن است از متدهای .show() یا .hide() برای نمایش یا پنهان کردن یک عنصر استفاده کنید. مثلا:

$("#element").show();

در React می توانید از قلاب useState() برای مدیریت وضعیت استفاده کنید. به عنوان مثال، اگر می خواهید یک عنصر را نشان دهید یا پنهان کنید، حالت را در کامپوننت تعریف کنید:

import { useState } from "react";
function Component() {
const [isShown, setIsShown] = useState(false);
return (
<div>
{isShown && <div>Hello!</div>}
<button onClick={() => setIsShown(!isShown)}>
Toggle
</button>
</div>
);
}

این کد متغیر حالت isShown و تابع setIsShown() را تعریف می کند. React انواع مختلفی از قلاب ها را دارد که می توانید در برنامه خود استفاده کنید، که useState یکی از آنهاست. هنگامی که کاربر روی دکمه کلیک می کند، متغیر حالت isShown به روز می شود و عنصر فقط در صورت لزوم نمایش داده می شود.

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

3. واکشی داده ها

در jQuery می توانید از متد $.ajax() برای واکشی داده ها استفاده کنید. به عنوان مثال، اگر می خواهید برخی از داده های JSON را واکشی کنید، می توانید این کار را به صورت زیر انجام دهید:

$.ajax({
url: "https://example.com/data.json",
dataType: "json",
success: function(data) {
// do something with the data
}
});

در React می توانید از متد fetch() برای واکشی داده ها استفاده کنید. در اینجا نحوه واکشی داده های JSON با استفاده از این روش آورده شده است:

مطلب مرتبط:   آشنایی با انواع ژنریک Rust

fetch("https://example.com/data.json")
.then(response => response.json())
.then(data => {
// do something with the data
});

در jQuery، استفاده از متد $.ajax() آسان است. با این حال، رسیدگی به خطاها می تواند دشوار باشد. در React، متد fetch() مفصل‌تر است، اما رسیدگی به خطاها آسان‌تر است.

4. CSS

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

button {
background-color: red;
color: white;
}

در React می توانید از CSS به روش های مختلف استفاده کنید. یکی از راه ها استفاده از استایل های درون خطی است. به عنوان مثال، اگر می خواهید به یک دکمه استایل بدهید، می توانید این کار را با افزودن ویژگی style به عنصر انجام دهید:

<button style={{backgroundColor: &aposred&apos, color: &aposwhite&apos}}>
Click me!
</button>

روش دیگر برای استایل دادن به کامپوننت های React استفاده از استایل های جهانی است. استایل های سراسری قوانین CSS هستند که شما خارج از یک کامپوننت تعریف می کنید و برای تمام اجزای برنامه اعمال می کنید. برای انجام این کار، می توانید از یک کتابخانه CSS-in-JS مانند styled-components استفاده کنید:

import styled from &aposstyled-components&apos;
const Button = styled.button`
background-color: red;
color: white;
`;

هیچ انتخاب درست یا غلطی بین سبک های درون خطی و سبک های جهانی وجود ندارد. این واقعا به نیاز شما بستگی دارد. به طور کلی، استفاده از سبک های درون خطی برای پروژه های کوچک آسان تر است. برای پروژه های بزرگتر، سبک های جهانی گزینه بهتری هستند.

برنامه React خود را به راحتی اجرا کنید

یکی از مهم ترین مزایای React این است که به راحتی می توان React App خود را به کار برد. می توانید React را روی هر وب سرور استاتیکی استقرار دهید. شما فقط باید کد خود را با استفاده از ابزاری مانند Webpack کامپایل کنید و سپس فایل bundle.js حاصل را روی وب سرور خود قرار دهید.

همچنین می توانید برنامه React خود را به صورت رایگان در صفحات GitHub میزبانی کنید.

Tags: