React Native چیست؟

React Native محبوب ترین فریم ورک برای ساخت اپلیکیشن های موبایلی چند پلتفرمی است. به عبارت دیگر، با استفاده از فریم ورک react native، می توانید اپلیکیشن های بومی موبایل را به طور همزمان برای چندین پلتفرم مختلف (iOS و اندروید) با استفاده از یک زبان برنامه نویسی، جاوا اسکریپت ایجاد کنید. این یک مزیت بزرگ برای چارچوب بومی react است. زیرا باعث صرفه جویی زیادی در زمان و هزینه توسعه دهنده می شود و دیگر نیازی به یادگیری زبان برنامه نویسی مخصوص پلتفرم (جاوا یا کاتلین برای اندروید و سی یا سی پلاس پلاس و سوئیفت برای iOS) برای ساخت اپلیکیشن موبایل برای آن ندارید. در این مقاله آموزشی جامع React Native، مفاهیم اصلی و جنبه های کلیدی این فریم ورک را بررسی می کنیم و مسیری را که برای یادگیری React Native باید طی کنید را به شما نشان خواهیم داد. پس تا پایان مقاله با ما همراه باشید.
واکنش ندر بومی؟
آموزش اصلی React
همانطور که اشاره کردیم، React Native یک چارچوب زبان برنامه نویسی جاوا اسکریپت است که برای توسعه اپلیکیشن های موبایل برای iOS و اندروید استفاده می شود. بنابراین، می‌توانید برنامه‌هایی را با React Native ایجاد کنید که بر روی هر دو سیستم عامل موبایل اندروید و iOS اجرا می‌شوند و تنها با استفاده از یک پایگاه کد جاوا اسکریپت. برنامه های بومی را به برنامه های موبایل واقعی تبدیل کنید، نه فقط برنامه های وب. اولین نسخه React Native به عنوان یک پروژه استارت آپی توسط فیس بوک در مارس 2015 منتشر شد. پس از آن، تنها در چند سال، React Native به یکی از بهترین فریم ورک های مورد استفاده برای توسعه موبایل تبدیل شد. علاوه بر این، صدها کسب و کار بزرگ دیگر در جهان از جمله اوبر، مایکروسافت، اینستاگرام، تسلا، اسکایپ، دیسکورد و غیره با موفقیت از واکنش‌های داخلی برای ساخت برنامه‌های خود استفاده کرده‌اند. برای یادگیری کد نویسی با جاوا اسکریپت می توانید از لیست دوره های آموزشی ویژه آنلاین زیر استفاده کنید:
آموزش جاوا اسکریپت - اینجا را کلیک کنید
مقایسه ReactJS و React Native
هنگام آموزش React Native، باید تفاوت بین React و React Native را بدانید. در پاسخ به این سوال باید گفت که تمام تفاوت های فنی بین آنها ناشی از اهداف استفاده از هر یک است. اما ابتدا، بیایید به تاریخچه ReactJS نگاه کنیم.
جواب چیست؟
React (همچنین ReactJS نامیده می شود) یک کتابخانه جاوا اسکریپت منبع باز است که برای ایجاد رابط های کاربری سریع و قابل اعتماد (UI) برای برنامه های کاربردی وب (در برنامه نویسی front-end) استفاده می شود. کتابخانه React نیز توسط فیسبوک در سال 2013 ایجاد شد. فیس بوک اولین نسخه این کتابخانه را به صورت متن باز در Github منتشر کرده است.
اجرای برنامه درسی محلی
اما فیس بوک هنوز با اپلیکیشن موبایل خود درگیر است. بنابراین باید دو پایگاه کد جداگانه برای سیستم عامل های مختلف تلفن همراه (یعنی یکی برای iOS و دیگری برای اندروید) حفظ کند. از سوی دیگر، ویژگی هایی که او با استفاده از سوئیفت در برنامه iOS خود پیاده سازی کرده بود، باید به طور جداگانه با استفاده از جاوا در برنامه اندروید خود پیاده سازی می شد. این امر منجر به کارهای تکراری و ایجاد برنامه های ناهموار شد. اما با معرفی React Native این مشکل به طور کامل حل شده است.
بنابراین، پس از کتابخانه ReactJS، چارچوب React Native با هدف آسان‌تر ساختن اپلیکیشن‌های موبایل برای فیس‌بوک بود. خیلی ساده است؛ اگر بتوانید یک برنامه جاوا اسکریپت را به یکباره کدنویسی کنید و آن را روی اندروید و iOS اجرا کنید، کار شما راحت تر خواهد شد! نکته اصلی این است که هر دو چارچوب ReactJS و React Native بسیار شبیه هستند، اما هدف کاملا متفاوتی را دنبال می کنند. ReactJS برای توسعه وب و React Native (که از HTML استفاده نمی کند) برای توسعه موبایل استفاده می شود.
تفاوت بین ReactJS و React Native
در قسمت قبل گفتیم که این دو فریمورک با یکدیگر مرتبط هستند اما برای اهداف متفاوتی استفاده می شوند و دانش شما از React برای توسعه اپلیکیشن های موبایل برای iOS و اندروید کافی نخواهد بود. سایر تفاوت های این دو به شرح زیر است:
آموزش React Native
به زبان ساده، React Native از کتابخانه React در ساخت خود استفاده می کند، اما شما نسخه جدیدتری از React را دریافت نمی کنید.
React Native به توسعه دهندگان این امکان را می دهد که از مجموعه ای از اجزای رابط کاربری برای ساخت و راه اندازی سریع برنامه های iOS و Android استفاده کنند.
هم React و هم React Native از جاوا اسکریپت و یک زبان نشانه گذاری ویژه به نام JSX استفاده می کنند. با این حال، نحوی که برای رندر کردن عناصر در اجزای JSX استفاده می شود بین React و React Native متفاوت است. علاوه بر این، React از HTML و CSS استفاده می کند در حالی که React. Native به شما امکان می دهد از عناصر رابط کاربری تلفن همراه استفاده کنید. .
ReactJS از Virtual DOM برای ارائه کد مرورگر استفاده می کند، اما React Native از API های بومی به عنوان پلی برای رندر مولفه ها در دستگاه های تلفن همراه استفاده می کند. برای مثال، React native از Java API برای اجزای اندروید استفاده می‌کند و Objective-C API را برای رندر کردن در iOS فراخوانی می‌کند.
React Native از HTML استفاده نمی کند. بنابراین، اگر قبلاً با ReactJS کار کرده اید، باید با سینتکس React Native نیز آشنا شوید. برای مثال در آموزش React Native به جای

