برترین ابزار ها و فریمورک های React

react که در سال ۲۰۱۳ برای اولین بار منتشر شد، به یکی از محبوب‌ترین کتاب‌خانه‌های ساخت وب اپلیکیشن‌ تبدیل شده است. توسعه‌دهندگان سراسر دنیا به قدری به این ابزار علاقه‌مند شده‌اند که به ابداع روش‌های جدیدی برای استفاده از react در محیط‌هایی غیر از وب مانند موبایل و دسکتاپ روی آورده‌اند. در این مقاله نیز قصد داریم به معرفی۵ فریمورک و ابزار مربوط به React بپردازیم.

امروزه ری‌‌اکت کاربردهایی فراتر از توسعه‌ی وب اپلیکیشن‌ها دارد. در ادامه با برخی از ابزارهای ساخت سایت‌ ایستا (static sites)، اپ موبایل و رندر سمت سرور (ssr) در این کتاب‌خانه‌ آشنا خواهیم شد.

１- استفاده‌ی مجدد از کامپوننت‌های react با bit.dev

«یک بار یاد بگیرید و در هر کجا استفاده کنید» شعار React Native است. قطعا این ویژگی مزیت بزرگی برای یک ابزار است که قابلیت پشتیبانی از طیف گسترده‌ای از پلتفرم‌ها را دارد.

اما باید بدانیم که استفاده از react مزیت بزرگ دیگری نیز دارد؛ کامپوننت‌های react می‌توانند در اپ‌های و صفحات مختلف به اشتراک گذاشته شوند تا باعث سرعت بخشیدن به توسعه و همچنین یکپا‌رچه‌ سازی رابط کاربری شوند. این بدان معناست که شما می‌توانید یک بار برای همیشه کامپوننت‌هایتان را بسازید و از آن‌ها در کدهای دیگر خود نیز استفاده کنید.

ممکن است یک محصول دارای یک وب‌اپ، یک سایت استاتیک بازاریابی، یک اپ iOS و یک اپ اندروید باشد! برای ساده و کم هزینه کردن کارها می‌توان به استفاده‌ی مجدد از کدها بین پروژه‌های مختلف این محصول پرداخت. می‌توانید برای انجام این کار از bit.dev استفاده کنید.

این سایت به ما در استفاده‌ی مجدد از کامپوننت‌ها با آسان‌کردن انتشار آن‌ها و فراهم کردن پلتفرمی برای مستندسازی و مدیریت کردن کامپوننت‌ها، کمک می‌کند.

در زیر می‌توانید مثالی از انتشار کامپوننت‌های reactی بر روی bit را مشاهده کنید:

ابتدا باید CLI ابزار bit را بر روی کامپیوتر خود نصب کنید

$ npm install bit-bin --global

سپس باید به روت پروژه خود رفته و مقدمات استفاده از Bit را در پروژه فراهم کنید.

$ cd bad-jokes-app
$ bit init

سپس می‌توانید کامپوننت‌هایی که قصد دنبال کردن (track) کردن آن‌ها را توسط bit دارید مشخص کنید:

