چرا آموزش react native را شروع کنیم؟ react native یکی از قدیمی‌ترین فریمورک‌های برنامه نویسی زبان جاوا اسکریپت می‌باشد. کاربردهای اولیه جاوا اسکریپت به علت ساده بودن این زبان و سبک بودن آن به استفاده در مرورگرها محدود می‌شد. پس از ارائه اکما اسکریپت 6 که نسخه‌ای از جاوا اسکریپت بود که در آن اصول شی گرایی نیز مطرح و استفاده شده بود این زبان محبوبیت بیشتری پیدا کرد و در دهه جدید به دنبال رشد سریع زبان‌های برنامه نویسی، جاوا اسکریپت نیز مورد توجه توسعه دهندگان زیادی قرار گرفت و به همین دلیل فریم ورک های زیادی برای این زبان نوشته شدند.

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

در دوره آموزش react native چه می آموزید؟

  • با مفاهیم ابتدایی es6 آشنا میشوید
  • با اصول کد نویسی React Native آشنا می شوید
  • تمام کامپوننت های React Native را بطور کامل بررسی و با مثال از آن ها استفاده خواهیم کرد
  • کامپوننت سفارشی خودمان را خواهیم ساخت
  • با سیستم Props در ری اکت آشنا می شوید
  • مفاهیم States و Events در React را یاد می گیرید
  • با مفهوم چرخه زندگی در React آشنا می شوید
  • انیمیشن در React Native را بطور کامل بررسی خواهیم کرد
  • طراحی چندین صفحه و جابه جایی بین آن ها
  • ارسال و دریافت پارامتر در صفحات
  • ساخت Tab سفارشی
  • ساخت Drawer سفارشی
  • دریافت اطلاعات از سرور و نمایش آنها
  • ساخت اشکال ۲ بعدی
  • فعال کردن ویبره گوشی
  • استفاده از فونت فارسی و انگلیسی
  • دسترسی به دوربین گوشی
  • تغییر آیکون اپلیکیشن اندروید و ios
  • خروجی گرفتن از اپ اندروید و ios

این دوره برای چه کسانی مناسب است ؟

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

نرم افزارهای مورد استفاده

  • chocolatey 11.0
  • jdk 8
  • node 14.17.6
  • 2021.06.07.00 watchman
  • android studio 4.2
  • Xcode 12.4
  • React Native 0.65

سرفصل های دوره آموزش react native دانشجویار

فصل اول: در این فصل از آموزش ری اکت نیتیو نصب React Native در ویندوز و مک را حواهیم داشت:

  • قسمت اول: مقدمه
  • قسمت دوم: نصب React Native در windows
  • قسمت سوم: نصب React Native در mac
  • قسمت چهارم: ساختار پوشه ها در react native

فصل دوم : در این فصل مفاهیم پایه es6 را با چند مثال بررسی خواهیم کرد:

  • قسمت پنجم: متغییر ها
  • قسمت ششم: آرایه ها
  • قسمت هفتم: شروط if , else و try , catch
  • قسمت هشتم: حلقه for

