در این سری مقالات، مروری بر کتابخانه ReactJS خواهیم داشت. به طور کلی با آن آشنا می‌شویم، برای Visual Studio Code پیکربندیش میکنیم و قابلیت‌های مختلف کتابخانه را بررسی میکنیم. هر چند که مثالها در کل ساده هستند، اما پیش نیاز درک کامل آنها، آشنا بودن خواننده با HTML DOM، JavaScript و Ajax است. در قسمت اول، کتابخانه را معرفی و مثال‌هایی از امکانات اصلی آن‌را مرور میکنیم.
React یک کتابخانه متن‌باز جاوااسکریپتی، برای ساخت رابط کاربری به صورت پویا، بر پایه تغییر وضعیت اولیه المانها (تگ‌ها) نسبت به داده‌های وارد شده از سمت سرور یا داده‌های ایجاد شده در سمت کاربر، برای ساخت برنامه‌های تک‌صفحه‌ای در بستر وب است. این کتابخانه توسط فیس بوک ساخته شده و توسط فیس‌بوک، اینستاگرام و جمعی از شرکت‌ها و اشخاص منفرد، توسعه داده شده و نگهداری میشود.
کلمه React به معنای واکنش نشان دادن است و این دقیقا کاری است که این کتابخانه انجام میدهد. وقتی بخشی از برنامه تغییر میکند، این تغییرات باید در جایی منعکس شوند. مثلا اگر توسط Ajax داده‌هایی را از سرور دریافت کرده‌ایم، به چیزی بیشتر از یک جدول ثابت برای نمایش و تبادل با داده‌های رسیده احتیاج داریم. توسط React رابط کاربری (HTML) را با استفاده از JavaScript ایجاد میکنیم. React برای کار با Ajax فوق‌العاده است!
مرورگر‌ها برای رندر کردن یک HTML DOM به صورت پویا مشکلی ندارند؛ اما به اندازه کافی سریع نیستند. بخصوص زمانیکه نیاز به به‌روز کردن DOM می‌رسد و مرورگر تغییرات جدید را در حافظه موقت خود ندارد. DOM یک گلوگاه است و بهتر است، از داشتن کدهای خیلی زیاد HTML در صفحه پرهیز کنیم. بخصوص در صفحه‌هایی با اطلاعات پویا بهتر است کار ساخت و تغییر رابط کاربری را به JavaScript بسپاریم. اگر تگ‌های HTML به صورت اشیاء JavaScript ارائه شوند، امکانات بیشتری برای کار با آنها خواهیم داشت.
React متد createElement را برای ساخت تگ‌های HTML دارد که یک شیء JavaScript را ایجاد میکند. البته میشود همین کار را با JavaScript نیز انجام داد. ارزش ایجاد تگ‌های HTML با React زمانی است که میخواهیم با داده‌ها و تغییرات آنها سر و کار داشته باشیم. در قطعه کد زیر ساخت تگ img، توسط JavaScript و React آورده شده.
var image = document.createElement("img");
image.setAttribute("src", "logo.png");
React.createElement("img", { src : "logo.png" });با ساخت تگ‌ها توسط React، نماینده‌ای از تگ ساخته شده را در حافظه داریم که از نمونه‌ای که در مرورگر به صورت ایستا وجود دارد، جداست. به این صورت می‌توانیم تغییراتی را که میخواهیم بر روی DOM انجام شوند، بر اساس ساختاری که در حافظه داریم، اعمال کنیم.
Virtual DOM
تفاوت در ساخت تگ‌های HTMLبه صورت مجازی بین JavaScriptو Reactاین است که Reactوضعیت تگ‌هایی را که می‌سازد دنبال میکند. برای مثال فرض کنید
نام سه محصول را در یک تگ <ul> نشان داده‌ایم. Reactوضعیت اصلی این تگ را که به مرورگر فرستاده، در حافظه دارد و
همچنین در اثر تغییر منبع داده‌ای که برای <ul> مشخص کرده‌ایم (که
میتواند ورود اطلاعات به صورت Ajaxباشد (مثلا اضافه شدن یک
محصول جدید)) وضعیت جدیدی را برای تگ <ul> در حافظه ایجاد میکند.
با وجود دو وضعیت برای یک تگ در حافظه، Reactمیتواند تفاوت بین آنها
را تشخیص داده و تگ را به روز کند. به این حالت عملکرد React، اصطلاحا Virtual DOMمی‌گویند.
Reactرابط کاربری را به صورت یک مدل می‌بیند و
این مدل را با توجه به وضعیت اصلی آن در حافظه دوباره می‌سازد. برای Reactمهم نیست که ماهیت تغییر چیست. فقط وضعیت‌ها را مثل دو عکس می‌بیند
و میفهمد که آیا چیزی عوض شده‌است یا نه. دیالوگ Reactبا مرورگر اینطور است: ای تگ
<ul> این لیست را نشان بده (لیستی با سه
محصول)، و بعد می‌گوید: ای تگ <ul> این لیست را نشان بده
(لیستی با چهار محصول)!
کامپوننت‌های React
رابط‌های کاربری مثل تگ‌های HTML برای Reactبه معنای Componentهستند. استفاده از این
مؤلفه‌های مجزا، مزایای زیادی دارند که در زیر مثالی از نحوه ساخت یک Componentرا در Reactمی‌بینیم.
<a href = “http://google.com”><img src=”google.png”/></a>
// Components
<clickableimage/><linkimage/>
در کد بالا، بخش اول واضح است. عکسی که قابلیت کلیک شدن را دارد. حال
فرض کنید یکی از کامپوننت‌های <clickableimage/>یا <linkimage/>، همان تصویر قابل کلیک را
ایجاد کنند. با نام گذاری واضح کامپوننت‌ها، خوانایی برنامه بهتر میشود. یعنی
میدانیم هر کامپوننت چه کاری را برای ما انجام میدهد. با این تصور که اگر تگ‌های زیاد و طولانی را در بخش رابط کاربری داریم، ارزش استفاده از کامپوننت‌های Reactمشخص میشود.
قابلیت استفاده مجدد
در React کامپوننت‌ها برای اساس توابع ساخته می‌شوند. یعنی وقتی یک کامپوننت را صدا بزنیم، در واقع یک تابع را اجرا میکنیم. در نتیجه کامپوننت‌ها رفتار توابع را دارند؛ ورودی میگیرند و خروجی که یک DOM مجازی است را تحویل میدهند. اگر تابعی که مسئول ساخت کامپوننت است وابستگی به توابع یا متغیرهای بیرونی نداشته باشد، میتواند در جای دیگری از برنامه یا برنامه‌ای دیگر مجددا استفاده شود. کد زیر نشان میدهد که چطور کامپوننت‌های React ساخته می‌شوند.
var ClickableImage = function(props) {
return (<a href={props.href}><img src={props.src} /></a>
);
};
ReactDOM.render(
<ClickableImage href="http://google.com" src="logo.png" />,
document.getElementById("targetDivId"));
در قسمت‌های بعد، به هر یک از امکانات ReactJS نگاهی دقیق‌تر و مثال‌هایی بیشتر، خواهیم داشت.