فریم ورک ری اکت چیست و چرا باید از آن استفاده کرد؟

در دنیای امروز، اپلیکیشن‌های موبایل و وب به جزء جدانشدنی زندگی افراد تبدیل شده‌اند. از رزرو تاکسی و سفارش غذا گرفته تا انجام تراکنش‌های بانکی، همه چیز به سمت دیجیتالی شدن پیش رفته است. این تحول عظیم، مرهون فریم‌ورک‌های کارآمدی است که تجربه ای روان و بی‌نقص را برای کاربران به ارمغان می‌آورند. React، یکی از قدرتمندترین کتابخانه‌های فرانت‌اند، در این میان نقشی کلیدی ایفا می‌کند. این مقاله به شما کمک خواهد کرد تا ضمن ارائه یک مثال ساده، اصول بنیادین فریم ورک ری اکت و نحوه کار با آن را فرا بگیرید.

فریم ورک ری اکت چیست؟

تصویر(۱)

React، یک کتابخانه مبتنی بر جاوا اسکریپت است که برای توسعه رابط کاربری (UI) به کار می‌رود. این کتابخانه از Webpack برای کامپایل خودکار کدهای React، JSX، ES6 و همچنین مدیریت پیشوندهای فایل CSS بهره می‌برد. با وجود اینکه React یک کتابخانه است و نه زبان برنامه‌نویسی اما به طور گسترده در توسعه وب مورد استفاده قرار می‌گیرد. فریم ورک ری اکت برای اولین بار در ماه می سال ۲۰۱۳ معرفی شد و امروزه به یکی از پرکاربردترین کتابخانه‌های فرانت‌اند در توسعه وب تبدیل شده است.

React، فراتر از یک UI ساده بوده و افزونه‌های متنوعی مانند Flux و React Native را برای پشتیبانی از معماری کل اپلیکیشن، ارائه می‌دهد.

تاریخچه فریم ورک ری اکت

React در مقایسه با سایر فناوری‌های موجود، یک ابزار نسبتاً جدید به شمار می‌آید. این کتابخانه در سال ۲۰۱۱ توسط جردن والک، یکی از مهندسان نرم‌افزار شرکت فیسبوک، توسعه داده شد. ایده اولیه فریم ورک ری اکت از XHP گرفته شده است که یک چارچوب ساده کامپوننت‌محور برای HTML در PHP می باشد. اولین بار از این فناوری در سال ۲۰۱۱ داخل بخش فید خبری فیسبوک استفاده شد. پس از آن، اینستاگرام نیز React را پذیرفت و در پلتفرم خود مورد استفاده قرار داد.

چرا فریم ورک ری اکت؟

محبوبیت React امروزه از تمام فریم‌ورک‌های توسعه فرانت‌اند بیشتر است. دلایل این محبوبیت عبارتند از:

• ایجاد آسان برنامه‌های پویا: فریم ورک ری اکت فرایند ایجاد برنامه‌های وب پویا را تسهیل می‌نماید زیرا نسبت به جاوا اسکریپت کدنویسی کمتری دارد و قابلیت‌های بیشتری را ارائه می‌دهد.
• عملکرد بهبود یافته: React با استفاده از Virtual DOM، سرعت برنامه‌های وب را افزایش می‌دهد. Virtual DOM، وضعیت قبلی کامپوننت‌ها را مقایسه کرده و تنها عناصری را در Real DOM بروزرسانی می‌کند که تغییر کرده‌اند. این رویکرد، برخلاف روش برنامه‌های وب معمولی که کل کامپوننت‌ها را بروز می‌کنند، باعث افزایش چشمگیر سرعت می‌شود.
• کامپوننت‌هایی با قابلیت استفاده مجدد: کامپوننت‌ها، بلوک‌های سازنده برنامه های React هستند. هر برنامه معمولاً از چندین کامپوننت تشکیل شده است که منطق و کنترل‌های مختص به خود را دارند. این کامپوننت‌ها را می‌توان در کل برنامه مجدداً مورد استفاده قرار داد که زمان توسعه برنامه را به شدت کاهش می‌دهد.
• جریان یک‌طرفه داده: فریم ورک ری اکت از جریان یک‌طرفه داده پیروی می‌کند. به این معنی که هنگام طراحی یک برنامه React، توسعه‌دهندگان اغلب کامپوننت‌های فرزند را درون کامپوننت‌های والد قرار می‌دهند. از آنجایی که داده‌ها فقط در یک جهت جریان دارند، اشکال‌زدایی و یافتن منشا مشکلات در برنامه آسان‌تر می‌شود.
• منحنی یادگیری ملایم: یادگیری فریم ورک ری اکت نسبتاً آسان است زیرا بسیاری از مفاهیم پایه‌ای HTML و جاوا اسکریپت را با افزودنی‌های مفید ترکیب می‌کند. با این حال، مانند هر ابزار و فریم‌ورک دیگری، برای درک عمیق کتابخانه React، باید زمان صرف کنید.
• قابلیت استفاده برای توسعه برنامه‌های وب و موبایل: React نه تنها برای توسعه برنامه‌های وب کاربرد دارد بلکه از طریق فریم‌ورک مشتق‌شده‌ای به نام React Native، امکان ایجاد برنامه‌های موبایل زیبا را نیز فراهم می‌کند. در واقع، فریم ورک ری اکت ابزاری همه‌کاره برای ساخت برنامه‌های وب و موبایل است.
• ابزارهای اختصاصی برای اشکال‌زدایی آسان: فیس‌بوک افزونه‌ای برای مرورگر کروم ارائه کرده است که به تسهیل و تسریع فرآیند اشکال‌زدایی برنامه‌های React کمک می‌کند.