فصل سوم : در این فصل از آموزش react native یاد میگیریم چطور یک کامپوننت بسازیم . تمام کامپونتت های React Native و state و props ها و استایل flex را را بطور کامل همراه با مثال بررسی خواهیم کرد.

  • قسمت نهم: ساخت کامپوننت جدید
  • قسمت دهم: کامپوننت text
  • قسمت یازدهم: کامپوننت view
  • قسمت دوازدهم: کار با props
  • قسمت سیزدهم: کار با useState و ساخت state و استفاده از آن
  • قسمت چهاردهم: کار با styleSheet
  • قسمت پانزدهم: آشنایی با (FlexBox 1 = (flex, flexDirection, justifyContent, AlignItem
  • قسمت شانزدهم: آشنایی با (FlexBox 2 = (flexWarp, AlignSelf, AlignContent, Layout position
  • قسمت هفدهم: کامپوننت image
  • قسمت هجدهم: کامپوننت ImageBackground
  • قسمت نوزدهم: کامپوننت textInput
  • قسمت بیستم: کامپوننت KeyboardAvoidingView
  • قسمت بیست و یکم: کامپوننت scrollView
  • قسمت بیست و دوم: کامپوننت FlatList
  • قسمت بیست و سوم: کامپوننت SectionList
  • قسمت بیست و چهارم: کامپوننت switch
  • قسمت بیست و پنجم: کامپوننت ActivityIndicator
  • قسمت بیست و ششم: کامپوننت Alert
  • قسمت بیست و هفتم: استفاده از Dimention
  • قسمت بیست و هشتم: استفاده از Linking
  • قسمت بیست و نهم: کامپوننت Modal
  • قسمت سی‌ام: استفاده از Platform
  • قسمت سی و یکم: کامپوننت Button
  • قسمت سی و دوم: کامپوننت Pressable
  • قسمت سی و سوم: کامپوننت TouchableHighlight
  • قسمت سی و چهارم: کامپوننت TouchableOpacity
  • قسمت سی و پنجم: کامپوننت TouchableWithoutFeedback
  • قسمت سی و ششم: کامپوننت RefreshControl
  • قسمت سی و هفتم: کار با BackHandlerAndroid
  • قسمت سی و هشتم: کامپوننت DrawerLayoutAndroid
  • قسمت سی و نهم: کار با PermissionsAndroid
  • قسمت چهلم: کار با ToastAndroid
  • قسمت چهل و یکم: کار با ActionSheetIOS
  • قسمت چهل و دوم: کامپوننت InputAccessoryView

فصل چهارم : در این فصل از آموزش react native یاد میگیریم چطور برای محتوای صفحه اپلیکیشنمان انیمیشن بسازیم . تمامی راه های پیشنهادی React Native برای ساخت اپلیکیشن در این فصل قرار دارد.

  • قسمت چهل و سوم: کار با LayoutAnimation
  • قسمت چهل و چهارم: Animated.timing
  • قسمت چهل و پنجم: Animated.decay
  • قسمت چهل و ششم: Animated.spring
  • قسمت چهل و هفتم: Animated.sequence
  • قسمت چهل و هشتم: نصب کتابخانه react-native-animatable

فصل پنجم : در این فصل آموزش ریکت نیتیو دانشجویار کتابخانه React navigation 6 را نصب و از stack , tab , drawer استفاده خواهیم کرد.

  • قسمت چهل و نهم: نصب کتابخانه react navigation 6
  • قسمت پنجاهم: جابجایی بین صفحات
  • قسمت پنجاه و یکم: ارسال و دریافت پارامتر در صفحات
  • قسمت پنجاه و دوم: انیمیشن زمان جابه جایی بین صفحات
  • قسمت پنجاه و سوم: ایجاد drawer
  • قسمت پنجاه و چهارم: سفارشی سازی drawer
  • قسمت پنجاه و پنجم: ایجاد Tab Navigator
  • قسمت پنجاه و ششم: سفارشی سازی Tab Navigator

فصل ششم : در این فصل از آموزش react native دانشجویار راه های اتصال به api بررسی میکنیم.

  • قسمت پنجاه و هفتم: استفاده از fetch
  • قسمت پنجاه و هشتم: نصب کتابخانه axios
  • قسمت پنجاه و نهم: کار با useeffect
  • قسمت شصتم: درخواست axios.get  به api
  • قسمت شصت و یکم: درخواست axios.post  به api

فصل هفتم : در این فصل مثال هایی رو بررسی میکنیم که ممکنه در طول انجام پروژه React Native بدردتون بخوره.

  • قسمت شصت و دوم: استفاده از استایل های دو بعدی Transforms
  • قسمت شصت و سوم: فعال کردن ویبره گوشی با استفاده از react native Vibration
  • قسمت شصت و چهارم: اشتراک گذاری داده ها با استفاده از react native Share
  • قسمت شصت و پنجم: استفاده از فونت‌های فارسی
  • قسمت شصت و ششم: ذخیره داده ها با استفاده از AsyncStorage
  • قسمت شصت و هفتم: بررسی وضعیت اینترنت گوشی با استفاده از کتابخانه react-native-netinfo
  • قسمت شصت و هشتم: دیت پیکر شمسی با استفاده از کتابخانه react-native-jalali-datepicker
  • قسمت شصت و نهم: اینترو اسلایدر با استفاده از کتابخانه react-native-app-intro-slider
  • قسمت هفتادم: بررسی اطلاعات گوشی با استفاده از کتابخانه react-native-device-info
  • قسمت هفتاد و یکم: دسترسی به دوربین با استفاده از کتابخانه react-native-camera

فصل هشتم : در این فصل از آموزش ری اکت نیتیو مراحل خروجی گرفتن برای اپلیکیشن android و ios بررسی میکنیم.

  • قسمت هفتاد و دوم: تغییر ایکون برای اندروید و ios
  • قسمت هفتاد و سوم: خروجی گرفتن android با فرمت apkوaab
  • قسمت هفتاد و چهارم خروجی گرفتن ios با فرمت ipa

مزیت react native

نسبت به زامارین و بقیه فریم ورک ها شبیه بودن برنامه نوشته شده به برنامه Native است که باعث می‌شود به عنوان مثال عملکرد برنامه‌ای که با این فریم ورک برای اندروید نوشته شده با برنامه‌ای که به زبان جاوا برای اندروید نوشته شده تفاوتی نداشته باشد.