آموزش React Native: اولین اپلیکیشن React Native خود را بسازید

آیا به یادگیری React Native علاقه‌مندید؟ بیایید اولین اپلیکیشن React Native خود را بسازید، یک اپلیکیشن ساده موبایلی که لیستی از کشورها را از یک Rest API واکشی کرده و نمایش می‌دهد. هدف این آموزش React Native معرفی آن به شماست و به شما پایه و اساس آن چه که قبل از شروع ساخت یک اپلیکیشن واقعی با React Native را نیاز دارید، معرفی می‌کند. در انتهای این مقاله شما می‌توانید یک اپلیکیشن ًReact Native تولید کنید که بر روی دستگاه‌های با هر دو سیستم عامل اندروید یا iOS اجرا خواهد شد.

کتابخانه React Native یک کتابخانه توسعه Cross Platform است که بر اساس React توسط Facebook برای توسعه برروی پلتفرم‌های موبایلی ساخته شده است. این کتابخانه در سال ۲۰۱۳ به صورت یک پروژه hackthon (پروژه هایی که به صورت جلسه ای با برنامه نویسان و متخصصين سخت افزار برگزار می‌شود و نتیجه آن می‌تواند یک نرم افزار یا یک سخت افزار جدید باشد.) درون Facebook ساخته شد و بعدها در سال ۲۰۱۵ برای استفاده عموم منتشر شد. به سرعت به محبوبیت بزرگی در بین جامعه توسعه‌دهندگان دست پیدا کرد و کمپانی‌های متعددی آن را به عنوان راه حل اصلی توسعه موبایل خود برگزیدند چرا که اپلیکیشن‌های ًReact Native دارای یک کد مشترک برای هر دو پلتفرم iOS و اندروید است و نتیجه نهایی به راحتی قابل تشخیص از اپلیکیشن‌هایی که به صورت Native نوشته شده‌اند، نیست. طبق وبسایت ًReact Native:

در سال ۲۰۱۸ React Native در GitHub رتبه دوم را از نظر تعداد استفاده کنندگان به دست آورد. امروز React Native بسیاری از تولید کنندگان شخصی نرم افزار و کمپانی‌های در سرتاسر جهان مانند Microsoft و Expo پشتیبانی می‌شود.

قبل از آن که شروع به تولید اولین اپلیکیشن React Native خود کنیم، بیایید مزایا و معایب آن و جزئیات بیشتری از این که واقعا React Native چیست را بررسی کنیم.

الف- React Native چیست؟

  • یک کتابخانه توسعه نرم افزاری موبایلی ترکیبی (Hybrid) است.
  • اپلیکیشن‌های React Native با JSX و Javascript نوشته می‌شوند و به کد native کامپایل می‌شوند.
  • اپلیکیشن‌های React Native شامل ۸۵ الی ۹۰ درصد کد مشترک JSX و Javascript هستند.

ب- آنچه که React Native نیست؟

  • الف- WebView نیست.
  • ب- React نیست.
  • ج- PWA نیست.

ج- چرا باید React Native را انتخاب کنیم و یا یاد بگیریم؟

  • پلتفرم‌های گوناگونی را با تلاش و کد یکسان پشتیبانی می‌کند. (iOS, Android, Web, TVOS)
  • جامعه بزرگ و درحال رشدی دارد که پشتیبانی کافی برایتان فراهم می‌کند.
  • قابلیت پشتیبانی از کد native را دارد که به این معنی است که شما می‌توانید کد native را برای use-case ها و ‌Business Logic برنامه تان تغییر دهید.
  • نیاز به دانش Javascript دارد، Javascript زبانی پر طرفداریست که یادگیری آن همیشه به دردتان خواهد خورد.
  • ویژگی جالبی دارد که به نام رفرش سریع یا ریلودینگ داغ

د- معایب React Native

معایبی نیز برای React Native وجود دارند، اما توسعه دهندگان این کتابخانه با توجه به رشد جامعه آن در تلاش برای بهبودش هستند:

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

اولین اپلیکیشن React Native خود را بسازید

