سرفصل ها:

1. React Native چیه و چه کاربردی داره؟
2. چرا از React Native استفاده کنم؟
3. چه برنامه‌هایی با React Native توسعه داده شده اند؟
4. مقایسه React Native با دیگر ابزارها
5. چجوری React Native نصب میشه؟
6. شروع پروژه Hello world
7. ساختار کلی یک برنامه React Native
8. نحوه خروجی گرفتن از برنامه

React Native چیه و چه کاربردی داره؟

اگر با برنامه نویسی اندروید آشنایی داشته باشید یا تصمیم دارید آنرا یاد بگیرید، باید این واقعیت رو بپذیرید که زبان جاوا برای اینکار کاملا منسوخ شده است. این گفته من نیست بلکه شرکت گوگل بعنوان توسعه دهنده سیستم عامل اندروید این رو تایید کرده. شرکت گوگل از تمام توسعه دهندگان نرم‌افزارهای جانبی یا Third-Party خواست که بجای استفاده از زبان جاوا، شروع به یادگیری Kotlin کنند و از این پس برنامه‌های خودشون رو با Kotlin طراحی و توسعه دهند. اما این بدین معنی نیست که دیگه Java کاربردی نداره و باید اون رو دور بندازیم! این گفته‌ها تنها بابت این بود که بدونیم در حال حاضر گوگل چه پیشنهادی رو به ما میده که برنامه های خودمون رو توسعه بدیم.

از اینها که بگذریم میرسیم به React Native. یک کتابخانه از جاوا اسکریپت که انقلابی به پا کرد!

همونطور که گفتم،‌ React Native یک کتابخانه (نه یک فریم ورک!) از جاوا اسکریپت هستش که با امکان پیاده‌سازی برنامه‌های اندروید و iOS رو به طور همزمان میده. بیاید بپردازیم به معنی لغوی اسم این کتابخانه. React Native یجورایی معنی “نشان دادن واکنش بومی” رو میده. ما در دو حالت میتونیم برای یک سیستم عامل مثل اندروید، iOS، ویندوز یا... برنامه بنویسیم.

اولین و بهترین راه استفاده از زبان Native یا زبان بومی اون سیستم عاملی هستش. بعنوان مثال Java یک زبان Native برای اندروید قلمداد میشه. مثل Swift برای iOS یا خانوانده C و F برای ویندوز و...

اما آیا راهی هم هست که بشه بدون استفاده از یک زبان Native برای یک سیستم عامل برنامه نوشت؟ بله! اگر ما از زبان Native یک سیستم عامل استفاده نکنیم و برای اون برنامه بنویسیم، اصطلاحا به اون برنامه میگن یک برنامه Hybrid.

حالا علت اینکه هر شرکت برای سیستم عامل خودش یک زبان Native معرفی میکنه چیه؟ خیلی سادست! چون خود اون سیستم عامل هم از اون زبان داره استفاده میکنه. بعنوان مثال خود سیستم عامل اندروید هم با زبان جاوا توسعه داده شده. پس بهتره که از زبان جاوا برای توسعه برنامه های Third-Party اندروید استفاده کنیم.

دوباره برگردیم به React Native. حالا دیگه شما میدونید کلمه Native در اسم این کتابخانه چه معنی رو میده. اما این سوال پیش میاد که چجوری میشه ما برنامه رو با زبان JavaScript بنویسیم اما اون برنامه رو یه برنامه Native برای اندروید یا iOS تلقی کنیم؟

جواب این سوال رو تو یک جمله میشه داد! React Native برنامه JavaScript شما رو به Java و Swift کامپایل (ترجمه – تفسیر) میکنه. به همین علت هستش که اسم Native رو روی این کتابخانه گذاشتند. داستان این کتابخانه به روزی برمیگرده که آقای زاکربرگ (مدیر و موسس فیسبوک) تصمیم میگیره هزینه های توسعه و پشتیبانی نرم افزارهای خودش رو بیار پایین تر. از این رو تصمیم میگیره که برنامه‌نویس های کمتری رو استخدام کنه. اما اینکار در اون زمان کار اشتباهی بود. به این دلیل که اگر هزینه مالی رو پایین می‌آورد، هزینه‌های زمانی بالا میرفت. پس تصمیم بر اختراع React Native شد.

کتابخانه React Native توسط شرکت Facebook توسعه داده شده. و شرکت Facebook در حال حاضر نرم‌افزارهای Instagram و Facebook Messenger رو توسط این کتابخانه توسعه میده.

اما در اون زمان کتابخانه ها و فریم ورک های دیگری هم بود که همین کار React Native رو انجام بده. اما تفاوت اصلی اونها Hybrid بودن اونها بود! و فیسبوک نمیخواست برنامه های ضعیفی رو وارد بازار کنه. در اون زمان Phonegap و Xamarin و تعدادی فریم ورک کمتر شناخته شده دیگر هم بودنند. بعنوان مثال با استفاده از Xamarin میتونید برنامه های اندروید و iOS رو به زبان C# توسعه بدید.