$ bit add src/components/*

سپس یک کامپایلر برای کامپوننت‌هایتان انتخاب می‌کنید:

$ bit import bit.envs/compilers/react --compiler

در اینجا می‌توانید به مشاهده‌ی کامپایلر‌های موجود برای بیت بپردازید.

سپس باید برای کامپوننت‌های انتخاب شده در مراحل قبل تگی به عنوان نسخه جدید انتخاب کنید:

$ bit tag --all 1.0.0

با استفاده از دستور زیر نیز به اکانت بیت خود وارد شوید:

$ bit login

در آخر نیز کامپوننت‌های مورد نظر خود را در کالکشن خود در سایت بیت منتشر کنید:

$ bit export eden.badjokes
// that's <username>.<collection-name>

２- سایت‌های استاتیک با Gatsby

سایت ایستا یا استاتیک سایتیست که محتوای ثابتی را ارائه می‌کند که اغلب از زبان‌های نشانه‌گذاری مانند HTML قدرت می‌گیرد. این نوع از وب‌سایت‌ها بی‌نیاز از درخواست (request) زدن به بک اند برای دریافت محتوای صفحات از پایگاه داده (دیتابیس) هستند. در واقع محتوای صفحات شما از قبل ساخته شده‌اند و نیاز است که تنها به کاربر ارائه شوند.

علاوه بر موارد بالا باید گفت که سایت ایستا مراحل ساخت آسان‌تری نیز دارد؛ چرا که شما می‌توانید بدون بک اند نیز کار خود بر روی این سایت‌ها را آغاز کنید. در این نوع از سایت‌ها محتوای HTML از یک CDN به جای یک سرور دریافت می‌شوند. پس می‌توان گفت سایت ایستا مناسب برای مواردی مانند بلاگ‌ها، سایت‌های پورتفولیو و گالری هاست که نیاز زیادی به پردازش سمت بک اند ندارند.

Gatsby یک تولید کننده سایت‌ ایستا (ssg یا static site generator) مشهور است که تجربه‌ی خوبی هم برای کاربران هم برای توسعه‌دهنده‌گان به همراه دارد. به عنوان مثال می‌توان به وب‌سایت مستندات react اشاره کرد که از این ابزار استفاده کرده است.

برای استفاده از Gatsby باید npm و cli مربوط به آن را نصب کنید:

npm install --global gatsby-cli

حال می‌توانید با دستور زیر به ساخت پروژه جدید Gatsby بپردازید:

gatsby new my-gatsby-site

Npm شروع به نصب آخرین نسخه‌ی پیش‌فرض این ابزار می‌کند و شما می‌توانید پس از اتمام این مرحله، با اجرای دستور زیر پروژه خود را اجرا کنید:

gatsby develop

می‌توانید پروژه گتسبی خود را در localhost:8000 مشاهده کنید.

برای اطلاعات بیش‌تر از نحوه‌ی استفاده از این SSG نیز می‌توانید به مستندات آن مراجعه کنید.

３- React برای اندروید و iOS

جاوا اسکریپت از سال ۲۰۰۹ با ابداع phoneGap به عرصه توسعه‌‌ی اپ موبایل هم وارد شد؛ البته که در آن دوران نمی‌توانست اپ‌های خیلی جدی و جذابی با استفاده از این زبان برای موبایل ساخت و از webView در این ابزار استفاده می‌شد.

ولی در حال حاضر می‌توان با استفاده از React Native که فریمورک توسعه‌ی اپ موبایل است به تبدیل کد جاوا اسکریپت به کد نیتیو و اجرای آن بر روی موبایل به جای وب‌ویوی قدیمی پرداخت. شما با استفاده از react نیتیو می‌توانید به ساخت اپ‌های موبایل با پرفورمنس بالا بدون یادگیری زبان های برنامه‌نویسی دیگر مانند kotlin و swift بپردازید.

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

برای شروع به کار با این فریم ورک باید expo cli را نصب کنید تا با استفاده از آن به توسعه‌ی اپ react نیتیوی خود بپردازید:

npm install --global expo-cli

سپس با استفاده از دستور زیر به ساخت اولین پروژه‌ی react نیتیوی خود بپردازید:

expo init my-react-native-app

حال یک پروژه‌ی آماده دارید که می‌توانید به تغییر آن بپردازید. شما می‌توانید با یکی از تمپلت‌های این ابزار نیز به ساخت اپ نیتیو بپردازید. با اجرای دستور npm start پروژه شما اجرا خواهد شد.

ترمینال شما باید یک کد QR را نمایش دهد که آن را با اپ اکسپو در اندروید یا دوربین در iOS اسکن کنید. حال دستگاه شما باندل جاوا اسکریپت را خواهد ساخت و صفحه‌ی خوش آمد گویی react نیتیو را نمایش خواهد داد.

برای توسعه‌ی پیشرفته تر، این فریمورک به شما اجازه‌ی ساخت ماژول‌ها و کامپوننت‌های نیتو را برای اندروید و iOS می‌دهد. اگر شما نیز ترغیب به ساخت اپ‌های موبایل با استفاده از react شده‌اید می‌توانید به مستندات react نیتیو مراجعه کنید.

４- React برای دسکتاپ

Electron یک فریمورک متن باز (اپن سورس) برای ساخت اپ‌های کراس پلتفرم دسکتاپ بر روی ویندوز، مک و لینوکس است. الکترون در پشت صحنه از chromium (پروژه متن‌باز مربوط به مرورگر وب کروم و سیستم عامل کروم ساخته گوگل) بهره می‌برد.

می‌توانید برای شروع سریع الکترون از electron-react-boilerplate استفاده کنید. کد ساخته شده با این ابزار، آماده‌ی ترکیب شدن با ری‌ اکت، ریداکس، react router و وب‌ پک است و می‌توانید توسعه‌ی اپ خود را سریعا شروع کنید.

برای استفاده از این بویلرپلیت می‌توانید به سادگی مخزن عمومی آن را از گیت دانلود کرده و ماژول‌های آن را نصب کنید. پیشنهاد می‌شود برای پیش‌گیری از بروز ارورهای احتمالی از yarn استفاده کنید.

git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-boilerplate.git
cd electron-react-boilerplate
yarn

پس از پایان نصب پکیج‌ها می‌توانید پروژه خود را با استفاده از دستور yarn dev اجرا کنید و اپ اجرا شده را نیز مشاهده کنید.

５- فریمورک SSR در React

Ssr یا رندرینگ سمت سرور تنها یک تکنیک برای بهینه‌سازی محتوای سایتتان در لود اولیه آن است. اپ‌های ساخته شده با react در مرورگر کاربر رندر می‌شوند؛ یعنی پیش از پردازش محتوای سایت باید فایل‌های js دانلود شوند و این باعث افزایش زمان لود اولیه وب‌سایت شما می‌شود.

Server side rendering متدی برای بهینه‌سازی عملکرد اپ‌های react و سئو آن‌ها است که اولین درخواست کاربر از طرف سرور رندر می‌شود و بقیه‌ی درخواست‌های کاربر در سمت مرورگر پردازش و رندر خواهند شد. از آن‌جایی که اولین درخواست از سرور رندر می‌شود، موتورهای جستجو نیز می‌توانند اطلاعات مفیدتری از سایت شما برداشت کنند که باعث افزایش سئو سایت شما خواهد شد.

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

Next.js یک فریمورک کامل react است که مزایای زیادی را برای شما به همراه خواهد داشت که رندر سمت سرور یکی از آن‌هاست.

برای شروع کار با این فریمورک می‌توانید با اجرای دستور npm init next-app پروژه خود را آغاز کنید:

npm init next-app
npx: installed 1 in 2.41s
√ What is your project named? ... my-next-app
√ Pick a template » Default starter app
Installing react, react-dom, and next using yarn...

پس از اتمام نصب می‌توانید با اجرای دستور npm run dev در فولدر پروژه، آن را راه اندازی کنید. به‌صورت پیش فرض نکست با استفاده از static generation به پیش رندر (pre-render) صفحات شما می‌پردازد.

با استفاده از نکست می‌توان از چندین روش برای توسعه‌ی وب اپ خود استفاده کرد. شما می‌توانید برای شروع یادگیری این فریمورک به این‌جا مراجعه کنید.

نتیجه‌گیری

محبوبیت فراوان جاوا اسکریپت و react باعث شده روش‌های جدیدی برای توسعه با استفاده از آن‌ها ابداع شود. مشاهده‌ی نحوه‌ی کارکرد react در زمینه‌های مختلف نمونه‌ای از موفقیت زبان جاوا اسکریپت و جهان شمولی آن است. پس می‌توان گفت توسعه‌دهندگان می‌توانند تنها با تسلط به یک زبان (جاوا اسکریپت) به ساخت اپ‌های وب، موبایل و دسکتاپ بپردازند.

منبع