از و به جای

از استفاده می شود.
از آنجایی که React Native از CSS استفاده نمی کند، ویژگی های رایج CSS، مانند انیمیشن ها، با API های React Native ویژه پیاده سازی می شوند.
بومی چگونه پاسخ می دهد؟
در ابتدا اشاره کردیم که React Native از جاوا اسکریپت برای ایجاد رابط برنامه استفاده می کند. در واقع، React Native با استفاده از ترکیبی از جاوا اسکریپت و JXL (یک زبان نشانه گذاری ویژه مشابه XML) نوشته شده است. چارچوب قادر به تعامل با این دو فیلد (یعنی خط کد جاوا اسکریپت و خط کد منبع برنامه) است.
آموزش React Native
تفاوت بین React Native و سایر چارچوب های برنامه نویسی چند پلتفرمی (مانند Cordova، Ionic و PhoneGap) در این است که React Native از نمای وب برای رندر استفاده نمی کند و کد شما را با استفاده از ابزارهای موجود در سیستم عامل تلفن همراه میزبان ارائه می کند. . همچنین دارای دسترسی داخلی به نماها و مؤلفه های بومی است، می تواند از کدهای نوشته شده بومی استفاده کند و به API اجازه دسترسی به عملکردهای خاص سیستم عامل در برنامه ها را می دهد. حال سوال بعدی در آموزش React Native این است که دقیقاً چگونه این اتفاق می افتد؟ قبل از اینکه مفهوم بعدی را یاد بگیرید، بهتر است React Native را در تمرین مقدماتی فرادار بررسی کنید:
آموزش React Native Demo - طراحی نرم افزار اندروید و iOS در React Native - Tobetsa
مفهوم پل برای react native
React Native از مفهوم "پل ها" استفاده می کند که امکان ارتباط ناهمزمان بین جاوا اسکریپت و مؤلفه های بومی را فراهم می کند. اگرچه جاوا اسکریپت و دنباله کد بومی JXL به زبان های کاملاً متفاوتی نوشته شده اند، عملکرد پل می تواند این ارتباط دو طرفه را ممکن کند. این بدان معنی است که اگر قبلاً یک برنامه بومی برای iOS یا Android نوشته اید، همچنان می توانید از کامپوننت ها استفاده کنید یا به طور کامل با React Native توسعه دهید. مفهوم پل زدن در قلب انعطاف پذیری React Native قرار دارد. زیرا Native Elements و JavaScript فناوری های کاملا متفاوتی هستند، اما می توانند با یکدیگر ارتباط برقرار کنند.
آموزش React Native
این نوع معماری با وجود مزایایی که ارائه می دهد، با چالش های قابل توجهی نیز همراه است. به عنوان مثال، استفاده مداوم از پل ها در یک برنامه کاربردی می تواند عملکرد را کاهش دهد. بنابراین اگر می‌خواهید برنامه‌ای بسازید که رویدادها، داده‌های زیادی و غیره داشته باشد، استفاده از چارچوب React Native ممکن است بهترین انتخاب برای شما نباشد.
بهترین زمان برای یادگیری React Native!
بهترین زمان برای شروع یادگیری برنامه نویسی موبایل زمانی است که حداقل یک سال یا بیشتر تجربه برنامه نویسی وب داشته باشید. برنامه نویسی وب نسبتاً آسان است و با صرف زمان کافی برای کدنویسی، مفاهیم برنامه نویسی، شی گرا یا OOP، پایگاه داده ها، سهولت در ایجاد خطا و اشتباه می باشد. شما یاد خواهید گرفت که چگونه مشکلات را حل کنید. علاوه بر این، برخی از فناوری های وب نیز می توانند در برنامه های موبایل یا مفاهیمی مانند JS، OOP، برنامه نویسی عملکردی، CSS، عناصر فرم و غیره استفاده شوند.
آیا یادگیری واکنش طبیعی دشوار است؟
انصافاً، یادگیری برنامه نویسی موبایل کمی دشوارتر از توسعه وب است و به زمان و تمرین بیشتری نیاز دارد. فرقی نمی کند با فریم ورک React Native (که یکی از ساده ترین گزینه هاست) شروع کنید یا هر پلتفرم و فریمورک برنامه نویسی موبایل دیگری. اما هنگامی که درک کاملی از تمام مفاهیم و فناوری های اساسی برنامه درسی react بومی داشته باشید، عاشق برنامه نویسی با آنها خواهید شد. قبل از تشریح این نقشه راه، برای بسیاری از افراد این سوال پیش می آید که آیا یادگیری React js قبل از React Native اجباری است یا خیر؟
پیشنهاد ما این است که قبل از شروع به یادگیری React Native ابتدا ReactJS را یاد بگیرید.البته می توانند برنامه نویسانی باشند که بدون اطلاع قبلی از React شروع به یادگیری React Native کنند و در عرض چند هفته یک اپلیکیشن موبایل موفق بسازند. اما به یاد داشته باشید که همه ما سوابق و تجربیات مختلفی در برنامه نویسی داریم و نمی توانیم خود را با دیگران مقایسه کنیم.
نقشه راه و پیش نیازهای آموزش react native
در این بخش، پیش نیازهایی را که باید قبل از شروع یادگیری React Native بدانید، بررسی خواهیم کرد:
1. ES6 و جاوا اسکریپت پیشرفته
شما باید دانش کافی از موضوعات زیر در استاندارد جدید ES6 در جاوا اسکریپت داشته باشید:
آرایه ها و نحوه استفاده از آنها
اقلام و نحوه استفاده از آنها
گزینه های نقشه، کاهش و فیلتر کردن
اپراتورهای آرامش و انتشار
برنامه اقدام
توابع فلش
تفاوت بین let و const در این است که var
2. Node.js
به درایور اصلی واکنش نشان دهید
Node.js یک بستر یا محیط کدنویسی جاوا اسکریپت است که برای برنامه نویسی باطن استفاده می شود. با این حال، بهتر است یاد بگیرید که با آن کار کنید. زیرا شما از کد node.js در React Native استفاده خواهید کرد. بسیاری از مفاهیم مهم در React Native عبارتند از:
NPM
دستوراتی مانند npm install، npm install (شامل مخزن و توسعه)، npm start و...
وعده‌ها، تماس‌های برگشتی و ناهمگام‌سازی در انتظار هستند
3. ReactJS
همانطور که قبلاً اشاره کردیم، یادگیری React اجباری است، اما توصیه می کنیم ابتدا React را یاد بگیرید و حداقل با این موضوعات آشنا شوید:
کامپوننت ها (اجزای کلاس و اجزای تابع)
ماده کنترل شده
همه ها
متدهای this.props و this.setState را در React تعریف کنید.
تکنیک های چرخه زندگی
توابع دریافت یا Axios در JS برای فراخوانی APIها
برای یادگیری reactjs، می توانید سفر خود را از آموزش در لینک زیر شروع کنید:
آموزش مقدماتی جاوا اسکریپت ReactJS Library - کلیک کنید
4. کتابخانه Redux
کتابخانه Redux برای مدیریت وضعیت جهانی استفاده می شود. از آنجایی که حالت در React در سطح عنصر زندگی می کند، می توانید کنترلرها را به متغیرها از عناصر والد به عناصر فرزند و بالعکس منتقل کنید. با این سناریو، زمانی که برنامه شما رشد می کند و پیچیده می شود، مدیریت آن دشوار و گیج کننده می شود. اینجاست که Redux وارد می شود تا این مشکل را حل کند اما منابع رسمی می گویند که برای استفاده از Redux عجله نکنید، به عنوان مثال گاهی اوقات بهتر است در هنگام ساخت برنامه های کوچک از Redux استفاده نکنید، بنابراین توصیه می کنیم بعد از شما از کتابخانه redux استفاده کنید. با درک اصول اولیه react می توانید redux را با react نیز یاد بگیرید، اما دلیل یادگیری آن با react این است که منابع بیشتری برای یادگیری redux دریافت می کنید.
React Native Guide
5. ماژول Flexbox
Flexbox یکی از ماژول های CSS است که در طراحی UI استفاده می شود و بخش مهمی از برنامه درسی React Native است. یادگیری آن مدتی طول می کشد و در هنگام ساخت اجزای برنامه خود به شما کمک زیادی می کند.
6. پارامترهای مرحله