دلایل فوق، توجیهی برای محبوبیت فراوان کتابخانه React و پذیرش گسترده آن توسط سازمان‌ها و کسب‌وکارها هستند. در ادامه، ویژگی‌های اصلی فریم ورک ری اکت بیان خواهند شد.

کلیدها در فریم ورک ری اکت

پس از پاسخ به این پرسش که فریم ورک ری اکت چیست، اکنون به بررسی مفهوم کلیدها پرداخته می شود.

کلیدها در React هنگام کار با کامپوننت‌هایی که به صورت دوره‌ای تولید می‌شوند، نقش بسیار مهمی دارند. با اختصاص یک مقدار خاص به کلید، می‌توان کامپوننت‌ها را پس از هر تغییر شناسایی کرد. این ویژگی، فریم ورک ری اکت را قادر می سازد تا تشخیص دهد که کدام عناصر در لیست تغییر کرده، حذف یا به آن اضافه شده‌اند.

به بیان دیگر، زمانی که لیست‌هایی از کامپوننت‌ها ایجاد می‌کنید، باید از ویژگی‌ به نام “key” استفاده نمایید که یک مقدار رشته‌ای منحصربه فرد دارد. React با کمک کلیدها مشخص می‌کند که کدام آیتم‌ها در لیست تغییر کرده، حذف یا جابه جا شده‌اند. به طور خلاصه، کلیدها برای شناسایی و مدیریت موثر کامپوننت‌ها در لیست‌ها ضروری هستند.

مزایای فریم ورک ری اکت

برخی از مزایای ReactJS در لیست زیر ذکر شده اند:

• DOM مجازی سفارشی: React.js از یک DOM مجازی سفارشی استفاده می‌کند که به دلیل سرعت بالاتر جاوا اسکریپت در مقایسه با DOM معمولی، عملکرد برنامه‌ها را بهبود می‌بخشد.
• رابط کاربری جذاب و روان: این فناوری امکان طراحی رابط‌های کاربری زیبا و با عملکرد روان را فراهم می‌کند.
• بهینه‌سازی برای موتورهای جستجو: ReactJS به گونه‌ای طراحی شده است که سازگاری بهتری با موتورهای جستجو داشته باشد.
• مدیریت ساده‌تر برنامه‌های بزرگ: ساختار ماژولار و داده‌های معتبر در فریم ورک ری اکت، خوانایی کد را افزایش داده و مدیریت برنامه‌های پیچیده را آسان‌تر می‌کند.
• ادغام معماری‌های مختلف: React به خوبی قابلیت ادغام با معماری‌های متنوع را دارد.
• کدنویسی ساده‌تر: این کتابخانه فرآیند کدنویسی را تسهیل کرده و از پیچیدگی‌های غیرضروری می‌کاهد.
• نگهداری و بروزرسانی آسان: بروزرسانی و نگهداری برنامه‌های ساخته‌شده با React ساده‌تر بوده و بازدهی کلی را افزایش می‌دهد.
• رندر سریع‌تر: استفاده از ReactJS رندر مؤثر و سریع را تضمین می‌کند.
• پشتیبانی از اپلیکیشن‌های موبایل: قابلیت توسعه اپلیکیشن‌های موبایل توسط اسکریپت React یکی از ویژگی‌های برجسته آن است.
• حمایت جامعه توسعه‌دهندگان: فریم ورک ری اکت از پشتیبانی گسترده توسعه‌دهندگان برخوردار است.

