برنامه نویسی - طراحی وب

زبان برنامه نویسی React دنیای برنامه نویسی Front-end را در کنترل خود قرار می دهد. سوال این است که چرا؟! در این مقاله قصد داریم زبان برنامه نویسی React را به شما معرفی کرده و دلیل محبوبیت آن را بررسی کنیم. همچنین مقایسه ای بین این زبان قدرتمند با سایر فریم ورک و کتابخانه ها داشته باشیم.

بیایید دلیل محبوبیت سریع REACT را با یکدیگر بررسی کنیم:

• دلیل اول– کار با DOM API بسیار سخت است. React به برنامه نویس ها این توانایی را می دهد تا با یک مرورگر مجازی کار کنند که بسیار راحت تر از مرورگر های واقعی است. مرورگر مجازی Reactمثل یک مامور، رابط بین برنامه  نویس و مرورگر واقعی عمل می کند.
• دلیل دوم- React به برنامه نویس ها اجازه می دهد تا براحتی UI های خود را تعریف و مدل سازی کنند. این یعنی به جای این که تراکنش های مربوط به رابط های کاربری قدم به قدم توضیح داده شوند برنامه نویس می‌تواند فقط وضعیت نهایی UI ها را ( مثل یک تابع) تعریف کند. وقتی تغییراتی در وضعیت UI ها ایجاد شود؛ React  با توجه به وضعیت تعریف شده، UI  را بروز رسانی می کند.
• دلیل سوم- زبان برنامه نویسی React مثل جاوا اسکریپ است و API محدود و توابع کمی دارد که باید آن ها را یاد گرفت و روش استفاده از آن ها را بیاموزیم. بعد از یادگیری آن، مهارت های جاوا اسکریپتی شما برای کار با React کافی خواهند بود. یک برنامه نویس React می تواند در چند ساعت تمرین  و آموزش به یک React کار حرفه ای تبدیل شود.

البته این همه ی داستان نیست. بیایید با هم دلایل محبوبیت رو به رشد React را بررسی کنیم. یکی از این دلایل DOM مجازی در آن می باشد. مثالی را برای نشان دادن ارزش این نوع الگوریتم بررسی می کنیم.

مقالات مرتبط: آموزش React

تعریف رسمی React به این شکل است ” کتابخانه ی جاوا اسکریپت برای ایجاد رابطه های کاربری UI. ” این تعریف دو بخش مهم دارد:

• 1- ” React یک کتابخانه‌ی جاوا اسکریپت است و نه یک فریم ورک ” . React یک راه حل کامل نیست و معمولا نیاز به کتابخانه های بیشتری برای رسیدن به نتیجه‌ی دلخواه حس می شود. Reactسایر بخش های برنامه نویسی را برای رسیدن به نتیجه ای مطلوب پوشش نمی دهد. زبان برنامه نویسی React فقط بر روی یک کار تمرکز می کند و آن را به نحو احسنت انجام می دهد.
• 2- کاری که React به خوبی انجام می دهد در بخش دوم تعریف آن قید شده است. ” ایجاد رابط های کاربری UI” . یک رابط کاربری UI دقیقا تمامی چیزی است که ما جلوی کاربر قرار می دهیم تا بتواند با یک ماشین، ارتباط برقرار کند. UI  ها همه جا هستند. از دکمه های روی مایکرو ویو گرفته تا داشبود  یک موشک فضایی. اگر دستگاهی که ما با آن کار می کنیم زبان جاوا اسکریپت را بفهمد می توانیم با React یک UI  برای آن تعریف  کنیم.

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

زمانی که به شما می گویند: React ” اعلان کننده ” است بدان معنی است که ما UI را با React تعریف می‌کنیم و می گویم که چه چیزی لازم داریم ( نه این چه چگونه باید اجرا شود). React این کار را انجام خواهد داد و تعریف های ما را ترجمه کرده و به UI هایی برای مرورگر تبدیل خواهد کرد. این ویژگی در HTML  هم وجود دارد با این تفاوت که با React  می توان علاوه بر داده های استاتیک، داده های داینامیک را نیز مورد استفاده قرار داد.

سه مفهوم طراحی REACT که محبوبیت برنامه را بیشتر کرده اند!

• 1- استفاده از کامپوننت های چند بار مصرف(Reusable)، ترکیبی(Composable) و وضعیت دار(Stateful)

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

کامپوننت ها نیز دقیقا به همین شکل اند؛ ورودی آن ها را  ” Properties” و ” State” می نامیم و خروجی آن، UI است.( برای مرور گر شبیه به HTML است). می توان یک کامپوننت را در چند UI  مورد استفاده قرار داد. همچنین یک کامپوننت می تواند چندین کامپوننت دیگر را در خود جای دهد.

بر خلاف توابع، یک کامپوننت کامل در React دارای وضعیت مخصوص به خود است که داده های آن ممکن است در طول زمان تغییر کنند.

• 2- طبیعت بروز رسانی های React

نام React توضیح کاملی برای این مفهوم می باشد. وقتی وضعیت یک کامپوننت( ورودی آن) تغییر می کند، UI که توسط این کامپوننت ارائه می شود نیز تغییر خواهد کرد. این تغییر در تعریف UI  باید در دستگاهی که با آن کار می کنیم اعمال شود.