بیایید یک اپلیکیشن React Native بسازیم که لیستی از کشورها را نمایش دهد. اپلیکیشن شامل تنها یک صفحه است و ما میخواهیم عملکرد و طراحی ظاهر آن را به ساده‌ترین شکل ممکن انجام دهیم، چرا که هدف این آموزش، کمک به شما برای راه‌اندازی محیط React Native و لمس این زبان برنامه‌نویسی است.

در آموزش React Native ما میخواهیم از Expo استفاده کنیم. Expo یک ابزار قوی برای تازه‌کاران در دنیای React Native است که امکان اجرا و مشاهده اپلیکیشن‌های React Native را برروی دستگاهتان به سادگی فراهم می‌کند.

مرحله اول - نصب Expo

مرجع رسمی how to install Expo مراحل نصب آن را توضیح داده است. هر زمان که Expo را نصب کردید، بازگردید و مراحل بعدی را دنبال کنید.

مرحله دوم - ساخت اپلیکیشن React Native

دستور زیر را در Terminal اجرا کنید:

expo init firstapp

گزینه پروژه blank را انتخاب کنید.

گزینه ِY را انتخاب کنید تا با yarn کار کنید.

Yarn v1.19.2 found. Use Yarn to install dependencies? (Y/n)

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

مرحله سوم - اولین اپلیکیشن React Native خود را اجرا کنید

دستورات زیر را اجرا کنید تا پروژه تازه ساخته شده شروع به کار کند:

cd firstapp
npm run ios

در این لحظه اگر Expo به درستی در مراحل قبل تنظیم شده باشد، پروژه React Native شما باید با موفقیت اجرا شود و صفحه ای مانند اسکرین شات زیر به شما نمایش داده شود.

این نمایی از اولین اپلیکیشن React Native شماست که با موفقیت ساخته‌اید. به صورت پیشفرض به شما می‌گوید که App.js را باز کنید تا بتوانید روی اپلیکیشن خود کار کنید. موافقم که بهترین خوش آمدگویی که Expo می‌توانسته پیشنهاد بدهد نیست اما ما به حرفش گوش می‌کنیم و آنچه که گفته را انجام می‌دهیم. بیایید فایل App.js را باز کنیم، که کد زیر در آن وجود دارد:

قبل از ادامه توضیحی در رابطه با آنچه که در این فایل اتفاق می‌افتد، بدهیم:

  • متغیرهای استایل شامل دیکشنری هایی ظاهری متفاوتی از کامپوننت‌ها هستند.
  • تابع App یک کامپوننت عملگرای React Native است. به صورت پیشفرض آنچه که ما در حال حاضر می‌بینیم را روی صفحه رندر می‌کند. در بالا importها را می‌بینیم که کامپوننت‌های مورد نیاز را import می‌کنند.

مرحله چهارم - اضافه کردن لیست کشورها

می‌خواهیم کمی پا را فراتر گذاشته و این صفحه بدردنخور را به صفحه دلخواهمان تغییر دهیم. همانطور که اشاره شد، قصد نمایش لیستی از کشورها را داریم، برای این منظور نیاز به پیاده سازی کد به شکل زیر است:

همانطور که مشاهده می‌کنید ما App.js را به روز کردیم و موارد زیر را به آن اضافه نمودیم:

  • یک Flatlist برای نمایش لیست کشورها
  • یک dataset برای نمایش روی لیست
  • همچنین style را نیز به روز کردیم تا شامل style متن ما نیز شود

اپلیکیشن‌تان را اگر هنوز اجرا نکرده‌اید، اجرا کنید و آنچه می‌بینید باید به شکل زیر باشد:

حالا ما چیزی برای کار کردن داریم. اما داده‌هایمان استاتیک هستند و ما علاقه‌مندیم که یک لیست پویا و طولانی‌تر داشته‌باشیم، که قابلیت تغییر داشته و تغییرات را در صفحه برنامه خود ببینیم. پس ما نیاز داریم که UIای Reactive داشته باشیم تا بتوانیم مدل داده‌ایمان را تغییر دهیم. این اساس مفهوم React و ًReact Native است. پس ما نیاز به معرفی مفهوم state داریم.

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

const [countriesData, setCountriesData] = useState([])