چرا از React Native استفاده کنم؟

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

شما برنامه خودتون رو با JavaScript توسعه میدید و از اون به بعدش رو واگذار میکنید به React Native. این کتابخونه خودش میفهمه که برنامه شما رو به چه صورتی به جاوا، کاتلین و سوئیف تبدیل کنه و یه برنامه Native فوق حرفه ای به شما تحویل بده.

از طرف دیگه شما با یه تیر دو نشون رو هدف میگیرید! یعنی یک بار برنامه رو مینویسید و دو خروجی اندروید و iOS تحویل میگیرید و  درواقع کار دو نفر رو میتونید همزمان انجام بدید.

در تصویر زیر ساختار پوشه های یک برنامه React Native رو مشاهده می‌کنید:

البته لازم به ذکر هستش که این یکی از پروژه‌های React Native من هستش و پوشه‌های .vscode، __test__، API، assets، components، screens، styles و variables رو خودم ایجاد کردم و در ابتدای ساخت پروژه React Native این 8 پوشه برای شما وجود نخواهد داشت.

اما همونطور که میبینید ما دو پوشه با نام های android و ios در اختیار داریم. درواقع اینها همان خروجی های دیکد شده برنامه های ما هستند. که در انتهای هر پروژه میتونیم با مراجعه به این پوشه ها، برنامه های android و ios خودمون رو خروجی بگیریم و منتشر کنیم.

چه برنامه‌هایی با React Native توسعه داده شده اند؟

در لیست زیر 37 برنامه برتر که با React Native توسعه داده شده و روانه بازار شده اند رو میتونید ببینید:

1. Facebook

2. Facebook Ads Manager

3. Facebook Analytics

4. Instagram

5. Oculus

6. Coinbase

7. Shopify

8. Tableau

9. FlipKart

10. NerdWallet

11. Discord

12. Skype

13. Bloomberg

14. Pinterest

15. Tesla

16. Eats

17. Walmart

18. Wix.com

19. Salesforce

20. Words with Friends

21. Call of Duty Companion App

22. Foreca

23. LendMN

24. Artsy

25. Tencent QQ

26. adidas GLITCH

27. Baidu Mobile (手机百度)

28. CBS Sports Franchise Football

29. Chop

30. Delivery.com

31. F8

32. Gyroscope

33. Huiseoul (惠首尔)

34. JD（手机京东）

35. SoundCloud Pulse

36. Townske

37. Vogue

با جستجوی هر کدام از این برنامه ها در Google play store یا Apple store میتونید ملاحضه کنید که این اپلیکیشن ها چه پرفورمنس بسیار بالایی دارند.

البته لازم به توضیحی در مورد اپلیکیشن های Facebook و Instagram که هر روز با اینها سروکار دارید نیست...

مقایسه React Native با دیگر ابزارها

در جدول زیر React Native با Xamarin، ionic و فلاتر مقایسه شده. قبلا در مورد Java، کاتلین و سوئیفت صحبت کردیم و حالا میدونیم که React Native هم در نهایت همان جاوا، کاتلین و سوئیفت خواهد بود. پس در این فصل کافیه ابزارهای مشابه React Native رو مقایسه کنیم.

همانطور که در این جدول ملاحظه کردید، کتابخانه React Native کارایی بهتری نسبت به سایر ابزارهای مشابه دارد. هرچند که از نظر پرفورمنس فلاتر امتیاز بهتری گرفته، اما شما بعنوان شخصی که قراره تازه وارد دنیای React Native و یا حتی شیاد JavaScript بشید، لازمه که بتونید مشکلات احتمالی که سر راهتون بوجود میاد رو حل کنید. حتی برنامه نویس های حرفه ای هم گاهی اوقات مجبورند به Stackoverflow و Github و... سر بزنند و مشکلاتشون رو برطرف کنند. همونطور که خوندید، React Native در بین جوامع برنامه نویسیان بسیار قوی و محبوبه و شما هر سوالی داشته باشید، زیر 3 دقیقه جوابش رو پیدا خواهید کرد. بنابر این 0.5 درصد امتیاز منفی نسبت به فلاتر (از نظر پرفورمنس) ارزش این رو داره که از اون چشم پوشی کنیم.

چجوری React Native نصب میشه؟

