بروزرسانی رابط کاربری با استفاده از روش‌های DOM و جاوا اسکریپت:
بیایید با هم ببینیم چگونه می‌توان با استفاده از روش‌های DOM و جاوا اسکریپت یک تگ h1 به پروژه افزود:
ویرایشگر کد خود را باز کرده و یک فایل index.html ایجاد کنید. در داخل این فایل HTML به روش زیر عمل کنید:
حال به div ساخته شده یک id منحصر به فرد بدهید تا بعداً بتوانید آن را صدا(Call) بزنید:
برای اینکه بتوانید کدهای جاوا اسکریپتی خود را وارد فایل HTML کنید، یک تک Script باید به آن اضافه کنید:
حال در این تک جاوا اسکریپتی ساخته شده می‌توانید از روش DOM استفاده کنید و با استفاده از کد getElementById()، می‌توانید div با id مشخصی را انتخاب کنید:
با استفاده از روش DOM می‌توانید یک h1 جدید و با استفاده از کدهای اسکریپتی ایجاد کنید:
برای اینکه از درست بودن کد خود و عملکرد صحیح آن خاطر جمع شوید، فایل HTML خود را داخل مرورگر باز کنید. در صفحه باز شده باید عبارتی که تایپ کرده‌اید دیده شود. در اینجا ما برای مثال عبارت: 'Develop. Preview. Ship. 🚀' را تایپ کرده‌ایم.
مقایسه HTML با روش DOM:
اگر به المان‌های DOM در داخل ابزارهای توسعه دهنده مرورگر(Browser DevTools) خود نگاه کنید متوجه خواهید‌شد که DOM (طبق کارهایی که بالاتر با هم انجام دادیم) شامل عنصر <h1> می‌باشد. DOMای که متعلق به یک صفحه(Page) است با DOMای که متعلق به سورس کد(Source Code) است متفاوت است.
دلیل این تفاوت این است که HTML محتوای صفحه اولیه را نمایش می‌دهد در حالی که DOM محتوای صفحه بروز شده را نمایش می‌دهد که با جاوا اسکریپت دست خوش تغییرات شده‌است.
بروزرسانی DOM با کدهای ساده و ابتدایی جاوا اسکریپت قابل اجرا و استفاده از این روش بسیار قدرتمند است، اما باید از تعداد کاراکترهای بیشتری برای پیاده‌سازی آن نسبت به HTML استفاده کنید. به تصویر زیر دقت کنید. تمام این کدهای نوشته شده تنها برای نمایش یک تگ <h1> است:
از طرفی با افزایش تعداد نفرات تیم توسعه دهنده یا برنامه‌ای که بر روی آن کار می‌کنید، استفاده از این روش می‌تواند بسیار چالش برانگیزتر باشد؛ زیرا برنامه‌نویسان باید زمان زیادی را صرف کنند تا بتوانند موارد مدنظرشان را در پروژه پیاده‌سازی کرده و کدها را برای اجرای درست برای کامپیوتر قابل فهم کنند. اما آیا به نظر شما زیباتر نیست که تمام چیزی را که می‌خواهید نمایش دهید را توصیف و کدنویسی کنید و به کامپیوتر این اجازه را بدهید تا بروزرسانی DOM و انجام عملیات‌های مختلف را خودش به صورت اتوماتیک پیش ببرد؟
مقایسه برنامه‌نویسی دستوری(Imperative) با اعلانی(Declarative):
کدی که پیشتر نوشتیم یک نمونه بسیار خوب از برنامه نویسی دستوری است. در این روش شما مراحل مختلف و چگونگی بروزرسانی و تغییرات رابط کاربردی را کدنویسی می‌کنید. اما زمانی که صحبت از ساخت رابط کاربری می‌شود، اغلب روش برنامه نویسی اعلانی را ترجیح می‌دهند؛ زیرا استفاده از این روش باعث سرعت بخشیدن به فرآیند توسعه می‌شود. بجای استفاده و پیاده سازی روش DOM، خیلی راحت تر و ساده تر است اگر برنامه نویسان بتوانند محتوای مدنظر خود (در اینجا نمایش یک تگ h1 و تعدادی کلمه) را از روشی ساده‌تر انجام دهند. به طورکلی اگر بخواهیم یک مثال ساده برای درک بهتر تفاوت بین این دو روش بیاوریم، می‌توانیم بگوییم که برنامه‌نویسی دستوری مانند این است که مراحل درست کردن و پخت یک پیتزا را مو به مو برای یک سرآشپز توضیح دهیم ولی برنامه‌نویسی اعلانی مانند سفارش دادن یک پیتزا است، پیتزایی که چگونگی انجام فرآیند درست کردن آن چندان اهمیتی برای مشتری ندارد. یکی از کتابخانه‌های محبوب و پرطرفدار روش اعلانی کتابخانه React است که به توسعه‌دهندگان اجازه ساخت رابط کاربری را از روشی ساده‌تر می‌دهد.
ری اکت یک کتابخانه اعلانی برای ساخت رابط کاربری:
به عنوان یک توسعه‌دهنده شما می‌توانید به React بگویید که دقیقا می‌خواهید چه اتفاقات و تغییراتی برای رابط کاربری اتفاق بیافتد و در ادامه React، مراحل و نحوه بروزرسانی DOM را بجای شما(به صورت اتوماتیک) مشخص خواهد کرد.
شروع کار با React:
برای استفاده از React در پروژه خود می‌توانید دو اسکریپت React را از یک وبسایت دیگر به نام Unpkg.com بارگذاری کنید:
۱) ری اکتی که کتابخانه اصلی React است.
۲) ری اکتی که روش‌های خاص DOM را در اختیار شما می‌گذارد و به شما این امکان را می‌دهد که از React و DOM در کنار یکدیگر استفاده کنید که نام آن React-DOM است.
به جای ایجاد تغییرات مستقیم بر روی DOM با کدهای جاوا اسکریپتی، می‌توانید از روش ReactDOM.render() از React-DOM استفاده کنید تا به React بگویید تگ <h1> را داخل المان #app رندر کند.
اما اگر سعی در اجرای این کد در مرورگر خود کنید، با پیام خطای زیر روبه رو خواهید شد:
این خطا به خاطر این است که تگ <h1>. . .</h1> برای جاوا اسکریپت قابل درک نیست بلکه این قسمت از کد متعلق به JSX است.
منظور از JSX چیست؟
در اصل JSX یک سینتکس افزونه‌ای(Syntax Extension) است که به شما این اجازه را می‌دهد تا رابط کاربری خود را با سینتکس‌هایی شبیه به سینتکس‌های HTML ارائه و توصیف کنید. نکته جالب و قابل توجه در مورد JSX این است که به غیر از رعایت سه قانون کلی JSX، نیاز دیگری به یادگیری سینتکس‌ها و نمادهای جدید خارج از HTML و جاوا اسکریپت ندارید. باید توجه داشته باشید که مرورگرها، JSX را خارج از Box نمی‌فهمند؛ بنابراین برای تبدیل کد JSX به جاوا اسکریپت معمولی و قابل فهم برای مرورگرها، نیاز به یک کامپایلر(Compiler) جاوا اسکریپت مانند Babel دارید.
اضافه کردن کامپایلر Babel به پروژه:
برای اضافه کردن این کامپایلر به پروژه خود کافیست کد اسکریپتی زیر را در قسمت index.html خود قرار دهید:
علاوه بر این، با تغییر نوع(Type) اسکریپت به type=text/jsx، باید به Babel بفهمانید که چه کدی را باید تبدیل کند.
بعد از انجام این عملیات می‌توانید برای اطمینان حاصل کردن از درستی عملیات، کد خود را در مرورگر اجرا کنید. برای اینکه تفاوت بین این روش را با کد اعلانی ری اکتی که پیشتر نوشته اید را بهتر درک کنید به عکس زیر توجه کنید:
و برای مقایسه آن با کد دستوری ری اکتی که قبل تر آن را باهم نوشته‌ایم به عکس زیر توجه کنید:
همانطور که قابل مشاهده است، با استفاده از React می‌توان تعداد کدهای تکراری و مورد نیاز برای اجرای یک دستور را به طرز قابل توجهی کاهش داد و این دقیقا همان کاری است که ری اکت برای انجام آن ساخته شده‌است. به طورکلی React کتابخانه‌ای است که شامل کدهایی با امکان استفاده مجدد بوده و این کدها وظایف و عملیات‌هایی را از طرف شما انجام می‌دهند که در اینجا این وظیفه، بروزرسانی رابط کاربری است.
نکته قابل ذکر این است که، نیازی به دانستن اینکه React دقیقا به چه نحوی رابط کاربری را تغییر می‌دهد نیست؛ اما اگر مشتاق به دانستن آن هستید می‌توانید مسائلی مانند UI Trees و Render Method را سرچ کرده و مطالعه کنید.
ضروریت جاوا اسکریپت برای React:
اگر قصد یادگیری جاوا اسکریپت و React را به صورت همزمان دارید این کار امکان پذیر است. اما بهتر است قبل از شروع یادگیری React، ابتدا به یادگیری جاوا اسکریپت بپردازید. این کار سرعت یادگیری React را برای شما افزایش می‌دهد.
در ادامه با برخی مفاهیم اصلی React از منظر جاوا اسکریپت آشنا خواهید شد. این مفاهیم و موضوعات عبارتند از: Functions و Arrow Functions، Objects، Array و روش Array، Destructuring، Temple Literals، Ternary Operators و در آخر ES Modules و Import / Export Syntax.
اگر چه هدف اصلی این مقاله آموزش جاوا اسکریپت نیست اما می‌تواند تمرین خوبی برای آشنایی و بروزرسانی اطلاعات شما در مورد آن باشد. اما اگر هنوز با جاوا اسکریپت آشنا نیستید و در آن مهارتی ندارید، بهتر است زودتر دست به کار شوید و اجازه ندهید این مسئله تبدیل به مانعی برای پیشرفت و یادگیری React برای شما شود.
در قسمت بعدی با مفاهیم ذکر شده بیشتر آشنا خواهیم شد.