در React Native به این useState به اصطلاح hook گفته می شوند. بر اساس مقاله رسمی React در رابطه با hook:

یک hook یک تابع مخصوص است که به شما اجازه‌ قلاب شدن به ویژگی‌های ‌React را می‌دهد.

ما تازه یک state برای داده کشورها ساخته‌ایم که مقدار پیشفرض آرایه خالی دارد و یک تابع به نام setCountriesData برای بروزرسانی مقدار counriesData داریم. به عنوان مثال، صدا زدن تابع زیر مقدار countriesData را به مقدار ورودی تغییر خواهد داد.

setCountriesData([1,2,3])

یک hook مهم دیگه useEffect است که در تکه کد زیر پیاده‌سازی شده است. به آسانی هر کدی که داخل useEffect قرار بگیرد، زمانی که کامپوننت mount شود، اجرا خواهد شد.

لطفاً از آنچه در حال رخ دادن است، نترسید. ما داریم از fetch API برای دریافت داده‌ی کشور‌ها از یک API استفاده می‌کنیم و لیستی از کشورهای آفریقایی را نمایش می‌دهیم. این Fetch API ابزاریست که به وسیله آن می‌توانید در React Native درخواست شبکه ایجاد کنید. همانطور که متوجه شدید، ما از یک آدرس API رایگان در وبسایت restcountries.eu استفاده کردیم که به ما یک آبجکت JSON برمی‌گرداند که در بند then متد واکشی پارس شده است. زمانی که عملیات پارس با موفقیت انجام شود، ما متغیر state کشورها را با لیست جدیدی از کشورها که به تازگی دریافت کرده‌ایم، بروزرسانی می‌کنیم. در نتیجه‌ی بروزرسانی آبجکت state، ظاهر UI نیز دوباره رندر شده و ما می‌توانیم کشورها را روی صفحه ببینیم.

مرحله پنجم - به اولین اپلیکیشن React Native خود style بدهید

حالا می‌خواهیم روی طراحی اپلیکیشن تمرکز کنیم و تغییراتی را روی دیکشنری styles انجام دهیم.

همانطور که مشاهده می‌کنید، رنگ پس‌زمینه را با تغییر صفت backgroundColor به کد hex #483d8b به بنفش تغییر دادیم.

قواعد بسیار شبیه CSS است، با اندکی تفاوت. اما ایده اصلی یکسان است، پس اگر CSS را بلد باشید به راحتی می‌توانید به اپلیکیشن React Native خود را استایل دهید. همچنین اگر با flexbox layout آشنایی داشته باشید که چه بهتر.

نتیجه‌گیری

ما بزرگترین نقاط قوت استفاده از React Native را برای فرایند توسعه نرم‌افزار موبایلی مشاهده کردیم و دیدیم که ساخت اپلیکیشن برای اندروید و iOS چه ساده است.

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

پس از آن در رابطه با کامپوننت‌های عملگرا، hook و state آموختیم. از Fetch API برای دریافت داده از طریق درخواست شبکه استفاده کردیم و کامپوننت‌های ظاهری را با تغییر در stylesheet طراحی کردیم.

تبریک می‌گویم! شما ازین پس قادرید که اپلیکیشن React Native بسازید. حالا زمان آن است که کامپوننت‌های پیشرفته‌تر را نیز فرا بگیرید تا بتوانید یک اپلیکیشن با عملکردهای پیچیده‌تر بسازید که بتوانید آن را در App Store و Google Play Store منتشر کنید. لیستی از بهترین منابع React Native را بررسی کنید تا درباره آن بیشتر بدانید و بتوانید به مراحل بعدی بروید.

مراحل بعدی

حالا که شما در رابطه با بهترین ابزارهای توسعه React Native دانش خوبی کسب کرده‌اید، بهتر است که به موضوعات زیر نیز نگاهی بیاندازید:

اگر شما به یک پایه برای شروع اپلیکیشن ‌React Native خود نیاز دارید، می‌توانید با کمک گرفتن از قالب‌های React Native آماده، کار خود را چندین ماه به جلو بیاندازید.

منبع مقاله: https://www.instamobile.io