قیمت این دوره : 200,000 140,000 تومان
  • مدرس دوره : یونس قربانی ( رزومه )
  • تعداد دانشجویان این دوره : 616 نفر
  • تعداد ویدیوها : 55 ویدیو
  • مدت زمان دوره : 13:31:00
  • سطح دوره : متوسط
  • وضعیت دوره : در حال برگزاری
  • تاریخ آخرین بروزرسانی : 1399/08/06
ثبتـــ نام در این دوره
آموزش جامع ReactNative

آموزش جامع ReactNative

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

هر چند که تلاش های زیادی تو این زمینه شد ولی هیچکدوم چنگی به دل نزد تا اینکه فیسبوک در ابتدای سال ۲۰۱۳  اولین نسخه stable از یک کتابخونه جاوا اسکریپت رو بصورت اوپن سورس روی  گیت هاب منتشر کرد.اسم این کتابخونه ReactJs بود که برای توسعه وب اپلیکیشن ها مورد استفاده قرار می گرفت.این کتابخونه سرعت بسیار بالا و سادگی خاصی داشت که باعث شد خیلی سریع مورد توجه قرار بگیره. اواخر مارچ ۲۰۱۵  بود که فیسبوک یک فریمورک جدید به اسم ReactNative منتشر کرد که بهت اجازه میداد فقط با استفاده از جاوا اسکریپت و کتابخونه React  اپلیکیشن موبایل برای ios بسازی. فیسبوک شش ماه بعد گام اصلی و محکم رو با انتشار React Native  برای Android برداشت . توسعه دهنده ها دیگه مجبور به نوشتن کدهای جداگونه برای سیستم عامل های مختلف نبودن و استارتاپ ها و صاحبان کسب کار به توسعه دهنده هایی دسترسی پیدا کردند که برای هر دو سیستم عاملAndroid  و IOS اپلیکیشن طراحی میکردند.

 

خوب اول از همه در مورد React Native  صحبت کنیم که چی هست و چه کارهای برای ما میتونه انجام بده

 

به صورت خیلی ساده اگر بخوام بگم

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

کامپوننتهای درونی زیادی همراه با React Native ارائه نمیشن و میشه گفت مثل ReactJs مینیمال هست و در مقایسه با flutter  که به همراه کلی کامپوننتهای داخلی ارائه میشه  ولی React Native قابلیت انتخاب به شما میده و به خاطر انعطاف پذیری بالا به راحتی میتونید کلی کامپوننتهای آماده اضافه کنید و درکل خیلی انعطاف پذیر هست.

 

یک مثال از اپلیکیشن های ساخته شده با React Native اینستاگرام هست و فکر میکنم تنها همین اپلیکیشن قدرت کامل React Native  رو نشون میده

 

پیشنیازهای دوره :

آشنایی با جاوا اسکریپت Es6

آشنایی با ReactJs هست از جمله کامپوننتهای تابعی ، Stateها ,  Props و Hooks و ... 

 

App های ساخته شده توسط ReactNative واقعا یک اپلیکیشن موبایل هستن چون شما با ReactNative نمیاید WebApp یا HTMLAPP یا ترکیبی از هر 2 بسازید بلکه شما یک App واقعی میسازید که غیر قابل تشخیص هست با Appهای که توسط Objective C و جاوا ساخته شدن

چون ReactNative دقیقا از همون بلاک های UI ایی استفاده میکنه که در IOS و اندروید استفاده میشه و ما در ReactNative با استفاده از React  و جاوا اسکریپت این بلاک هارو برای ساخت کنار هم قرار میدیم .

 

با ReactNative  خیلی سریعتر از اون چیزی که فکر میکنید میتونید App طراحی کنید برای مثال شما در ReactNative بعد هر بار اضافه یا ویرایش نیازی به کامپایل دوباره ندارید بلکه با Hot Reloading بعد هر بار ذخیره به سرعت تغیرات اعمال میشن و این واقعا عالی هست که در کسری از ثانیه تغییراتی که داری انجام میدی رو میبینی و پیش میری بجای اینکه دوباره کامپایل کنی و ببینی دوباره ادامه بدی.

 

 اگه کمی فکر کنید میفهمید که دارید انتخاب درستی رو برای یادگیری ReactNative میگیرید چون که به سرعت در حال پیشرفت هست و اکثر برنامه نویس های موبایل دارن میان این سمت تا ReactNative رو توی رزومه شون داشته باشن و اگه فکرشو بکنید فقط با یک زبان برای همه سیستم عامل های موبایل میتونید App بسازید. این عالی نیست؟

