مقدمه __ React چیست ؟
React یک کتابخانه ی جاوا اسکریپت است. از React برای ساخت روابط کاربری استفاده می کنند. اگر با جاوا اسکریپت آشنا نباشید چه می شود ؟ اگر توسعه دهنده نباشید چطور؟ آیا هنوز هم می توانید ری اکت را یاد بگیرید؟ باید گفت بله! در این مقاله به قلم واحد تحریریه تیم هم رویش بررسی خواهیم کرد که: React چیست ؟ React.js (یا ReactJS) چیست ؟ React برای چه چیزی استفاده می شود ؟ چرا React به این اندازه محبوب است ؟ ری اکت چه مشکلاتی را حل می کند؟
در این مقاله، ایده های اصلی React را به طرز ساده ای همراه با شکل های ساده (🌴..) بررسی می کنیم. اگرتجربه ی JavaScript ندارید، جای نگرانی نیست؛ تا زمانی که دانش اولیه HTML را داشته باشید (به عنوان مثال فرمت تگ های HTML) به مشکل بر نخواهید خورد.
قبل از ادامه ی مقاله باید یاد آوری کنیم که برای درک ایده های اصلی React ، نیازی نیست که یک توسعه دهنده باتجربه باشید!
هم رویش منتشر کرده است:
آموزش React ___ سریع و پروژه محور با ساخت یک فروشگاه ساده
چند نکته در مورد وب
در ابتدا مفهومی را که ممکن است بارها شنیده باشید معرفی می کنیم، DOM.
DOM چیست؟
هنگامی که آدرس وبسایت مورد علاقه ی خود را در مرورگر وارد می کنید، کامپیوتر شما مکالمه ای را با کامپیوتر دیگر که در مسافت دوری است، آغاز می کند؛ که معمولاً از آن به عنوان سرور یاد می شود. یعنی کامپیوتر شما برای برخی از اطلاعات، درخواست می کند و این سرور است که پاسخ می دهد:
کامپیوتر شما: اطلاعاتی درباره سایت learnreact.design می خواهم ؟
سرور: صبر کن، اجازه بده چیزی پیدا کنم.
قسمت اصلی پاسخی که سرور می دهد معمولاً شامل سه آیتم است: HTML ، CSS و JavaScript.
هم رویش منتشر کرده است:
کامپیوتر چیست ؟ ____ کامپیوتر چگونه کار میکند ؟
HTML محتوای یک صفحه ی وب را لیست می کند. همچنین ساختار آن را نیز توصیف می کند. مانند: چند عنوان و پاراگراف وجود دارد ؟ کاربر چه تصاویری را باید ببیند ؟ آیا این دکمه و تکست باکس در همان بخش قرار دارد ؟
با استفاده از این اطلاعات، مرورگر چیزی به نام DOM ایجاد می کند!
DOM مانند یک درخت است. شاید عجیب به نظر برسد اما بسیاری از موارد در کامپیوتر مانند یک درخت به نظر می رسند. برای ادامه کار، به این درخت لقب Domo را نسبت می دهیم.
Domo به عنوان یک مدل در استودیوی معتبر هنری “مرورگر وب” کار می کند. وظیفه ی او ژست گرفتن در مقابل هنرمندی است که یک پرتره (یا شاید میلیون ها پرتره) می کشد.
در واقعیت، DOM مخفف Document Object Model است. در واقع این یک مدل از داکیومنت (معروف به صفحه وب) است. در ابتدا ژست می گیرد. سپس مرورگر پرتره ای را ترسیم می کند. پرتره ها همان چیزی هستند که در یک صفحه وب می بینیم: تکست باکس ها، پاراگراف ها، تصاویر و غیره. شغل یک توسعه دهنده مانند کارگردانی است که، به Domo می گوید چه چیزی بپوشد و چه ژستی بگیرد. در پایان، مشخص می شود که پرتره ها چه شکلی هستند.
برای دیدن Dom، اگر از مرورگر دسکتاپ استفاده می کنید، روی همین صفحه کلیک راست کرده و “Inspect” را انتخاب کنید. مفهوم عناصر موجود درصفحه را درک می کنید؟
DOM API
به طور معمول، اغلب ما یک صفحه وب پویا و تعاملی می خواهیم – صفحه ی پویا بدان معنا است که محتوای آن هر از گاهی تغییر می کند: افزودن یا حذف متن از جاهای مختلف، نشان دادن یک حالت خاص یا به روزرسانی نمودار بر اساس برخی داده های جدید از سرور.
برای تغییر آن چه که در یک صفحه وب است، باید DOM را به روز کنیم. این هنرمند تا زمانی که Domo ژست جدیدی نگیرد، نمی تواند پرتره های جدیدی نیز بکشد.
چگونه می توانیم Domo را به حالت جدید (ژست جدیدی) تبدیل کنیم ؟
ما فقط با او صحبت می کنیم. او نیز گوش می دهد. در این جا هم به گوش های Domo، نام DOM API را نسبت داده ایم.
برای دستکاری DOM، توسعه دهنده، کدی را در جاوا اسکریپت می نویسد که با DOM API صحبت می کند. او به نوبه ی خود نیز محتوای صفحه وب را به روز می کند.
افزایش پیچیدگی
صحبت کردن به صورت مستقیم با Domo رویکرد استاندارد توسعه وب بوده است. به ویژه هنگامی که محتوای وب بیشتر استاتیک است. یک توسعه دهنده با نوشتن حجم کمی از کد جاوا اسکریپت، امکان برخی از تعاملات را در بالای صفحات استاتیک فراهم می کند.
با این حال با ظهور SPA (برنامه تک صفحه) مانند Gmail و Google Maps، مردم انتظارات خود را بالاتر بردند. آن ها به جای صفحات وب استاتیک، برنامه های وبی می خواستند که تعاملی، سریع و پاسخگو باشند.
کد مورد نیاز برای ساخت برنامه های وب به طور فزاینده ای بزرگ و پیچیده شده بود. به همین دلیل، به همکاری بسیاری از اعضای تیم نیاز بود.
کم کم رویکرد سنتی متوقف شد. این که همیشه مستقیماً با Domo صحبت کنیم، ناکارآمد به نظر می رسید.
ایده‌ی اصلی ری اکت
در ادامه با موضوع اصلی، یعنی React آشنا می شویم.
با استفاده از React ، توسعه دهندگان، دیگر مستقیماً با Domo صحبت نمی كنند. ری اکت به عنوان یک عامل بین یک توسعه دهنده و Domo عمل می کند. او ارتباطات را هموارتر می کند. همچنین روند ایجاد پرتره را نیز ساده تر می کند.
React به عنوان “ReactJS” یا “React.js” نیز گفته می شود، اما “React” نام رسمی آن است.
React با کدهای جاوا اسکریپت طراحی شده است. به گونه ای ساخته شده است که در بیشتر موارد، دیگر نیازی به کار کردن مستقیم با DOM API نداریم. درعوض، ما کد ساده تری می نویسیم؛ در حالی که React مکالمه را با DOM، دربخش زیرین که برای ما مشخص نیست، انجام می دهد.
React دارای چند ابر قدرت برای مقابله با پیچیدگی های روزافزون توسعه وب است:
- کامپوننت ها
- رابط کاربری Declarative
- به روزرسانی های واکنش پذیر DOM
ممکن است این اصطلاحات به نظرتان ترسناک باشند، اما به خواندن مطلب ادامه دهید!
کامپوننت ها
کامپوننت ها از ویژگی های شاخص React هستند. ایده ی اصلی آن ها مبتنی بر یک استراتژی ساده است: تقسیم و ترکیب. اگر حل یک مسئله به یک باره مشکل به نظر برسد، آن را به مسائل کوچک تری تقسیم می کنیم. هر یک از آن ها را به صورت مجزا حل می کنیم. سپس نتایج را با هم ترکیب می کنیم.
ساختن یک برنامه در React تقریباً یعنی فقط کار با کامپوننت های سازنده: شکستن برنامه به اجزای مختلف، یافتن بهترین کامپوننت ها، متناسب سازی یکدیگر، ایجاد کامپوننت های جدید از کامپوننت های موجود و غیره.
امروزه ابزارهای طراحی مانند Framer و Figma نیز دارای کامپوننت هایی هستند (و نمادهایی در Sketch). آن ها بسیار شبیه به کامپوننت های React هستند. با این تفاوت که کامپوننت های آن ها انعطاف پذیرتر و قدرتمند تر هستند. در واقع، کامپوننت های ابزار های طراحی، از کامپوننت های مهندسی نرم افزار الهام گرفته اند. پس از ایجاد یک کامپوننت، می توانیم چندین نمونه ی دیگر از آن ایجاد کنیم. همچنین با استفاده از آن می توان، کامپوننت های جدید دیگری نیز ساخت. اگر یک کامپوننت را تغییر دهیم، همه ی مواردی که این کامپوننت را در بر دارد به طور خودکار به روز می شوند.
کامپوننت های موجود در React دو ویژگی مهم دارند:
- کامپوننت ها قابل ترکیب هستند. آن ها برای استفاده ی مجدد ساخته شده اند. همچنین از سایر کامپوننت های دیگر می توان کامپوننت جدیدی ساخت.
- کامپوننت ها مستقل از یک دیگر هستند. اگر کد را در یک مکان تغییر دهیم، قسمت های دیگر خراب نمی شوند.
دستوری (Imperative) در برابر اعلانی یا (Declarative)
وقتی مستقیم با DOM صحبت کنیم (با استفاده از DOM API) باید دقیقا مشخص کنیم که کدام عنصر صفحه باید در چه هنگام و به چه ترتیبی تغییر کند. انگار که به مدل خود (Domo) بگوییم که دقیقا چه ژستی بگیرد، چگونه سر خود، بازو و پاهای خود را مرحله به مرحله برای هر پورتره نگه دارد.
این کار به نظر خسته کننده می آید. همچنین احتمال رخداد خطا هم بیش تر است. بنابراین می توان به جای این که به Domo بگوییم که چگونه ژست بگیرد، مستقیم به او بگوییم که چه می خواهیم ؟ در واقع، این دقیقاً نحوه ی ساخت UI در React است. یعنی توسعه دهنده طرحی سریع از آن چه می خواهد ترسیم می کند. سپس React آن را به Domo برای این که چگونه ژست بگیرد توضیح می دهد.
از آن جا که برنامه هایی که ایجاد می کنیم پویا هستند؛ اغلب می خواهیم Domo خیلی سریع ژست ها را تغییر دهد. ما طرح های بسیاری می کشیم. آن ها را به ری اکت می دهیم. سپس ری اکت این طرح ها را کنارهم داخل یک کتاب کوچک قرار می دهد. هنگامی که صفحات کتاب را سریع ورق می زند، یک رابط کاربری پویا فعال می شود!
از نظر فنی، اگر کد، چگونگی انجام خواسته ی ما را تعریف کند، پس ضروری است. اگر آن چه را که می خواهیم مشخص کند، خواستاری است. روش سنتی کار با DOM API، ضروری است و روش React خواستاری است.
برنامه نویسی ضروری از روزی آغاز شد که رایانه ها ابتدایی بودند. مردم مجبور بودند با جزئیات به آن ها آموزش دهند: کجا اعداد را ذخیره کنند. چگونه ضرب کنند و غیره. اما سرانجام این مورد هم غیر قابل مدیریت شد. مردم نرم افزار های هوشمندی نوشتند که تعریف مشکلات را به دستورالعمل های جزئی تبدیل می کند. بنابراین ایده ی برنامه نویسی خواستاری ارائه شد.
Virtual DOM چیست ؟
برنامه نویسی به صورت declarative در ری اکت، کار یک توسعه دهنده را آسان تر کرد. همچنین فرصت هایی را برای بهینه سازی اجرایی نیز فراهم کرد.
وقتی React از قبل همه ی طرح ها را در اختیار داشته باشد، می تواند آن ها را مرتب کند. همه ی موارد تکراری را نیز حذف کند. همچنین مطمئن شود که Domo و هنرمند، کارهای کمتری را انجام می دهند.
این طرح ها Virtual DOM نامیده می شوند. دستکاری DOM مجازی بسیار سریع تر از DOM است. توسعه دهندگان بیشتر اوقات به جای مدیریت مستقیم DOM با DOM مجازی کار می کنند. React کارهای مدیریتی DOM را کنترل می کند.
به روزرسانی های واکنش پذیر DOM
تصور کنید می توانیم متغیرهایی را در طراحی های خود قرار دهیم تا تغییرات مختلف یک ژست را نشان دهند. به این ترتیب، وقتی کسی پرتره های Domo را که کلاه متفاوتی دارد را می خواهد، مجبور نیستیم دوباره با React صحبت کنیم. ما فقط می توانیم منتظر بمانیم و اجازه دهیم React آن را برای ما تغییر دهد.
منظور از کلاه، داده هایی است که محتوای پویای رابط کاربر را تعیین می کند. فقط باید عناصر UI را با داده های مربوط به آن ها مرتبط کنیم. با تغییر داده ها، React به طور خودکار عناصر مربوط به DOM را برای ما به روز می کند. به نظر می رسد DOM در برابر هرگونه تغییر در داده های اساسی “عکس العمل” نشان می دهد. در این جا نیازی به ردیابی داده ها نیست. Dom توسط ری اکت به صورت خودکار به روز می شود. پس دیگر جای نگرانی برای این که چه موقع DOM را به روز کنید، نیست.
به همین علت آن را React نامیدند. رابط کاربری ساخته شده با React واکنشی است. ایده ی UI واکنشی نیز توسعه UI را بسیار ساده می کند.
+ پیش از این آموزش فروشگاه اینترنتی با جنگو و ری اکت در هم‌رویش منتشر شد. برای دیدن فیلم معرفی فصل اول این آموزش می‌توانید بر روی این لینک (+) و یا پخش کننده پایین کلیک کنید:
برای دریافت بسته کامل این آموزش اینجا(+) کلیک کنید.
کلید واژگان
react چیست ؟ – برنامه نویسی react چیست ؟ – معنی ری اکت چیست ؟ – تعریف ری اکت – ری اکت چیست ؟ – برنامه نویسی ری اکت چیست ؟ – dom چیست ؟ – مخفف dom چیست ؟ – dom در جاوا اسکریپت – virtual dom چیست ؟ – ری اکت چیست ؟
منبع
What is React: A Visual Introduction For Beginners
