قبل از شروع به ساخت برنامه های کاربردی در React مطمئن شوید که اصول شما قوی هستند.
به عنوان محبوب ترین کتابخانه frontend، همه می خواهند React را یاد بگیرند. ReactJS اساساً جاوا اسکریپت است. اما این بدان معنا نیست که برای انتقال به ReactJS باید همه چیز را در جاوا اسکریپت یاد بگیرید. درک مفاهیم اساسی جاوا اسکریپت به شما کمک می کند تا مفاهیم React را راحت تر درک کنید و در نهایت توانایی شما را برای کار بر روی پروژه ها تسریع می کند.
بیایید مفاهیم اساسی را که باید در مورد جاوا اسکریپت قبل از رفتن به ReactJS بدانید، بیان کنیم.
1. توابع پیکان
توابع arrow به طور گسترده در React استفاده می شود. از نسخه 16.8، React از کامپوننت‌های مبتنی بر کلاس به کامپوننت‌های کاربردی منتقل شد. توابع پیکان به شما امکان می دهند توابعی با نحو کوتاهتر ایجاد کنید.
بیایید آن را در مثال های زیر نشان دهیم:
عملکرد منظم
function greeting() {
return 'hello'
}
console.log(greeting()) //hello
تابع پیکان
let greeting = () => 'hello'
console.log(greeting()) //hello
دو تابع بالا خروجی یکسانی دارند، اگرچه نحو متفاوت است. عملکرد فلش کوتاه تر و تمیزتر از عملکرد معمولی به نظر می رسد. معمولاً اجزای React دارای ساختار زیر هستند:
import React from 'react'
const Book = () => {
return (
<div>Book</div>
)
}
export default Book
توابع پیکان نامی ندارند. اگر می خواهید آن را نام گذاری کنید، آن را به یک متغیر اختصاص دهید. تفاوت بین یک تابع معمولی و یک تابع فلش بیشتر از نحو است. درباره عملکردهای پیکان در مستندات توسعه دهندگان موزیلا بیشتر بیاموزید.
2. تخریب
تخریب ساختار برای به دست آوردن داده ها از ساختارهای داده پیچیده استفاده می شود. در جاوا اسکریپت، آرایه ها و اشیا می توانند مقادیر زیادی را ذخیره کنند. می توانید مقادیر را دستکاری کرده و در قسمت های مختلف برنامه از آنها استفاده کنید.
برای بدست آوردن این مقادیر، باید متغیر را تخریب کنید. بسته به ساختار داده ای که با آن سر و کار دارید، می توانید از علامت نقطه (.) یا نماد براکت استفاده کنید. مثلا:
const student = {
'name': 'Mary',
'address': 'South Park, Bethlehem',
'age': 15
}
تخریب ساختار:
console.log(student.name) // output Mary
در مثال بالا، نماد نقطه به مقدار کلید ‘name’ دسترسی دارد. در ReactJS، شما از مفهوم تخریب ساختار برای به دست آوردن و به اشتراک گذاری مقادیر در برنامه خود استفاده خواهید کرد. تخریب به جلوگیری از تکرار کمک می کند و کد شما را خواناتر می کند.
3. روش های آرایه
در حین کار بر روی پروژه های React چندین بار با آرایه ها مواجه خواهید شد. آرایه مجموعه ای از داده ها است. شما داده‌ها را در آرایه‌ها ذخیره می‌کنید، بنابراین می‌توانید در صورت نیاز دوباره از آنها استفاده کنید.
روش های آرایه در درجه اول برای دستکاری، بازیابی و نمایش داده ها استفاده می شود. برخی از روش‌های آرایه‌ای که معمولاً مورد استفاده قرار می‌گیرند عبارتند از map()، filter() و reduce(). شما باید با روش های آرایه آشنا باشید تا بفهمید چه زمانی باید هر کدام را اعمال کنید.
برای مثال، متد map() روی تمام آیتم های یک آرایه تکرار می شود. روی هر عنصر آرایه عمل می کند تا یک آرایه جدید ایجاد کند.
const numbers = [9, 16, 25, 36];
const squaredArr = numbers.map(Math.sqrt) // 3,4,5,6
در ReactJS از روش های آرایه بسیار استفاده خواهید کرد. شما از آنها برای تبدیل آرایه ها به رشته، پیوستن، افزودن آیتم ها و حذف آیتم ها از آرایه های دیگر استفاده خواهید کرد.
4. شرایط کوتاه
شرط ها عباراتی هستند که جاوا اسکریپت برای تصمیم گیری در کد استفاده می کند. شرط های کوتاه شامل && (و)، II (یا)، و اپراتور سه تایی است. اینها عبارت‌های کوتاه‌تری از شرایط و عبارات if/else هستند.
مثال زیر نحوه استفاده از عملگر سه تایی را نشان می دهد.
کد با عبارت if/else:
function openingTime(day) {
if (day == SUNDAY) {
return 12;
}
else {
return 9;
}
}
کد با اپراتور سه تایی:
function openingTime(day) {
return day == SUNDAY ? 12 : 9;
}
با انواع شرطی ها با تمرکز ویژه روی شرطی های کوتاه آشنا شوید. اینها به طور گسترده در React استفاده می شوند.
5. Literals الگو
قالب Literals از تیک های برگشتی (“) برای تعریف رشته استفاده می کند. الگوها به شما امکان می دهند داده های رشته را دستکاری کنید و آنها را پویاتر کنید. الفبای الگوی برچسب‌گذاری شده به شما امکان می‌دهد عملیات را در یک رشته انجام دهید. اینها عبارت‌های کوتاه‌تری از شرایط و عبارات if/else هستند.
مثلا:
let firstName = "Jane";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`; // Welcome Jane Doe!
6. اپراتورهای پخش
عملگر Spread (…) مقادیر یک شی یا آرایه را در دیگری کپی می کند. نحو آن از سه نقطه تشکیل شده است که نام متغیر را دنبال می کند. به عنوان مثال (… نام). ویژگی های دو آرایه یا شی را ادغام می کند.
مثال زیر نحوه استفاده از عملگر spread را برای کپی کردن مقادیر یک متغیر به متغیر دیگر نشان می دهد.
const names = ['Mary', 'Jane'];
const groupMembers = ['Fred', ...names, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
می توانید از عملگر spread برای انجام تعدادی عملیات استفاده کنید. اینها شامل کپی کردن محتویات یک آرایه، درج آرایه در آرایه دیگر، دسترسی به آرایه های تو در تو، و ارسال آرایه ها به عنوان آرگومان است. می توانید از عملگر spread در ReactJS برای مدیریت تغییرات حالت در کامپوننت ها استفاده کنید.
چرا ReactJS را یاد بگیریم؟
ReactJS به دلایل خوبی محبوب است. دارای منحنی یادگیری کوتاه، قابل اعتماد است و به سرعت در DOM ارائه می شود. از اجزای مستقل پشتیبانی می کند و ابزارهای اشکال زدایی عالی دارد.
ReactJS مفاهیم جدید جاوا اسکریپت را از ECMAScript 6 (ES6) ترکیب می کند. یادگیری مفاهیم اساسی در جاوا اسکریپت توسعه پروژه ها را در ReactJS آسان تر می کند.
علاوه بر همه اینها، ReactJS دارای یک انجمن عالی است که به طور مداوم به روز رسانی های جدید را منتشر می کند. اگر می خواهید یک کتابخانه جاوا اسکریپت یاد بگیرید، ReactJS یک انتخاب عالی خواهد بود. چارچوب Next.js تکمیل کننده محدودیت های ReactJS است. ترکیبی از این دو ReactJS را به یک کتابخانه قدرتمند جلویی تبدیل می کند.