خب تا اینجای کار به خوبی با React Native آشنا شدیم و فهمیدیم که چطور کار میکنه. حالا وقتش رسیده که بریم سر اصل مطلب تا با هم React Native رو نصب کنیم. برای اینکه بتونیم یک برنامه React Native رو توسعه بدیم، نیاز به یک شکن، SDKهای اندروید و iOS، JDK، اندروید استودیو، XCode، VSCode، NPM، Node server و Genymotion داریم. که به ترتیب نصب هر کدوم رو مورد بررسی قرار میدیم.

1.فعال سازی شکن

قبل از هرچیز نیاز به یک شکن داریم تا بتونیم تحریم هایی که علیه ایران از سوی شرکت های اعمال شده رو از بین ببریم. به شما پیشنهاد میکنم از shecan.ir استفاده کنید. چرا که برخلاف سایر ابزارها تنها DNSهای ورودی و خروجی شما رو تغییر میده و روی سرعت اینترنت شما اختلالی بوجود نمیاره. برای اینکه shecan رو فعال کنیم، وارد سایت shecan میشیم و دو IP که در قسمت پایینی این سایت وجود داره رو به روشی که باز هم توی خود این سایت بیان شده روی سیستم عامل خودمون فعال میکنیم.

2.نصب SDKهای اندروید و iOS

SDK یا همان Softwar development kit به مجموعه نرم ابزارهایی در قالب یک کیت قابل توسعه گفته میشه که به کمک میکنند نرم افزار خودمون رو ترجمه کنیم. اینکه چگونه این بسته های نرم افزاری فعالیت میکنند برای ما اهمیتی نداره و فقط کافیه اونها و نصب کنیم. حتی در ادامه نیازی نداریم که بطور مستقیم به اونها مراجعه کنیم. بعنوان مثال فرض کنید قراره برنامه اندروید خودتون رو روی ورژن 4.4 اندروید شبیه سازی و تست کنید. پس لازمه که SDK مربوط به اندروید 4.4 رو داشته باشید و تمام. همین که داشته باشید کافیه. بقیه کارها بطور خودکار انجام میشوند. همین قضیه رو بعنوان مثال برای ios ورژن 11 تصور کنید. خلاصه برای اینکه بتونیم SDKها رو داشته باشیم ابتدا باید Android stidio و XCode رو نصب کنیم. نکته بسیار مهم اینجاست که XCode یک ابزار توسعه برنامه های ios می باشد و این ابزار بطور انحاصری برای سیستم عامل macintosh موجوده. پس برای اینکه بتونیم برنامه های ios رو تست و خروجی بگیریم باید یک mac داشته باشیم. اما جهت توسعه برنامه نیازی به mac نیست. چرا که شما در حال نوشتن یک کد واحد برای دو سیستم عامل android و ios هستید. (پس mac تنها برای تست و دریافت خروجی نیازه). نصب Android studio، SDKهای مورد نیاز و JDK و همچنین تنظیم Environmentهای ANDROID_HOME و JAVA_HOME در وبسایتهای دیگه بطور مفصل توضیح داده شده. بنابر این ما در این مطلب از تکرار مکررات پرهیز میکنیم. (با جستجوی دو کلمه “نصب اندروید” ده‌ها وب سایت فارسی زبان برای شما این فرایند رو توضیح داده اند).

3.نصب Node server

بعد از اینکه از صحت نصب Android studio، SDKها و JDK و همچنین تنظیم Environmentها اطمینان حاصل کردید، به وبسایت nodejs.org مراجعه کنید و روی گزینه سبز رنگ LTS کلیک کنید:

یک فایل .exe برای شما دانلود میشود که لازم است آنرا مانند سایر نرم افزارها نصب کنید. نصب این فایل .exe به قدری ساده است که نیازی به توضیح وجود ندارد.

4. نصب نرم افزار Genymotion

ما از Gemymotion برای شبیه سازی یک سیستم عامل اندروید کاملا واقعی استفاده میکنیم. برای دانلود به وبسایت https://www.genymotion.com/download/ مراجعه کنید. بعد از اینکه در این سایت ثبت نام کردید، نرم افزار را دانلود و نصب کنید. بعد از نصب لازم با نام کاربری که در مرحله قبل ساختید وارد نرم افزار شوید.

5. نصب VSCode

محیط برنامه نویسی VSCode در حال حاضر بهترین محیط برنامه نویسی شناخته شده که با اون میتویند هر برنامه‌ای رو با هر زبانی توسعه دهید. ما هم از VSCode برای نوشتن و توسعه برنامه های React native خودمون استفاده میکنیم. پس برای نصب VSCode به وبسایت https://code.visualstudio.com/ مراجعه کنید و روی گزینه آبی رنگ Download کلیک کنید:

6. نصب NPM