• Virtual DOM: استفاده از ساختار جاوا اسکریپت به نام Virtual DOM، که باعث افزایش سرعت برنامه می‌شود.
• پشتیبانی از کلاینت و سرور: قابلیت استفاده در سیستم‌های مختلف و در هر دو سمت کلاینت و سرور.
• مدیریت برنامه‌های بزرگ: کامپوننت‌ها و شناسایی الگوها، مدیریت برنامه‌های بزرگ‌تر را با افزایش نظم، آسان‌تر می‌کنند.

محدودیت‌های React:

• React تنها به جنبه های UI برنامه می‌پردازد. در صورت نیاز به مجموعه کامل ابزارهای توسعه، باید از روش های دیگری استفاده کرد.
• استفاده از اسکریپت‌نویسی درون خطی و JSX (افزونه ای جهت درج HTML درون کدهای جاوا اسکریپت) ممکن است برای برخی از برنامه‌نویسان ناخوشایند باشد.

ویژگی‌های فریم ورک ری اکت

React ویژگی‌های برجسته‌ای را ارائه می‌دهد که آن را به پرکاربردترین کتابخانه برای توسعه برنامه‌های فرانت‌اند تبدیل کرده است. در ادامه، لیستی از این ویژگی‌های بارز را می توانید مطالعه نمایید:

JSX

JSX یک افزونه برای جاوا اسکریپت است که در فریم ورک ری اکت جهت توصیف شکل ظاهری رابط کاربری استفاده می‌شود. با استفاده از JSX، می‌توانید ساختارهای HTML را در همان فایلی که کد جاوا اسکریپت وجود دارد، بنویسید.

تصویر(۲)

کد بالا نشان می‌دهد که چگونه JSX در React پیاده‌سازی می‌شود و HTML را در کد جاوا اسکریپت جاسازی می‌کند.

مدل شیء سند مجازی (DOM)

Document Object مجازی، نسخه‌ای سبک و بهینه از DOM واقعی است که در فریم ورک ری اکت استفاده می‌شود. برخلاف DOM واقعی که دستکاری آن زمان‌بر است، DOM مجازی با سرعت بیشتری عملیات را انجام می‌دهد. زمانی که وضعیت یک شیء تغییر می‌کند، DOM مجازی به جای کل ساختار، تنها همان بخش تغییر‌یافته را در DOM واقعی بروزرسانی خواهد کرد.

DOM (مدل شیء سند) هر فایل XML یا HTML را به صورت یک ساختار درختی در نظر می‌گیرد. در این ساختار، هر گره به عنوان یک شیء عمل می‌کند که نماینده بخشی از سند است. این رویکرد امکان تعامل و تغییر آسان بخش‌های مختلف فایل را فراهم می‌کند.

چگونه DOM مجازی و DOM واقعی با یکدیگر تعامل می‌کنند؟

هنگامی که وضعیت یک شیء در برنامه React تغییر می‌کند، VDOM بروزرسانی می‌شود. سپس آن را با وضعیت قبلی خود مقایسه می‌کند و فقط اشیای موردنیاز را در DOM واقعی بروز می‌نماید. این امر باعث می‌شود که کارها به سرعت انجام گردند.

معماری

در معماری MVC یا Model View Controller، فریم ورک ری اکت نقش “View” را بر عهده دارد و مسئول طراحی ظاهر و تجربه کاربری برنامه است. MVC یک الگوی معماری می باشد که لایه برنامه را به Model، View و Controller تقسیم می‌کند. Model تمام منطق های مربوط به داده را شامل می گردد. View برای منطق رابط کاربری برنامه استفاده می‌شود و Controller یک رابط بین Model و View است.

افزونه‌ها

React فراتر از یک فریم‌ورک UI است. این کتابخانه جاوا اسکریپتی شامل افزونه‌های بسیاری می باشد که کل معماری برنامه را پوشش می‌دهند. در واقع React به ساخت برنامه‌های موبایل کمک می‌کند و رندر سمت سرور را ارائه می‌دهد. Flux و Redux از جمله افزونه هایی هستند که می‌توانند فریم ورک ری اکت را گسترش دهند.