در این مرحله، از نقطه نظر فنی، نقشه راه آموزش React Native پیشنهادی ما کامل شده است، اما برخی از ابزارهای دیگر را نیز توصیه می‌کنیم که یادگیری آن‌ها اجباری نیست، اما اگر آنها را بشناسید، می‌توانید یک اپلیکیشن موبایل را کارآمدتر بسازید:
مبدل پله پایین
حماسه Redux
کمتر، SASS
قلاب های پیشنهادی
تایپیست
نمونه های اولیه
هر پایگاه داده برای اتصال به برنامه شما (ترجیحاً Firebase)
خلاصه ای از آموزش بومی React
در اینجا چند نکته مهم در مورد React Native وجود دارد:
برنامه‌های React Native به راحتی نوشته می‌شوند، در زمان توسعه‌دهندگان صرفه‌جویی می‌کنند و هزینه‌های مدیران پروژه را کاهش می‌دهند.
برنامه‌های React Native هزینه‌های توسعه و نگهداری برنامه‌ها را کاهش می‌دهند، زیرا نیازی به دو پایگاه کد جداگانه برای iOS و Android ندارید.
از آنجایی که React Native فقط یک بسته برای کامپوننت‌های بومی است، می‌توانید به راحتی کدهای جاوا یا سوئیفت را در هر کجا که در برنامه خود نیاز دارید به آن اضافه کنید.
در React native شما در واقع با جاوا اسکریپت کدنویسی می کنید. بنابراین برای توسعه اپلیکیشن خود نیازی به یادگیری سوئیفت یا جاوا ندارید.
React Native دائما در حال تکامل است و هیچ نشانه ای از توقف به این زودی وجود ندارد.