NPM مخفف عبارات Node package manager هستش. یک ابزار جهت مدیریت، نصب، آپدیت کردن و پاک کردن پکیج ها یا همان کتابخانه های جاوا اسکریپت می باشد. ما از این ابزار برای نصب React Native و همچنین کتابخانه های مورد استفاده خودمون استفاده میکنیم. شما قبلا npm رو نصب کردید. درواقع npm همراه با node برای شما بطور خودکار نصب شده. صرفا جهت اطمینان از اینکه این دو ابزار برای شما بدرستی نصب شده اند، در محیط cmd یا powershell ویندوز خودتون دو عبارت زیر رو جداگانه بنویسید و اینتر بزندی:

برای node عبارت node -v و برای npm عبارت npm -v را وارد نمایید. اگر این دو ابزار برای شما بخوبی نصب شده باشند، بعد از زدن اینتر ورژن آنها برای شما نمایش داده می شوند. به تصویر زیر دقت کنید:

همونطور که ملاحضه میکنید برای من ورژن 15.0.1 از node و 7.0.3 از npm نصب شده.

7. نصب React Native

حالا کافیه که React Native رو نصب کنیم و شروع به ساخت پروژه کنیم. برای نصب React Native، محیط powershell رو باز کنید و دستور زیر رو وارد کنید:

دستورات npm برای نصب کتابخانه عموما به همین صورت میباشند. کلمه npm مشخص میکنید که شما میخواهید از دستورات npm استفاده کنید. کلمه install یا i و uninstall یا u و update به ترتیب برای نصب، حذف و آپدیت یک کتابخانه مورد استفاده قرار میگیره. عبارت -g قرار گرفته تا مشخص کند شما درحال نصب React Native بصورت global و عمومی هستید. به این معنی که از این پس یک گروه دستوری به اسم react-native در محیط powershell برای شما نصب خواهد شد که شما از تمام دایرکتوری ها به آن دسترسی خواهید داشت. در قسمت آخر هم که نام پکیج مورد نظر قرار میگیرد. همونطور که قبل تر گفتم ما در حال نصب یک گروه دستوری در محیط powershell به اسم react-native هستیم. و درواقع داریم cli مربوط به React Native رو نصب میکنیم. CLI مخفف عبارت command line interface هستش. که تقریبا معنی همان گروه دستوری که خدمتتون عرض کردم رو میده.

ممکن است اجرای این دستوری حدودا تا 10 دقیقه زمان ببره. پس صبر کنید تا مراحل نصب به خوبی انجام شود.

در این مرحله تمام مراحل نصب به اتمام رسید. در فصل بعد با هم چگونگی ایجاد یک پروژه رو مورد بررسی قرار میدهیم.

شروع پروژه Hello world

برای ایجاد پروژه جدید در React Native، به پوشه ای بروید که قصد قرار دادن پروژه رو در اونجا دارید. وقتی به محل مورد نظر رفتید، دکمه Shift را نگه دارید و کلیک راست کنید. با این کار در منو گزینه Open powershell window here به شما نمایش داده میشود. آن را انتخاب کنید تا وارد محیط powershell در دایرکتوری مورد نظر شوید. حالا کافیت دستوری زیر رو وارد کنید:

با وارد کردن این دستور پروژه جدیدی با نام HellowWorld برای شما ایجاد میشود. دفعه اول که این دستور را وارد میکنید، پروسه زمان بری طی خواهد شد. اما برای دفعات بعدی به دلیل اینکه بسیاری از کتابخانه های مورد نیاز کش (cache) می شود، راه اندازی پروژه بسیار سریع تر خواهد بود.

ساختار کلی یک برنامه React Native

در کد زیر میتوانید ساختار کلی یک برنامه React Native ساده رو ملاحضه کنید:

نحوه خروجی گرفتن از برنامه:

جهت خروجی گرفتن از برنامه کافیست تا پوشه اندروید پروژه رو در Android studio باز کنید و پس از ساخت امضای شخصی خودتون، از برنامه یک خروجی Native با فرمت apk یا abb دریافت کنید. توضیح دادن در مورد نحوه خروجی گرفتن از برنامه اندروید هم صدها بار در سایت های فارسی و غیر فارسی توضیح داده شده و فقط کافیست “نحوه خروجی گرفتن اندروید” رو در گوگل جستجو کنید تا به راحتی از برنامه خودتون خروجی بگیرید.

از شما ممنونم که قسمت اول آموزش React Native رو با من همراه بودید. تا آموزش بعدی.. مخلصم

در قسمت بعد خواهید خواند:

• معرفی Componentها
• نحوه استایل دهی به کامپوننت ها
• معرفی Propها و کاربردهای آنها
• معرفی Stateها و کاربرهای آنها
• نحوه تعریف توابع و بهروری از آنها
• معرفی چند کتابخانه آماده
• نحوه نصب کتابخانه ها در دایرکتوری
• نحوه افزودن کتابخانه به یک اسکرین
• بکارگیری یک کتابخانه برای مثال