React Native چیست؟ React Native یک فریمورک UI متن باز برای ساخت اپلیکیشن موبایل است که توسط فیس بوک معرفی و عرضه شده است. به کمک ری اکت نیتیو و زبان جاوا اسکریپت می‌توانیم برای اندروید، آی اواس، وب و حتی UWP (پلتفرمی برای ساخت برنامه‌های تحت ویندوز، ویندوز موبایل، Xbox و سایر محصولات مایکروسافت) اپلیکیشن بسازیم. در این مقاله بررسی می‌کنیم که React Native چیست و چه مزایایی دارد. با وب سایت آموزش برنامه نویسی سون لرن همراه باشید.

دنیای جذاب جاوا اسکریپت 

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

جاوا اسکریپت در سمت سرور، یک محیط اجرایی به نام Node.js دارد و فریمورک‌هایی مانند Express.js به برنامه نویس کمک می‌کنند در سمت سرور هم با جاوا اسکریپت کار کند. با جاوا اسکریپت و به همراهی HTML می‌توان بازی‌های تحت وب ساخت. همینطور به کمک React Native و زبان جاوا اسکریپت می‌توانید اپلیکیشن موبایل برای پلتفرم‌های مختلف بسازید.

React Native چیست؟

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

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

برنامه‌های React Native نیز مانند React با زبان جاوا اسکریپت و JSX نوشته می‌شوند. سپس می‌توان از این کدهای نوشته شده برای اندروید و iOS خروجی گرفت. البته باید دقت داشته باشید که برنامه‌ای که با React Native می‌نویسید، حالت Webview نداشته و کامپوننت‌های واقعی UI را تولید می‌کند. در واقع اپلیکیشن شما هیچ تفاوتی با سایر برنامه‌های موبایل که با زبان Native نوشته شده‌اند نخواهد داشت.

کدام برندها از React Native استفاده می‌کنند؟

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

1 - فیس بوک

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

2 - اینستاگرام

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

3 - Discord

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

4 - SoundCloud

SoundCloud یکی از معروف‌ترین سرویس‌های اشتراک انواع موسیقی و فایل‌های صوتی است که کاربران بسیار زیادی دارد. این شرکت تعداد زیادی توسعه دهنده iOS داشت که همین مورد باعث می‌شد اختلاف بین خروجی اندروید و خروجی iOS برنامه زیاد شود. آن‌ها بعد از انجام آزمایش‌های مختلف به این نتیجه رسیدند که React Native گزینه‌ی ایده آلی برای رفع مشکلاتشان بوده و سرویس خود را به طور کامل تحت این پلتفرم طراحی کردند.

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

برنامه‌هایی که به کمک جاوا و سوییفت نوشته می‌شوند را به اصطلاح بومی یا Native می‌نامند. ممکن است برایتان این سوال پیش آمده باشد که چرا با وجود زبان‌های بومی باید سراغ فریمورک‌ها و واسطه هایی مثل React Native برویم؟

همانطور که نمودار بالا مشاهده می‌کنید React Native، انگولار (Angular) و ویو (Vue) جزء برترین فریم ورک‌های جاوا اسکریپت برای طراحی رابط کاربری محسوب می‌شوند. اما سوالی که پیش می‌آید این است که چه ویژگی هایی باعث شده اند تا React Native به یکی از محبوب‌ترین فریم ورک‌ها در دنیای وب تبدیل شود؟ در ادامه چند دلیل محبوبیت این فریم  ورک را با هم بررسی می‌کنیم تا دریابید چرا اکثر برنامه نویسان متقاعد شده اند که به آموزش ری اکت بپردازند؟ در ادامه درمورد مزایای استفاده از React Native بیشتر صحبت می‌کنیم.

1 - یک بار بنویسید، چند جا استفاده کنید.

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

2 - امکان استفاده از زبان‌های Native کنار React

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

3 - صرفه جویی در زمان و هزینه

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

4 - پشتیبانی قوی توسط تیم بزرگی از برنامه نویسان

فیس بوک در سال 2015 فریمورک React Native را معرفی کرد و تا امروز هم پشتیبانی آن را به عهده گرفته است. React Native به صورت متن باز (Open Source) منتشر شده و کدهای آن در گیت هاب وجود دارد. در سال 2018، React Native در گیت هاب رتبه‌ی دوم بیشترین مشارکت را بین تمام Repositoryها کسب کرد. همچنین انجمن‌ها و برنامه نویسان زیادی در دنیا هستند که در صورت بروز مشکل می‌توانید روی کمک آن‌ها حساب باز کنید.

