React یک کتابخانه محبوب جاوا اسکریپت برای ساخت رابط کاربری است. این توسط فیس بوک ایجاد شد و در سال 2013 برای عموم منتشر شد. از آن زمان به بعد، در صنعت فناوری استقبال گسترده ای پیدا کرد و توسط بسیاری از شرکت ها، بزرگ و کوچک، برای ساخت برنامه های کاربردی وب و موبایل استفاده می شود.
یکی از دلایل محبوبیت React توانایی آن در ایجاد رابط های کاربری پیچیده و پویا به راحتی است. React از نحوی به نام JSX (جاوا اسکریپت XML) استفاده می‌کند که به توسعه‌دهندگان اجازه می‌دهد تا کدهای HTML مانند را در جاوا اسکریپت بنویسند و استدلال در مورد ساختار و رفتار برنامه‌های کاربردی خود را آسان‌تر می‌کند.
در این مقاله، جزئیات JSX را بررسی خواهیم کرد و بررسی خواهیم کرد که چگونه React را به ابزار قدرتمندی برای ساخت رابط های کاربری پویا و جذاب تبدیل می کند.
پیش نیازها
برای پیگیری این مقاله باید موارد زیر را داشته باشید:
- دانش اولیه HTML
- دانش در جاوا اسکریپت
- مهارت های اولیه React
معرفی
JSX یک پسوند نحوی برای جاوا اسکریپت است و با React برای توصیف اینکه رابط کاربری چگونه باید باشد استفاده می شود. این امر React را قادر می‌سازد تا از جنبه اعلامی برنامه‌نویسی استفاده کند. ممکن است کلمه اعلانی را کمی پیچیده بیابید، اما نگران نباشید که در این مقاله به آن خواهیم پرداخت.
برای درک نقش JSX در React، نگاهی به نحوه ایجاد عناصر HTML در جاوا اسکریپت ساده خواهیم انداخت و سپس نحوه ایجاد آنها در React را بررسی خواهیم کرد.
پوشش خواهیم داد:
- برنامه نویسی امری در مقابل اعلامی
- ایجاد عناصر HTML در Vanilla JavaScript
- ایجاد عناصر HTML در React
- تودرتو در JSX
برنامه نویسی امری در مقابل اعلامی
فرض کنید می خواهید کسی برای صبحانه کیک درست کند. شما دو گزینه دارید:
اولاً، می‌توانید به سادگی از نانوا درخواست کنید که پخت را انجام دهد، با این فرض که آنها می‌دانند چگونه این کار را انجام دهند، و از دادن هرگونه دستورالعمل در مورد فرآیند پخت صرفنظر کنید. از طرف دیگر، همچنان می‌توانید کیک را درخواست کنید، اما دستورالعمل‌هایی را در مورد نحوه انجام فرآیند پخت به نانوا ارائه دهید.
برنامه نویسی امری یک پارادایم توسعه نرم افزار است که در آن توابع به طور ضمنی در هر مرحله مورد نیاز برای حل یک مشکل کدگذاری می شوند در حالی که برنامه نویسی اعلانی پارادایمی است که از انتزاع جریان کنترل در پس چگونگی دستیابی به یک راه حل خاص استفاده می کند.
Declarative آنچه را که می خواهید انجام دهید توصیف می کند نه اینکه چگونه می خواهید آن را انجام دهید.
ایده در مورد ارائه دستورالعمل در مورد اینکه چگونه کاری باید انجام شود جنبه ضروری برنامه نویسی را توضیح می دهد در حالی که دیگری جنبه اعلامی برنامه نویسی را توضیح می دهد.
ایجاد عناصر HTML در Vanilla JavaScript
قبل از اینکه به نحوه استفاده از JSX در برنامه‌های React بپردازیم، ابتدا متوجه می‌شویم که چگونه در جاوا اسکریپت خالص انجام می‌شود.
یک فایل index.html ایجاد کنید و کد زیر را پیست کرده و در مرورگر خود باز کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>The Document Object Model</h1>
<h2>The createElement() Method</h2>
<p>Create a p element and append it to the div with id "myDiv"</p>
<div id="myDiv" style="padding: 16px; background-color: paleturquoise;">
<h3>My Div</h3>
</div>
<script>
// create HTML element
const paragraph = document.createElement("p");
paragraph.innerHTML = "Created a paragraph using JS."
// append to the myDiv div
document.getElementById("myDiv").appendChild(paragraph)
</script>
</body>
</html>
createElement عنصر HTML مشخص شده توسط tagName که پارامتر آن است را ایجاد می کند.appendChild از طرف دیگر گره یا به عبارت بهتر عنصر ایجاد شده را به انتهای لیست فرزندان گره والد مشخص شده (در مورد ما “myDiv”) اضافه می کند.
اگر دو پارادایم برنامه نویسی بالا را درک کرده باشید، آن را به عنوان یک برنامه نویسی ضروری دسته بندی خواهید کرد زیرا ما به طور ضمنی دستورالعمل هایی را در مورد نحوه انجام آن ارائه می دهیم.
ایجاد عناصر HTML در React
در React، JSX یک پسوند نحوی است که برای توصیف اینکه رابط کاربری چگونه باید باشد، توصیه می‌شود.
برای درک بیشتر چگونگی این اتفاق، ما قصد داریم با چسباندن کد زیر در ترمینال خود، یک برنامه ساده React ایجاد کنیم.
npx create-react-app jsx-demo
cd jsx-demo
npm start
می توانید فایل src/App.js را با چسباندن کد زیر ویرایش کنید
import React from "react"
function App() {
const h1Title = <h1 className="h1title">JSX in a nutshell</h1>
return(
h1Title
)
}
export default App
در جاوا اسکریپت، ما نمی توانیم عناصر HTML را به مقادیری که در بالا نشان داده شده است اختصاص دهیم، با این حال، در React، JSX به ما قدرت انجام این کار را می دهد.
از آنجایی که تقریباً همه چیز در جاوا اسکریپت یک شی است h1Title همچنین یک شی است و می‌توانیم آن را ثبت کنیم تا ببینیم حاوی چه چیزی است.
درست در زیر تخصیص h1Title می توانید اضافه کنید console.log(h1Title)
{
type: 'h1',
props: {
className: 'h1title',
children: 'JSX in a nutshell'
}
}
موارد فوق یک نمای تمیزتر از نتیجه ای است که پس از بررسی برنامه خود در کنسول مشاهده می کنید. این نمایش همان چیزی است که به عنوان a شناخته می شود React Element که خروجی نهایی HTML را به صورت یک شیء ساده نشان می دهد.
هر گره در JSX یک شی ساده است که یک نمونه جزء یا یک گره DOM و ویژگی های مورد نظر آن (props) را توصیف می کند.
دو ویژگی اصلی React Element این است type که نوع گره و props که ویژگی هایی است که یک جزء دریافت می کند.
هنگامی که React Elements برای همه مؤلفه ها ایجاد شد، React آن را به عناصر واقعی HTML DOM تبدیل می کند.
تودرتو در JSX
علاوه بر این، تودرتو را می توان در JSX انجام داد، همانطور که در HTML انجام می شود. یکی از نگرانی های کلیدی هنگام تودرتو کردن گره های JSX این است که اطمینان حاصل شود که همیشه باید یک گره والد وجود داشته باشد.
اجرای بد JSX را در نظر بگیرید:
const pageContent =
<h1 className="h1title">JSX in a nutshell</h1>
<p>It's amazing how JSX works</p>
برای رفع خطایی که توسط کد بالا ایجاد می‌شود، می‌توانیم آن را با یک div مانند شکل زیر بپیچیم:
const pageContent =
<div className="page-content">
<h1 className="h1title">JSX in a nutshell</h1>
<p>It's amazing how JSX works</p>
</div>
ما هم می توانیم دلجویی کنیم pageContent شیء کنید و ببینید چه چیزی در آن وجود دارد.
{
type: 'div',
props: {
children: [
{
type: 'h1',
props: {
className: 'h1title',
children: 'JSX in a nutshell'
}
},
{
type: 'p',
props: {
children: 'It\'s amazing how JSX works'
}
},
]
className: 'page-content',
}
}
children آرایه ای از دو شی است که هر کدام یک گره JSX خاص را نشان می دهند. این آرایه بسته به تعداد فرزندان یک گره والد رشد خواهد کرد.
توانایی React برای تبدیل این اشیا به عناصر HTML بدون اینکه ما، برنامه نویسان، به طور ضمنی این کار را انجام دهیم، React را اعلانی می کند.
نتیجه
بسیاری از توسعه دهندگان React، از جمله من، درک درستی از JSX و نقش آن در React ندارند. با این حال، پس از خواندن این مقاله، به درک مستقیمی از JSX و اینکه چگونه React را به عنوان یک کتابخانه قدرتمند ارتقا می دهد، به دست آوردیم.
اگر از خواندن این مقاله لذت بردید، لطفا لایک کنید!
