ری اکت (React js) نامی که این روز ها در دنیای برنامه نویسی وب زیاد به گوش می خورد. در این مقاله قصد داریم تا درباره ی React که یکی از پرطرفدار ترین کتابخانه های جاوااسکریپت هست مطالبی را بیان کنیم و ویژگی های React js را زیر ذره بین ببریم.
ری اکت یکی از کتابخانه های جاوااسکریپت در طراحی رابط کاربری (User Interface) است که در سال 2011 توسط کمپانی بزرگ فیسبوک توسعه داده شد. ری اکت در صفحات وب هر بخش از صفحه یا در اصطلاح هر (Component) را پس از اعمال تغییر دوباره رندر گرفته و به نمایش در می آورد. ری اکت در رندر سریع و مجدد هر بخش از صفحه با استفاده از (Virtual DOM) به صورت مستقل و هم چنین در طراحی UI کاربرد بسیار زیادی دارد.
جردن واک یکی از مهندسین نرم افزار شرکت فیسبوک این کتابخانه را ایجاد کرد که در سال 2011 برای ویژگی Newsfeed مورد استفاده قرار گرفت. برای اولین بار React js بر روی خبرنامه فیس بوک در سال 2011 و بر روی Instagram در سال 2012 پیاده سازی شد. همچنین کتابخانه React js این اجازه را می دهد تا بتوانیم کامپوننت هایی با قابلیت استفاده مجدد نیز طراحی و ایجاد کنیم.
ری اکت این قابلیت را برای برنامه نویسان فراهم می کند تا برنامه های کاربردی تحت وبی را طراحی کنند که بدون بارگزاری مجدد صفحه می توان اطلاعات آن را تغییر داد. ما می توانیم عناصر رابط کاربری مانند یک دکمه یا یک ورودی فرم را به عنوان یک کامپوننت ری اکت بنویسیم. یک کامپوننت ممکن است یک یا چند کامپوننت دیگر را در خروجی خود داشته باشد.
حال بریم سراغ ویژگی های ری اکت :
1. ساده بودن یادگیری : درک مفاهیم React بسیار ساده است و شاید مهم ترین عامل برای روی آوردن به این کتابخانه همین مسئله است. ری اکت مانند انگولار پیچیده نیست و اگر تنها به جاوااسکریپت مسلط باشید، یادگیری ری اکت برای شما بسیار لذت بخش خواهد بود.
2. استفاده از JSX : ری اکت از یک syntax ویژه با نام JSX استفاده می‌کند که اجازه می‌دهد HTML و جاوا اسکریپت را ترکیب کنیم. به عبارت دیگر استفاده از JSX به این صورت است که ما در بین کد های HTML خود کد های جاوااسکریپت می نویسیم. استفاده از JSX در ریکت الزامی نیست ولی استفاده از آن باعث افزایش سرعت اجرا می شود و توصیه می شود که هنگام کار با React از JSX استفاده شود. استفاده از JSX اوایل ممکن است باعث سردرگمی شما شود اما پس از تمرین و استفاده ی مکرر، کدنویسی آن برایتان لذت بخش خواهد شد.
3. پشتیبانی قدرتمند فیسبوک : کتابخانه ری اکت توسط فیسبوک که یکی از بزرگترین کمپانی های جهان است، پشتیبانی می شود و بر اساس مهم ترین تغییرات دنیای نرم افزار و سخت افزار به سرعت رشد و ارتقا پیدا می کند. از آنجایی که فیسبوک بهترین مهندسین و متخصصین را در حوزه توسعه ی تکنولوژی های خود به کار می گیرد، باید سریع خود را آپدیت کند و پاسخگوی نیاز کاربرانش باشد. از این رو ری اکت به سرعت توسعه پیدا می کند و کامپوننت های جدیدی هر روز به آن اضافه می شوند.
4. رویکرد Native : ساخت اپلیکیشن های موبایل تا چندی پیش توسط دو زبان برنامه نویسی جاوا برای اندروید و سوئیفت برای ios صورت می گرفت و اگر قصد ساخت و تولید برنامه برای کسب و کار خودمان را داشتیم، باید هر دو را به طور کامل فرا می گرفتیم. یادگیری جاوا و سوئیفت هم زمانبر و در مواردی هزینه بر هم می باشد. اما توسط زبان ها و فریم ورک های نیتیو می توانیم یک اپلیکیشن واحد را طراحی کنیم و دو خروجی اندروید و ios را همزمان از آن دریافت کنیم. ری اکت نیتیو (React native) پس از انتشار زیاد مورد استقبال قرار نگرفت اما به مرور زمان و پس از اضافه شدن چندین ویژگی مختلف به آن، استقبال شدیدی از آن صورت گرفت و افراد زیادی به آن روی آوردند.
هوک ها توابعی در React هستند که امکان استفاده از state و ویژگی های React در یک کامپوننت مبتنی بر تابع را به ما می دهند. Hook ها به ما این امکان را می‌دهند تا به جای جابجایی بین HOC ها، کلاس‌ها و توابع، از توابع استفاده کنیم. از آنجایی که Hook ها توابع جاوااسکریپت معمولی هستند، می توانیم از Hook های پیش‌فرض استفاده کرده و هم چنین Hook دلخواه خودمان را ایجاد کنیم. بنابراین راه حل مشکل ما اکنون یک دستور یک خطی خواهد بود.
دو مورد از مهم ترین و پرکاربرد ترین هوک ها در ری اکت، useState و useEffect هستند.
ری اکت روتر کتابخانه (Package) ای است که به ما این امکان را می دهد تا route های خود را در front-end مشخص کنیم. بنابراین کاربران کامپوننت ها را در مسیرهایی مثل localhost:3000/home و … می بینند. ما می توانیم یک برنامه React ایجاد کنیم اما اینکه با کلیک کردن بر روی آیکون چه کامپوننتی نمایش داده شود یا به چه صفحه ای منتقل شود به ما مربوط است.
کامپوننت home برای روت / ، کامپوننت درباره‌ی ما برای روت about/ و کامپوننت تماس با ما برای روت contact/ می باشد.
روشی است برای قادر سازی کامپوننت‌ها برای به اشتراک گذاری داده‌ها بدون این که به صورت خارجی از هر کامپوننت به صورت دستی بگذریم. Context نسبت به زیر شاخه کامپوننت React، مانند یک آبجکت Global است.
نحوه پیاده سازی Context در React :
1. اولین قدم این است که با استفاده از متد create، یک Context بسازیم. کامپوننت ها در سطوح مختلف از Context مشابه برای دریافت داده ها استفاده خواهند کرد.
2. مهیا کننده (Provider) یک کامپوننت است که Consumer را قادر می‌سازد تا در تغییرات اعمال شده به Context شریک شوند. Provider یک prop به نام value می‌پذیرد و داده های داخل این prop برای تمام Consumer های فرزند در دسترس هستند.
3. مصرف کننده (Consumer) یک دریافت کننده Context است. کامپوننت ها می توانند با جمع بندی Consumer به دور Context، در مقادیر آن شریک شوند. Consumer به یک متد با یک پارامتر نیاز دارد که یک گره React را بر می گرداند و آن را با برنامه می سازد.
ریداکس یک الگو برای مدیریت بهتر و بهینه تر وضعیت های مختلف در برنامه را ارائه داده است. ریداکس در سال 2015 ارائه شده است و از این فریم ورک به عنوان مکمل در کنار فریم ورک های دیگر مثل همین React استفاده می کنند. به دلیل متن باز (Open Source) بودن این فریم ورک کد های آن در گیت هاب موجود است. استفاده از ریداکس یک راه سریع و کوتاه برای رسیدن به هدف نیست اما اگر پروژه ما دچار مشکل شد می توانیم از ریداکس استفاده کنیم. برای مدیریت حالات به کاربرده می شود و اگر نیاز به مدیریت states بود می توانیم از آن استفاده کنیم. در غیر این صورت استفاده از آن ضرورتی ندارد به دلیل اینکه کار را سخت و پیچیده می کند، که در این صورت می توانیم از همان Context API استفاده کنیم. ریداکس از چهار بخش تشکیل شده که با هم در ارتباط هستند و در کنار یکدیگر کار می کنند. این چهار بخش شامل موارد زیر می باشد:
1. بخش اول Store : مکانی می باشد که تمامی state ها یا داده های ما جدا از هر کامپوننتی ذخیره می شوند.
2. بخش دوم Reducer : تابعی است که کار آن انجام عملیات مختلف روی state می باشد.
3. بخش سوم Action : یک شیء (Object) می باشد که کار خاصی را انجام نمی دهد و فقط ارسال می شود به Reducer.
4. بخش چهارم Action : Dispatch را به سمت Reducer اعزام می کند.
زبان جاوا اسکریپت و همه ی فریم ورک های آن در حال حاضر از جایگاه خیلی خوبی در دنیای بزرگ برنامه نویسی برخوردار هستند و رقابت بالایی را با هم دارند. کتابخانه React در رقابت با دو رقیب سر سخت خود یعنی انگولار و ویو رتبه ی اول را دارد. برنامه های بزرگی مانند Netflix ، Facebook ، Instagram و … از React native استفاده می کنند و برنامه نویسی اپلیکیشن های اندروید و ios نیز رویکرد فعالی در استفاده از برنامه نویسی نیتیو داشته اند. با به روز شدن امکانات و به وجود آمدن نیاز های مخاطبان، ری اکت به سرعت آپدیت شده و سرعت پیشرفت این کتابخانه ی جاوااسکریپت را در آینده شاهد خواهیم بود.