اتصال داده

چون React از اتصال داده یک‌طرفه استفاده می‌کند، تمام فعالیت‌ها ماژولار و سریع باقی می‌مانند. همچنین، جریان داده یک‌طرفه به این معنی است که هنگام توسعه یک پروژه React، معمولاً کامپوننت‌های فرزند را درون کامپوننت‌های والد قرار می‌دهند.

اشکال‌زدایی

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

حال که با ویژگی‌های کلیدی فریم ورک ری اکت آشنا شدید، می توانید در ادامه، ارکان React را مطالعه کنید.

کامپوننت‌ها در React

کامپوننت‌ها بلوک‌های سازنده‌ای هستند که یک برنامه React را تشکیل داده و بخشی از رابط کاربری را نمایش می‌دهند. فریم ورک ری اکت رابط کاربری را به کامپوننت‌های متعددی تقسیم می‌کند لذا اشکال‌زدایی آسان تر می شود. هر کامپوننت، مجموعه ویژگی‌ها و عملکردهای خاص خود را دارد.

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

• قابلیت استفاده مجدد: هر کامپوننت که در یک بخش از برنامه استفاده می‌شود، می‌تواند در قسمت دیگری مجدداً استفاده گردد. این امر به تسریع فرآیند توسعه کمک می‌کند.
• کامپوننت‌های تودرتو: یک کامپوننت می‌تواند چندین کامپوننت دیگر را در خود جای دهد.
• متد رندر: در کمترین حالت، هر کامپوننت باید یک متد رندر را تعریف نماید که مشخص کند کامپوننت چگونه در DOM رندر می‌شود.
• افزودن ویژگی‌ها: یک کامپوننت می‌تواند ویژگی ها را نیز دریافت کند، ویژگی‌هایی که توسط والد آن برای تعیین مقادیر ارسال می‌شوند.

برای درک بهتر، به مثال زیر نگاهی بیندازید.

دو کامپوننت، یک مورد از نوع “تابعی” و دیگری “کلاس” را با کد زیر در نظر بگیرید.

     

تصویر(۳)

هر کامپوننت کلاس در فریم ورک ری اکت شامل یک متد render است که وظیفه نمایش محتوا روی صفحه را بر عهده دارد. دستور export default برای استخراج تنها یک شیء (مانند تابع، متغیر یا کلاس) از فایل استفاده می‌شود. هر فایل تنها می‌تواند یک خروجی پیش‌فرض داشته باشد.

کامپوننت‌های مذکور معمولاً در کامپوننت اصلی که داخل این مثال App.js است، درون ریزی (import) می‌شوند و در ساختار برنامه استفاده می‌گردند.

تصویر(۴)

Props در React

Props، مخفف Properties (ویژگی‌ها) در React، به کاربر اجازه می‌دهد تا آرگومان‌ها یا داده‌ها را به کامپوننت‌ها منتقل کند. این prop ها به پویاتر شدن کامپوننت‌ها کمک می‌کنند. prop های کامپوننت فقط خواندنی هستند و قابل تغییر نیستند.

کلاس Classprops.js را با کد زیر در نظر بگیرید:

   

تصویر(۵)

در اینجا، شما از ویژگی‌هایی به نام “name” و “place” استفاده می‌کنید که مقادیر آنها را می‌توان هنگام وارد کردن کامپوننت در کامپوننت والد منتقل کرد. در کامپوننت اصلی یعنی App.js، کد زیر را در نظر بگیرید:

تصویر(۶)

در اینجا، کامپوننت سه بار فراخوانی می‌شود و سه مقدار مختلف برای هر ویژگی ارسال می‌کند. 

State در React

State در فریم ورک ری اکت یک شیء است که مقادیر ویژگی‌های مرتبط با یک کامپوننت را ذخیره می‌کند. این مقادیر ممکن است با گذشت زمان، در نتیجه اقدام کاربر یا تغییرات شبکه، تغییر کنند. هر زمان که state یک کامپوننت تغییر نماید React به طور خودکار آن را در مرورگر دوباره رندر خواهد نمود.