در یک مرور گر، باید View های HTML در DOM  دوباره ایجاد شوند. با React نگران چگونگی اعمال این تغییرات نیستیم چون React به سادگی این تغییرات را اعمال کرده و به شکل خودکار DOM را بروز رسانی می کند.

• 3- ارائه مجازی View ها در حافظه

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

وقتی فقط داده از سرور می گیریم ( در پس زمینه با Ajax) برای کار با داده به چیزی بیش از HTML نیاز است. یا باید HTML های پیشرفته ایجاد کنیم یا از توان جاوا‌‌اسکریپت برای تولید HTML بهره ببریم. هر دو روش مزیت ها و معضلاتی دارند. React با توجه به روش دوم معتقد است مزیت های آن بیشتر است.

در حقیقت، یک مزیت اصلی وجود دارد که مورد بحث ما نیز هست. استفاده از جاوا اسکریپت برای رندر HTML است که به React کمک می کند تا ارائه ای مجازی از HTML در حافظه داشته باشد ( که به آن DOM مجازی می‌گویند). React در ابتدا از DOM مجازی برای رندر HTML استفاده می کند و سپس، هر زمانی که تغییری ایجاد شود و HTML جدید در DOM  قرار بگیرد، به جای نوشتن کل Tree، فقط تفاوت بین Tree کنونی و قبلی در نظر گرفته می شود؛ (چون که React هر دو را در حافظه دارد). این فرایند Tree Reconciliation یا هم سان سازی خوانده می شود به نظر من بعد از Ajax بهترین اتفاق در دنیای برنامه نویسی تحت وب است.

در نمونه ی زیر ، ما بر روی آخرین مفهومی که در بالا به آن اشاره شد می پردازیم. (یک مثال ساده از فرایند هم سان سازی و تغییر مهمی که ایجاد می کند). همان کد HTML  را دو بار می نویسیم ؛ اولی برای API  های محلی با کمک جاوا اسکریپت و دومی با استفاده از تعریف همان HTML Tree  با کمک React.

برای تمرکز کامل بر روی این مفهوم، از کامپوننت ها استفاده نمی کنیم و از یک عملیات تغییر وضعیت فرضی با یک تایمرجاوا اسکریپت بهره خواهیم برد. هم چنین، از JSXها با وجود این که کد نویسی را ساده تر می‌کنند، استفاده نخواهیم کرد. من همیشه از JSX ها در هنگام کد نویسی با React استفاده می کنم، ولی در این جا برای فهم راحت تر مفهوم گفته شده مستقیما از API استفاده خواهد شد.

مثالی برای الگوریتم هم سان سازی REACT

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

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

در دایرکتوری، یک فایل index.html ایجاد کنید و یک تمپلیت HTML  استاندارد در آن قرار دهید. در این تمپلیت، یک فایل Script.js و یک جمله Console.log در متن قرار دهید تا بتوان آن را تست کرد:

فایل index.html را در مرور گرتان باز کنید و بررسی کنید که تمپلیت خالی بدون مشکل قابل رویت است و پیغام تستی که به شکل Console.log در Script.js قرار داده بودید، در سر برگ کنسول قابل رویت است:

حالا، بیایید کتابخانه React  را وارد کنیم(می توانید این کتابخانه را از وب سایت Reactjs بگیرید). متن React و React-dom را کپی کرده و در index.html قرار دهید :

در این جا این دو متن متفاوت را به دلیل اهمیت، در یک جا قرار می دهیم. کتابخانه React به تنهایی بدون مرورگر قابل استفاده نیست. برای استفاده از React با مرورگر به کتابخانه ReactDom نیاز دارید. زمانی که مرورگر Refresh شود، React و ReactDom  قابل رویت هستند.

با این راه اندازی ساده، حالا می توان به API های React و ReactDom  دسترسی پیدا کرد و هم زمان API های محلی در جاوااسکریپت که در ابتدا قرار بود مورد استفاده قرار بگیرند نیز قبال دسترسی هستند.

برای قرار دادن HTML در مرور گر به شکل پویا، می توان به سادگی از API های ساده جاوا اسکریپت و DOM استفاده کرد. بیایید یک Div برای هاست محتوای HTML جاوا اسکریپت ایجاد کنیم و نامش را “js” بگذاریم. در بخش Body  قبل از برچسب Script یک index,html اضافه کنید:

حالا در Script.js، این div ایجاد شده را به شکل یک ثابت بازنویسی کنیم. این ثابت (Constant) را jscontainer نام گذاری کنیم. می توانیم با کمک document.getElementById براحتی از HTML  به شکل زیر، Div را ایجاد کنیم:

برای کنترل محتوای این Div می توان از فرمان InnerHTML  مستقیما بر روی Div استفاده نمود . با استفاده از این فرمان می توان هر تمپلیت HTML که خواسته باشیم را در DOM قرار دهیم. پس بیایید یک Div را با کلاس “Demo” و “Hello JS” به عنوان محتوای آن ایجاد کنیم:

مطمئن شوید که این بخش از کد نویسی در مرور گر اجرا شده و پیام ” Hello JS” بر روی صفحه قابل رویت خواهد بود. Div نمایش داده شده تا این مرحله، UI ما محسوب می شود. این یک مثال ساده و یک متن، تنها برای نمایش به کاربر است.

برای مطالعه‌ی ادامه این مقاله به لینک ذیل مراجعه فرمایید:

دلیل محبوبیت زبان React (قسمت دوم)

منبع: لرن فایلز