5- روان بودن و خوانایی کدها دستورات لغوی (Syntax) در فریم ورک ری اکت ، بسیار ساده هستند. وجود قوانین و چارچوب هایی مناسب در پیاده سازی این فریم ورک، باعث شده تا کدها از خوانایی خوبی برخوردار باشند. 6- آموزش آسان آموزش ری اکت نیتیو بسیار آسان است و برای یادگیری آن، تنها نیاز به آشنایی با زبان‌های تحت وب یعنی Html ،Css و Java Script خواهید داشت. 7- کارایی بالا React Native برای کاهش پردازش‌های سنگین از چندین تکنیک هوشمند استفاده می‌کند تا بدون انجام کارهای زیاد، رابط کاربری را به روز کند. همچنین چندین راه برای افزایش سرعت برنامه‌ها وجود دارد. React Native قابلیت همزمانی یا real time دارد؛ همزمانی چیزی شبیه به گفتگوی دو نفر است که یکی می‌پرسد و دیگری جواب می‌دهد، یعنی گاهی کاربر درخواست می‌فرستد و گاهی هم سرور این کار را انجام می‌دهد. 8- تست پذیری یکی از موارد بسیار مهم برای توسعه دهندگان، تست نرم افزار است که باعث پیدا کردن اشکالات در تولید نرم افزار می‌شود. از دیگر مزایای تست نرم افزار می‌توان به تضمین رضایت، اعتماد مشتری به برنامه و اطمینان از کیفیت محصول اشاره کرد. بدین منظور ری اکت ابزارهای مفیدی همچون Enzyme، Jest و ... را ارائه کرده است.

مزایا و معایب React Native چیست؟

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

• هزینه‌ی کمتر هنگام توسعه‌ی اپلیکیشن‌های تلفن همراه
• تضمین پایداری برنامه و تغییرات ناچیز در هر ورژن
• وجود ابزارهای توسعه‌ی فراوان و کاربردی
• قابلیت ترکیب شدن با زبان‌های بومی
• وجود جامعه‌ی توسعه دهندگان قوی و نمونه‌های کاربردی

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

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

تفاوت React و React Native چیست؟

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

تفاوت در چیستی React Native و React

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

تفاوت React Native و React: المان‌های سازنده‌ی برنامه

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

تفاوت React Native و React: ساختار کد

بسیاری از پکیج‌ها و کتابخانه‌ها نمی‌توانند از این دو به طور همزمان در کنار هم استفاده کنند. زیرا React Native از HTML برای رندر برنامه استفاده نکرده و کارکرد آن کمابیش همانند یک شبیه ساز است. برای مثال کدهای مربوط به انیمیشن‌های CSS در React Native قابل اجرا نیستند و به جای تگ div، از کامپوننت View استفاده می‌شود. همچنین سازوکار کدنویسی مفهوم جابجایی میان دو صفحه از برنامه، در این دو به طور کلی متفاوت است.

ری اکت نیتیو یا جاوا؟

همانطور که می‌دانید اندروید و iOS، سهم بزرگی از بازار موبایل را تصاحب کرده‌اند. زبان رسمی ساخت اپلیکیشن برای اندروید، جاوا است؛ البته مدتی است که زبان کاتلین هم به آن اضافه شده است. از طرفی اپلیکیشن‌های iOS از زبان سوییفت (Swift) استفاده می‌کنند. در حالی که React Native می‌تواند در توسعه‌ی هر دو سیستم عامل مورد استفاده قرار گیرد. حال با وجود ری اکت نیتیو این سوال پیش می‌آید که برای توسعه اپلیکیشن‌های موبایل، آموزش ری اکت را دنبال کنیم یا به سمت یادگیری جاوا یا سوییفت برویم؟

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

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

 

ری اکت نیتیو یا فلاتر؟

برای اولین بار گوگل در ماه مه سال 2017 فلاتر را معرفی کرد، اما نسخه‌ی پایدار آن در دسامبر 2018 منتشر شد. فلاتر یک کیت توسعه‌ی نرم ‌افزار متن باز مخصوص رابط کاربری است که از آن برای توسعه‌ی اپلیکیشن‌های اندروید، iOS، لینوکس، مک، ویندوز و وب استفاده می‌شود.

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

تفاوت در زبان‌های برنامه ‌نویسی دارت و جاوا اسکریپت

فلاتر از یک زبان برنامه‌نویسی به نام دارت (Dart) استفاده می‌کند. دارت با استفاده از بهترین و بهینه‌ترین ایده‌های زبان‌های مختلف برنامه‌نویسی توسعه یافته است. این زبان نسبت به جاوا و جاوا اسکریپت دارای قواعد کمتری است.

سرعت یادگیری فلاتر

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

منابع یادگیری فلاتر

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

ابزارهای آماده‌ی رابط کاربری (UI)

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

جامعه‌ی توسعه ‌دهندگان

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

فرصت‌های شغلی

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

ری اکت نیتیو یا انگولار؟