شیء state در داخل constructor کامپوننت ایجاد می‌شود. در این شیء می‌توان چندین ویژگی را برای نگهداری داده‌های مختلف ذخیره کرد. برای بروزرسانی state از متد ()this.setState استفاده می‌شود. متد ()setState، وضعیت جدید را با وضعیت قبلی به صورت سطحی ادغام می‌ نماید و تنها ویژگی‌های مشخص‌شده را بروزرسانی می‌کند، بدون اینکه سایر ویژگی‌ها تغییر کنند.

کامپوننت State.js زیر را در نظر بگیرید:

تصویر(۷)

در اینجا، تگ h3 مقدار ‘message’ را که یک شیء state است، نمایش می‌دهد.

برای استفاده در کامپوننت اصلی خود یعنی App.js، به صورت زیر عمل کنید:

تصویر(۸)

متد ()setState

State را می‌توان با هندلرهای رویداد، پاسخ‌های سرور یا تغییرات prop بروز کرد. این کار با استفاده از متد setState انجام می‌شود.

   

تصویر(۹)

متد ()setState تمام بروزرسانی‌های انجام شده در حالت کامپوننت را در صف قرار داده و به فریم ورک ری اکت دستور می‌دهد که کامپوننت و فرزندان آن را با حالت بروز شده دوباره رندر کند.

سناریویی را در نظر بگیرید که طی آن روی دکمه subscribe کلیک می‌شود. با کلیک روی دکمه، پیام نمایش داده شده باید تغییر کند. برای پیاده‌سازی آن، شما باید از متد ()setState استفاده کنید.

تصویر(۱۰)

ابتدا لازم است یک شیء state اضافی با نام sub برای دکمه تعریف کنید. زمانی که رویداد کلیک روی دکمه رخ می‌دهد، متد ChangeMessage فراخوانی می‌شود. این متد با استفاده از ()setState مقادیر message و sub را بروزرسانی کرده و خروجی کامپوننت را دوباره رندر می‌کند.

اگرچه می‌توان این عملکرد را با استفاده از prop ها نیز پیاده‌سازی کرد اما state این فرآیند را کارآمدتر می‌کند. در بخش بعدی به بررسی تفاوت‌های میان prop ها و state در React پرداخته خواهد شد.

تفاوت‌های Props و State در فریم ورک ری اکت

• Props:
  • برای ارسال داده‌ها و هندلرهای رویداد به فرزندان یک کامپوننت استفاده می‌شوند.
  • غیرقابل تغییر هستند؛ یعنی پس از تنظیم، نمی‌توان مقادیر آنها را تغییر داد.
  • در کامپوننت‌های تابعی و کامپوننت‌های کلاسی قابل استفاده هستند.
  • توسط کامپوننت والد تعریف شده و به فرزندان ارسال می‌شوند.
• State:
  • داده‌ها و وضعیت‌های مرتبط با کامپوننت را که ممکن است با گذشت زمان تغییر کنند، ذخیره می‌کند.
  • قابل تغییر است و می‌تواند با استفاده از متد setState() بروزرسانی شود.
  • تنها در کامپوننت‌های کلاسی قابل استفاده بود اما اکنون با استفاده از Hook ها (مانند useState) در کامپوننت‌های تابعی نیز کاربرد دارد.
  • معمولاً هندلرهای رویداد مسئول بروزرسانی state هستند.

در نتیجه، props برای ارسال داده‌ها از والد به فرزند و state ها جهت مدیریت وضعیت داخلی کامپوننت استفاده می‌شوند.

نتیجه‌گیری

React به عنوان یک کتابخانه قدرتمند و محبوب در دنیای توسعه وب، جایگاه ویژه‌ای پیدا کرده است. محبوبیت روزافزون این کتابخانه در میان توسعه‌دهندگان و شرکت‌ها و همچنین تقاضای بالای بازار کار برای متخصصان React، نشان از ارزش بالای یادگیری آن دارد. فریم ورک ری اکت با ارائه ابزارهای کارآمد جهت ساخت رابط‌های کاربری پویا، بهبود عملکرد و قابلیت استفاده مجدد کامپوننت‌ها، به یک انتخاب ایده‌آل برای توسعه برنامه‌های وب و موبایل تبدیل شده است. خوشبختانه هاست نود جی اس و پایتون میهن وب هاست از این مورد پشتیبانی نموده و برنامه نویسان می توانند از هاست های مذکور برای React بهره ببرند.