در این دوره چندین پروژه ساخته خواهد شد از جمله اپلیکیشن کارهای روزمره ، ارتباط با سرور ، احراز هویت و ... که در طول دوره در کنار هم خواهیم ساخت

 

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

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

فهرستـــ ویدیوها

مدت زمان دوره 13:31:30
در صورتیکه ویدئو نمایش داده نشد آن را دانلود کنید و با KmPlayer مشاهده کنید.
راهنما ! جهت دریافت لینک دانلود تمامی قسمت ها بر روی این لینک .کلیک کنید.
لطفا در در صورت اقدام به دانلود تا انتها فرایند دانلود ، این صفحه را باز نگاه دارید.
1
  • معرفی دوره

  • 00:08:00
  • رایگانــ

معرفی دوره

2
  • نصب و راه اندازی محیط توسعه React Native

  • 00:47:00
  • رایگانــ

در این قسمت یاد میگیریم که چگونه می تونیم محیط توسعه ری اکت نیتیو رو به ساده ترین شکل ممکن راه اندازی کنیم و اولین پروژه خودمون رو بسازیم.

3
  • کاپوننتهای View ،Text و استایل دهی

  • 00:24:00
  • رایگانــ

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

4
  • نحوه استفاده از State

  • 00:11:00
  • رایگانــ

در این قسمت یاد میگیریم که چگونه از State استفاده کنیم که تنها برای یادآوری قرار داده شده تا نمایش بدیم که هیچ تفاوتی با State ها در ReactJs ندارن.

5
  • تبدیل کامپوننتهای تابعی به نوع کلاسی

  • 00:05:00
  • رایگانــ

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

6
  • کامپوننت TextInput

  • 00:22:00
  • نقدیــ

در این قسمت با نحوه استفاده از کامپوننت TextInput  آشنا میشیم به همراه مثال که وقتی کاربر موارد خواسته شده رو وارد کرد با استفاده از رویداد onChangeText به صورت همزمان بتونیم در کامپوننت Text به نمایش بزاریم و همچنین با پراپ هایی که زیاد مورد استفاده قرار داده میشن از جمله multiline برای نوشتن چندین خط در TextInput و placeholder و keyboardType که آیا تنها اعداد را در صفحه کلید نمایش بدیم یا حروف نیز آشنا خواهیم شد.

7
  • کامپوننت ScrollView

  • 00:16:00
  • نقدیــ

در این قسمت یاد میگیریم که چگونه می تونیم لیستی از داده ها را حلقه زده و به نمایش بزاریم و اگر داده ها بیشتر از میزان اندازه صفحه نمایش بود با استفاده از کامپوننت ScrollView قابلیت اسکرول کردن به کاربر میدیم که بتونه با بالا یا پائین کشیدن تمامی داده ها رو مشاهده کنه.

8
  • کامپوننت FlatList

  • 00:14:00
  • نقدیــ

در این قسمت یاد میگیریم که چگونه می تونیم لیستی از داده ها را حلقه زده و به نمایش بزاریم توسط کامپوننت FlatList که نسبت به ScrollView مزایای بهتر و عملکرد بهتری را دارا می باشد.

9
  • کامپوننت Touchable

  • 00:13:00
  • نقدیــ

در این قسمت یاد میگیریم که چگونه می توانیم قابلیت اضافه کردن رویداد لمس را به المنت های رندر شده توسط کامپوننت Touchable اضافه کنیم.

10
  • ساخت اپلیکیشن مدیریت کننده اشخاص بخش اول

  • 00:33:00
  • نقدیــ

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

11
  • ساخت اپلیکیشن مدیریت کننده اشخاص بخش دوم

  • 00:24:00
  • نقدیــ