تا اینجا درباره فریم ورک React Native صحبت کردیم، اما بد نیست سراغ بررسی یکی دیگر از فریم ورک‌های محبوب جاوا اسکریپت نیز برویم تا راحت‌تر بتوانید آن‌ها را با یکدیگر مقایسه کرده و برای یادگیری هر کدام تصمیم بگیرید.

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

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

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

همانطور که اشاره شد اولین قدم در آموزش React Native این است که با زبان‌های توسعه وب مانند Html، Css و مخصوصا Java Script به خوبی آشنا باشید. برنامه نویسانی که رابط کاربری طراحی می‌کنند آمادگی بیشتری برای آموزش ری اکت نیتیو دارند. اما برای آموزش انگولار باید مفاهیم جدید بیشتری را نسبت به ری اکت نیتیو یاد بگیرید.

اولین اولویت در آموزش انگولار ، یادگیری زبان تایپ اسکریپت (Type Script) است. این زبان در حقیقت همان نسخه توسعه یافته زبان جاوا اسکریپت محسوب می‌شود و قابلیت شیءگرایی را با دقت بالایی پشتیبانی می‌کند. در Angular مفاهیمی چون MVC (سرویس ها، مدل‌ها و نمایش ویو) به مراتب پیچیده‌تر از ری اکت است. مجموعه این عوامل دست به دست هم می‌دهند تا برای یادگیری این فریم ورک، به زمان بیشتری نیاز داشته باشید.

آموزش رایگان React Native

همانطور که تا به حال گفته شد، ری اکت نیتیو مزایای زیادی دارد و می‌تواند به فریم ورک محبوب شما تبدیل شود. برای یادگیری ری اکت  نیتیو آشنایی با مفاهیم شی گرایی و زبان‌های CSS، HTML و JS بسیار به شما کمک می‌کنند. حال اگر آماده یادگیری آن هستید، در این قسمت قدم به قدم پیش می‌رویم و آموزش React Native را با یک برنامه خیلی ساده شروع می‌کنیم تا با مفاهیم اولیه آن آشنا شوید.

بیشتر بخوانید: شی گرایی یا Object Oriented Programming چیست؟

در ابتدای کار، کتابخانه موردنظر را با تگ Script و به طور مستقیم وارد کد Html کنید. بنابراین یک فایل به نام index.html ساخته و کدهای زیر را در آن وارد کنید:

<html>
<head>
  <title>Introduction to React library</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/babel">
    /* 
    ADD REACT CODE HERE 
    */
    </script>
</body>
</html>

همان طور که می‌بینید در این برنامه فایل‌های react، React DOM و Babel را بارگذاری کردیم. بارگذاری کتابخانه react به این دلیل است که react مستقل از مرورگر عمل می‌کند و خارج از آن نیز فعال است، به همین دلیل کتابخانه reactDOM را نیز بارگذاری می‌کنیم تا بتواند react را در مرورگرهای مختلف پشتیبانی کند. علت لود کردن Babel هم این است که React از تکنولوژی JSX استفاده می‌کند که این تکنولوژی، به شما اجازه می‌دهد از کدهای Html درون کدهای Java Script استفاده کنید. Babel کدهای JSX را به کدهای Js تبدیل می‌کند تا مرورگر متوجه آن‌ها بشود.

تمام کدهای مربوط به React در یک div با id=”root” قرار می‌گیرند. در انتها یک تگ به صورت زیر قرار گرفته که در این قسمت می‌توانید کدهای مربوط به React را بنویسید. <"script type=”text/babel>

آموزش کار با Components در React Native

در React Native همه چیز به عنوان یک جز یا Component در نظر گرفته می‌شود. برای درک بهتر این موضوع کد زیر را مشاهده کنید:

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

در اینجا یک component به نام Hello ساختیم که از React.Component ارث بری می‌کند. ارث بری به این معنی ست که کلاس Hello، می‌تواند ویژگی‌های کلاس پدر یعنی React.Component را داشته باشد. درون این Component می‌توان توابع دلخواهی قرار داد که در اینجا تابع ()render را داریم. این تابع می‌تواند متن دلخواه ما را روی صفحه نمایشگر نشان دهد.

در مثال بالا تعیین می‌کنیم که خروجی، نوشته Hello World با تگ h2 باشد. کد JSX بسیار شبیه Html است اما تفاوت هایی دارد. کد JSX مثال بالا به این شکل است:

class Hello extends React.Component {
    render() {
        return React.createElement(
            "h1",
            null,
            "Hello world!"
        );
    }
}

حال برای نشان دادن Component تولید شده در مرورگر، باید از متد یا تابع ()render مربوط به ReactDOM استفاده کرد:

ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
);

همانطور که در کد بالا پیداست، تابع render دو ورودی می‌گیرد. ورودی اول همان Component ساخته شده است و ورودی دوم مشخص می‌کند که قصد داریم کدها را در کدام قسمت از صفحه خروجی بگیریم. در واقع به ReactDOM اعلام می‌کنیم که از این کد، در div با id=”root” خروجی بگیرد. تا این مرحله، کد کامل شده به صورت زیر است:

<html>
<head>
  <title>Introduction to React library</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/babel">
      class Hello extends React.Component {
        render() {
          return <h1>Hello world!</h1>;
        }
      }
      ReactDOM.render(
        <Hello />, 
        document.getElementById("root")
      );
    </script>
</body>
</html>

اگر کد بالا را اجرا کنید، خروجی به این شکل خواهد بود:

آشنایی با انواع داده در React Native

[subtitle]

داده نوع Props

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

ReactDOM.render(
    <Hello message="my friend" />, 
    document.getElementById("root")
);

به تابع render() که قبلا تعریف شده بود، یک ویژگی به نام message اضافه کردیم که مقدار آن “my friend“ است. به این شکل می‌توان یک Prop را تعریف کرد و درون کامپوننت به آن دسترسی داشت. برای اینکه در کامپوننت Hello به Prop دسترسی داشته باشیم باید از this.props.message استفاده کنیم:

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

دقت کنید که Props موردنظر را درون {} قرار دادیم، زیرا یک کد جاوا اسکریپت را درون کدهای JSX گذاشتیم و یک کامپوننت پویا (Dynamic) ساختیم. اگر این کار را انجام نمی‌دادیم، Props یک رشته استاتیک در نظر گرفته می‌شد. از Props مورد نظر در کد، به جای کلمه world استفاده کردیم. حال خروجی ما در مرورگر به این شکل خواهد بود:

اما گفتیم که Props توسط کامپوننت‌ها قابل کنترل نیست. پس اگر نیاز به تغییر داده‌ها در هر کامپوننت داریم بهتر است از State استفاده کنیم.

آشنایی با داده نوع State

State نوعی داده شخصی (Private) است که از آن برای ذخیره اطلاعات استفاده می‌کنیم و درون هر کامپوننتی که تعریف شود، فقط توسط آن قابل دسترسی و کنترل است. بنابراین اگر نیاز به تغییر اطلاعات در یک کامپوننت دارید بهتر است از State استفاده کنید.

که State را درون یک کلاس کامپوننت تعریف می‌کنیم. برای مقداردهی آن نیز می‌توان از تابع Constructor همان کلاس استفاده کرد. کد زیر را ببینید:

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'my friend (from state)!',
    };
  }
  render() {
    return <h1>Hello {this.state.message}!</h1>;
  }
}

می بینید که درون Constructor از عبارت (Super (props استفاده کردیم. در مواردی که یک Component را از طریق ارث بری از React.Component می‌سازید، برای نوشتن کد در Constructor باید در ابتدای آن عبارت (Super (props را قرار دهیم.

در غیر این صورت به کلمه کلیدی this و سایر توابع کلاس والد یعنی React.Component دسترسی نداریم. برای دسترسی به State در تابع ()render نیز از عبارت this.state.message استفاده می‌کنیم تا متن موردنظر در خروجی نمایش داده شود.

برای تغییر دادن State در ری اکت نیتیو می توانید از عبارت this.setState استفاده کنید و مقدار جدیدی برای آن تعیین کنید. در کد زیر یک تابع به نام UpdateMessage ایجاد می‌کنیم تا در صورت فراخوانی، متن پیام را تغییر دهد:

class Hello extends React.Component {
   constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

همان طور که می‌بیند درون تابع UpdateMessage متن را تغییر دادیم تا در صورت فراخوانی این تابع، متن جدید نمایش داده شود. اما برای اینکه تابع اجرا شود، باید توسط کلمه this تابع را به Constructor معرفی کنیم (bind).در مرحله بعد یک دکمه درون DOM قرار می‌دهیم تا درصورت کلیک کردن آن، تابع UpdateMessage فراخوانی شود. برای این کار تابع ()render را به شکل زیر تغییر می‌دهیم:

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>Click me!</button>
     </div>   
  )
}

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

<html>
<head>
  <title>Introduction to React library</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/babel">
      class Hello extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            message: 'my friend (from state)!',
          };
          this.updateMessage = this.updateMessage.bind(this);
        }
        updateMessage() {
          this.setState({
            message: 'my friend (from changed state)!',
          });
        }
        render() {
          return (
            <div>
              <h1>Hello {this.state.message}!</h1>
              <button onClick={this.updateMessage}>Click me!</button>
            </div>
          );
        }
      }
      ReactDOM.render(
        <Hello />, 
        document.getElementById("root")
      );
    </script>
</body>
</html>

جمع بندی

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