در این قسمت با مباحثی که تا الان آموزش داده شده شروع به ساخت اپلیکیشنی برای مدیریت اشخاص می کنیم تا مباحث آموزش داده شده را در عمل استفاده کنیم و با کامپوننتهای Alert و TouchableWithoutFeedback نیز آشنا خواهیم شد.

12
  • Flexbox

  • 00:19:00
  • نقدیــ

در این قسمت با Flexbox آشنا خواهیم شد که به چه صورت با استفاده از Flex المنتهای رندر شده را در مکانهای مورد نظر قرار دهیم.

13
  • استفاده از آیکون ها

  • 00:17:28
  • نقدیــ

در این قسمت به نحوه استفاده و اضافه کردن آیکون ها از فونت های متفاوت موجود که توسط Expo به راحتی در اختیار ما قرار داده شده خواهیم پرداخت.

14
  • استفاده از فونت سفارشی

  • 00:17:00
  • نقدیــ

در این قسمت به نحوه اضافه کردن فونت های سفارشی در پروژه خواهیم پرداخت.

15
  • استایل گلوبال

  • 00:05:30
  • نقدیــ

در چندین قسمت گذشته با هم آموختیم که می توانیم در هر کامپوننت استایل های مربوطه را بنویسیم یا استایل دهی کنیم. مشکلی که در آینده یا پروژه های بزرگ پیش خواهد آمد تکه تکه بودن استایل ها خواهد بود که در این قسمت به نحوه ایجاد استایلهای گلوبال می پردازیم تا تمامیه استایلهای مورد نیاز پروژه را در یک مکان داشته باشیم.

16
  • کامپوننت SectionList

  • 00:12:00
  • نقدیــ

کامپوننت SectionList نیز همانند کامپوننتهای FlatList و ScrollView برای به نمایش گذاشتن لیستی از داده ها مورد استفاده قرار داده میشود تنها تفاوت قابلیت نمایش بخش ها و سفارشی سازی آنها می باشد که در این جلسه خواهیم آموخت.

17
  • کامپوننت Image

  • 00:08:00
  • نقدیــ

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

18
  • دیباگ اپلیکیشن توسط Chrome DevTools

  • 00:14:30
  • نقدیــ

مهمترین مهارتی که هر برنامه نویس باید داشته باشد مهارت خطایابی یا همون دیباگ کردن هست، که در این قسمت باهم نحوه دیباگ کردن اپلیکیشن توسط Developer Tools مرورگر معروف Google Chrome را خواهیم آموخت.

19
  • دیباگ اپلیکیشن توسط VSCode

  • 00:13:30
  • نقدیــ

مهمترین مهارتی که هر برنامه نویس باید داشته باشد مهارت خطایابی یا همون دیباگ کردن هست، که در این قسمت باهم نحوه دیباگ کردن اپلیکیشن توسط Visual Studio Code را خواهیم آموخت.

20
  • پابلیش اپلیکیشن در Expo

  • 00:08:30
  • نقدیــ

در این قسمت با نحوه پابلیش اپلیکیشن ساخته شده در Expo آشنا خواهیم شد تا بتوانیم اپلیکیشن در دست ساخت خود را به دیگر دوستان و هم تیمی ها خود جهت تست ارسال کنیم.

21
  • مجازی ساز اندروید Nox Player

  • 00:07:30
  • نقدیــ

در این قسمت با مجازی ساز اندروید Nox Player جهت استفاده به عنوان محیط توسعه اپلیکیشن های React Native آشنا میشویم.

22
  • React Navigation

  • 00:06:00
  • نقدیــ

در این قسمت با React Navigation آشنا میشویم.

23
  • Stack Navigator

  • 00:09:30
  • نقدیــ

در این قسمت با Stack Navigator ،که یک مدل جهت یابی درReact Navigation است، آشنا میشویم.

24
  • Navigation Props

  • 00:15:30
  • نقدیــ

در این قسمت با پراپ هایی که React Navigation در دسترس ما قرار میدهد آشنا میشویم که به چه صورت می توانیم صفحات را در Stack Navigator مدیریت کنیم.

25
  • ارسال داده بین صفحات

  • 00:10:00
  • نقدیــ

در این قسمت با نحوه ارسال داده بین صفحات آشنا خواهیم شد

26
  • پیکربندی Header Bar

  • 00:09:00
  • نقدیــ

در این قسمت با پیکربندی هدری که Stack Navigator در اختیار ما قرار داده آشنا خواهیم شد که به چه صورت می توانیم استایل دهی کنیم.

27
  • Header Buttons

  • 00:11:00
  • نقدیــ

در این قسمت با قرار دادن کامپوننتهای سفارشی در هدر، تغییر عنوان صفحه با استفاده از رویدادها و اضافه کردن دکمه به هدر بار آشنا خواهیم شد.

28
  • Drawer Navigation

  • 00:24:00
  • نقدیــ

در این قسمت با Drawer Navigation آشنا خواهیم شد.

29
  • Tab Navigation

  • 00:17:09
  • نقدیــ

در این قسمت با Bottom Tab Navigation آشنا می شویم.

30
  • Nesting Navigators

  • 00:12:00
  • نقدیــ

یکی از سخترین موارد یادگیری Navigation در React Native بحث تو در تو نوشتن Navigatorها می باشد که در این جلسه به صورت خیلی ساده توسط ورژن جدید react-navigation آموزش داده شده.

31
  • چرخه حیات Navigation

  • 00:18:22
  • نقدیــ

همانطوری که باید با چرخه حیات کامپوننتها در ری اکت آشنا باشید، ما همان چرخه حیات را هم در React Native داریم و قابل استفاده هست. تنها یا یک تفاوت که صفحات رندر شده یا Mount شده در React Native دیگر قابلیت Unmount شدن را ندارند و اگر بخواهیم کارکردی پیاده سازی کنیم که برخی کدهای نوشته شده تنها زمانی که کاربر وارد این صفحه شد اجرا شوند می توانیم از componentDidMount بهر ببریم اما زمانی که کاربر قصد خارج شدن را از صفحه داشت باید از قابلیتهایی که react navigation در دسترس ما قرار داده بهره ببریم که در این قسمت باهم خواهیم آموخت.

32
  • Fullscreen Modal

  • 00:06:00
  • نقدیــ

در برخی شرایط نیازمنده استفاده از Modal یا صفحاتی که تنها برای یک کار کوچک مثل popup مورد استفاده قرار میگیرند داریم که میتوانیم از قابلیتی که React navigation در اختیار ما قرار داده است استفاده کنیم به نام fullscreen modal.

33
  • کامپوننت Statusbar و ماژول Platform

  • 00:16:07
  • نقدیــ

در این قسمت با رسپانسیو کردن UI طراحی شده به روش صحیح با استفاده از کامپوننت Statusbar وماژول Platform آشنا خواهیم شد.

34
  • Dimensions

  • 00:20:48
  • نقدیــ

در این قسمت در مورد ابعاد صفحه نمایش صحبت خواهیم کرد تا با استفاده از Dimensions که React Native در اختیار ما قرار داده بتونیم بسته به اندازه صفحه نمایش گوشی کاربر UI خودمون رو رسپانسیو کنیم و کنترل این رو داشته باشیم که اگر صفحه عمودی بود به چه صورت نمایش داده بشه در غیر این صورت اگر افقی بود به چه صورت

35
  • کپسوله سازی استایلها

  • 00:10:15
  • نقدیــ

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

36
  • نوشتن کدهای مختص هر پلتفرم

  • 00:13:28
  • نقدیــ

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

37
  • ExpoConstants

  • 00:06:58
  • نقدیــ

در این قسمت در مورد ExpoConstants صحبت خواهیم کرد.

38
  • آماده سازی پروژه تاپلرن

  • 00:18:29
  • نقدیــ

در این قسمت به آماده سازی محیط کاری برای شروع پروژه تاپلرن خواهیم پرداخت

39
  • ساخت Welcome Screen

  • 00:24:33
  • نقدیــ

در این قسمت با نحوه ساخت واکنشگرای صفحه خوش آمدید اپلیکیشن تاپلرن آشنا خواهیم شد

40
  • ساخت صفحه ورود بخش اول

  • 00:24:48
  • نقدیــ

در این قسمت صفحه ورود کاربران را خواهیم ساخت.

41
  • ساخت صفحه ورود بخش دوم

  • 00:14:37
  • نقدیــ

در این قسمت صفحه ورود کاربران را خواهیم ساخت.

42
  • کتابخانه Formik

  • 00:16:13
  • نقدیــ

در این قسمت با کتابخانه معروف Formik که برای ساخت فرم ها در React و React Native مورد استفاده قرار می گیرد آشنا خواهیم شد.

43
  • اعتبار سنجی فرم توسط Yup

  • 00:21:09
  • نقدیــ

در این قسمت با ابزاری عالی با نام Yup که برای اعتبار سنجی فرم ها در دنبای جاوااسکریپت مورد استفاده قرار میگیرد آشنا خواهیم شد.

44
  • نمایش خطا در فرم

  • 00:10:08
  • نقدیــ

در این قسمت با نمایش صحیح خطا در فرم ها توسط قابلیت Formik آشنا خواهیم شد.

45
  • ساخت TextInput سفارشی

  • 00:16:08
  • نقدیــ

در این قسمت شروع به ساخت یک کامپوننت TextInput سفارشی خواهیم کرد تا تمامیه استایلهایی که نیاز داریم را داشته باشد تا بتوانیم یکبار نوشته و در همه جا ازش بهره ببریم.

46
  • ساخت صفحه ثبت نام

  • 00:11:47
  • نقدیــ

در این قسمت به ساخت صفحه ثبت نام کاربر خواهیم پرداخت.

47
  • تایید تکرار کلمه عبور توسط Yup

  • 00:09:15
  • نقدیــ

در این قسمت با نحوه تایید تکرار کلمه عبور با استفاده از ابزار پرطرفدار Yup آشنا خواهیم شد.

48
  • کامپوننت ToplearnFormField

  • 00:13:46
  • نقدیــ

در این قسمت به Refactor کردن کدهای صفحات ثبت نام و ورود خواهیم پرداخت با ساخت یک کامپوننت جدید به نام ToplearnFormField

49
  • کامپوننت Toplearn Form

  • 00:10:38
  • نقدیــ

در این قسمت به Refactor کردن Formik با ساخت یک کامپوننت جدید به نام ToplearnForm خواهیم پرداخت.

50
  • کامپوننت Submit Button

  • 00:12:15
  • نقدیــ

در این قسمت به Refactor کردن دکمه سفارشی ساخته شده در فرم ها خواهیم پرداخت و همچنین با یک هک خیلی عالی برای جلوگیری از import های زیاد آشنا خواهیم شد.

51
  • کامپوننت Screen

  • 00:12:38
  • نقدیــ

در این قسمت با هم خواهیم آموخت چطور با ساخت یک کامپوننت به نام Screen می توانیم از نوشتن کدهای تکراری جلوگیری کنیم

52
  • ساخت Bottom Tab Navigator

  • 00:13:29
  • نقدیــ

در این قسمت با استفاده از Bottom Tab Navigator به ساخت صفحه اصلی خواهیم پرداخت.

53
  • پیکربندی Bottom Tabs بخش اول

  • 00:12:35
  • نقدیــ

در این قسمت به پیکربندی و Refactor کردن Bottom Tabs خواهیم پرداخت.

54
  • پیکربندی Bottom Tabs بخش دوم

  • 00:13:40
  • نقدیــ

در این قسمت به پیکربندی و Refactor کردن Bottom Tabs خواهیم پرداخت

55
  • Refactor کردن Stack Navigator و فونت ها

  • 00:09:17
  • نقدیــ

در این قسمت همانطور که Tab Navigator رو Refactor کردیم Stack Navigator را هم به همان صورت در یک فایل جدا قرار داده و نه تنها Stack Navigator بلکه توابع فونت ها را نیز در فایل جدا قرار خواهیم داد.

نظرات کاربران در رابطه با این دوره

جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .