react native چیست 

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

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

آموزش React Native و آموزش ساخت اپلیکیشن اینستاگرام با React

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

نکته
با خرید دوره آموزش react native ، گواهی معتبر شرکت در دوره با مهر آموزشگاه فنی حرفه ای دریافت خواهید کرد .

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

مزیت react native

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

نمونه تصاویری از پروژه طراحی شده در این آموزش:

آموزش React Native

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

 

آموزش React Native و طراحی اپلیکیشن اینستاگرام فارسی

آموزش React Native و طراحی اپلیکیشن اینستاگرام فارسی

 آموزش ساخت اپلیکیشن اینستاگرام فارسی

آموزش React Native و آموزش ساخت اپلیکیشن اینستاگرام فارسی

 آموزش ساخت اپلیکیشن اینستاگرام فارسی

آنچه در آموزش react native خواهید آموخت:

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

  • قسمت اول: معرفی دوره و سر فصل‌های دوره
  • قسمت دوم: نصب اندروید استودیو
  • قسمت سوم: نصب جنی موشن
  • قسمت چهارم: آشنایی و نصب nodejs
  • قسمت پنجم: نصب سیستم عامل مک به صورت مجازی
  • قسمت ششم: ساخت یک پروژه React Native
  • قسمت هفتم: آشنایی با ساختار پروژه
  • قسمت هشتم: ساخت اولین پروژه در سیستم عامل مک
  • قسمت نهم: معرفی ساختار تگ‌ها و استایل ها
  • قسمت دهم: نحوه استاندارد استایل دهی
  • قسمت یازدهم: استفاده از فونت فارسی در برنامه
  • قسمت دوازدهم: معرفی چند تگ کاربردی
  • قسمت سیزدهم: ادامه معرفی تگ‌ها
  • قسمت چهاردهم: ادامه معرفی تگ‌ها و استایل ها
  • قسمت پانزدهم: ادامه معرفی تگ‌های پر کاربرد
  • قسمت شانزدهم: نحوه قالب بندی صفحه با flex ها
  • قسمت هفدهم: نحوه تنظیمتم و تنظیمات در visual studio code
  • قسمت هجدهم: معرفی شورت کدهای vscode برای برنامه نویسی سریع‌تر React native
  • قسمت نوزدهم: مروری بر جاوا اسکریپت – متغیرها
  • قسمت بیستم: مروری بر جاوا اسکریپت – حلقه‌ها و شرط‌ها
  • قسمت بیست و یکم: مروری بر جاوا اسکریپت – توابع
  • قسمت بیست و دوم: موری بر جاوا اسکریپت – map ها
  • قسمت بیست و سوم: مروری بر اکما اسکریپت – کلاس‌ها
  • قسمت بیست و چهارم: مروری بر جاوا اسکریپت – مباحث باقی مانده
  • قسمت بیست و پنجم: مروری بر جاوا اسکریپت – نحوه اجرای کدها
  • قسمت بیست و ششم: مروری بر اکما اسکریپت – ماژول‌ها
  • قسمت بیست و هفتم: درک ساختار یک پروژه react Native
  • قسمت بیست و هشتم: ادامه درک ساختار پروژه با مفاهیم گفته شده
  • قسمت بیست و نهم: معرفی و درک کامپوننت ها
  • قسمت سی‌ام: معرفی prop ها
  • قسمت سی و یکم: معرفی رویدادها
  • قسمت و سی و دوم: نجوه دیباگ کردن پروژه در گوگل کروم
  • قسمت سی و سوم: معرفی state ها
  • قسمت سی و چهارم: مثال کاربردی با state ها
  • قسمت سی و پنجم: چند استایلی در React Native
  • قسمت سی و ششم: جابجایی بین صفحات در react native
  • قسمت سی و هفتم: حل یک ارور در صورت کار نکردن دستورات ساخت پروژه

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

  • قسمت اول : معرفی دوره دوم
  • قسمت دوم : مشکلات نسخه جدید فریمورک
  • قسمت سوم : چگونگی نشان دادن خطای ورودی کاربر با state ها
  • قسمت چهارم معرفی touchable ها
  • قسمت پنجم :ساخت کامپوننت پیشرفته button
  • قسمت ششم : معرفی native base
  •  قسمت هفتم : کار با برخی از کامپوننت های native base
  • قسمت هشتم: ادامه کار با برخی از کامپوننت های native base
  • قسمت نهم : معرفی یک کامپوننت تکست اینپوت پیشرفته
  • قسمت دهم :ساخت قالب یک برنامه با native base
  •  قسمت یازدهم :  ساخت پروژه اینستاگرام فارسی و تنظیمات اولیه پروژه
  • قسمت دوازدهم : معرفی مسیر های داخل پروژه
  •  قسمت سیزدهم : ساخت صفحه ورود
  • قسمت چهاردهم :ساخت فوتر تب در صفحه ورود
  •  قسمت پانزدهم :ساخت صفحه ثبت نام و قفل پروفایل
  • قسمت شانزدهم :ساخت صفحه فراموشی رمز عبور
  •  قسمت هفدهم :کنترل ورودی های کاربر و نشان دادن خطاها
  • قسمت هجدهم:  تست برنامه بر روی سیستم عامل مک و شبیه ساز آیفون

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

  • قسمت اول: معرفی عبارات با قاعده
  • قسمت دوم: استفاده از عبارات با قاعده در پروژه اینستاگرام فارسی
  • قسمت سوم: ساخت صفحه اسپلش اسکرین (سه قسمت می‌باشد)
  • قسمت چهارم استفاده از لینیر گرادینت در رنگ دهی
  • قسمت پنجم: معرفی کامپوننت اسلایدر تصاویر
  • قسمت ششم: معرفی دو روش ساخت تب‌های پایین صفحه
  •  قسمت هفتم: ادامه معرفی دو روش ساخت تب‌های پاین صفحه
  • قسمت هشتم: ساخت تب‌های پایین صفحه در پروژه اینستاگرام فارسی
  • قسمت نهم: معرفی لیست‌ها
  • قسمت دهم: معرفی فلت لیست‌ها
  •  قسمت یازدهم: ساخت قالب یک پست در پروژه اینستاگرام فارسی
  • قسمت دوازدهم: ساخت لیستی از پست‌ها در پروژه ایسنتاگرام فارسی با استفاده از فلت لیست‌ها

در بخش چهارم صفحات مختلف اپلیکیشن مثل صفحه لایک، نظرات و چت را به‌طور کامل طراحی و چند کامپوننت برای این کار معرفی کردیم.

  • قسمت اول: حل مشکلات موجود در پروژه
  • قسمت دوم: ساخت صفحه لایک ها
  • قسمت سوم: ساخت صفحه نظرات
  • قسمت چهارم: ساخت قسمت استوری ها
  • قسمت پنجم: کنترل جابجایی بین صفحات در تب اصلی برنامه
  • قسمت ششم: اصولی کردن ساختار پروژه
  •  قسمت هفتم: استفاده از badge ها
  • قسمت هشتم: ساخت صفحه دایرکت ها
  • قسمت نهم: مفاهیم ساخت یک صفحه چت
  • قسمت دهم: معرفی یک کامپوننت ساخت صفحه چت
  •  قسمت یازدهم: ساخت یک کامپوننت جابجایی بین صفحات پیشرفته
  • قسمت دوازدهم: استفاده از کامپوننت معرفی شده در جلسه قبل در پروژه اینستاگرام فارسی
  •  قسمت سیزدهم: ساخت و کنترل اضافه کردن نظر در پست‌ها
  • قسمت چهاردهم: ساخت یک صفحه چت پیشرفته شخصی در برنامه-۱
  •  قسمت پانزدهم: ساخت یک صفحه چت پیشرفته شخصی در برنامه-۲
  • قسمت شانزدهم: ادامه ساخت صفحه چت پیشرفته
  • قسمت هفدهم:کامل کردن صفحه چت پیشرفته

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

  • قسمت اول: حل بعضی از مشکلات پروژه
  • قسمت دوم: حذف تب‌های پایین صفحه در بعضی از صفحات
  • قسمت سوم: معرفی کامپوننت فلیت لیست راست به چپ
  • قسمت چهارم: کنترل دیده شدن یا نشدن استوری ها
  • قسمت پنجم: ساخت صفحه نمایش استوری
  • قسمت ششم: استفاده از اسلایدر در نمایش استوری
  •  قسمت هفتم: ساخت اسلاید پیشرفته شخصی
  • قسمت هشتم: کامل کردن صفحه نمایش استوری
  • قسمت نهم: اضافه کردن مشخصات کاربر در نمایش استوری
  • قسمت دهم: قسمت ارسال پیام در صفحه نمایش استوری
  •  قسمت یازدهم: کامل کردن صفحه نمایش استوری
  • قسمت دوازدهم: ساخت قسمت بالای صفحه پروفایل
  •  قسمت سیزدهم: ساخت تب‌های صفحه پروفایل
  • قسمت چهاردهم: نمایش پست‌ها به صورت گرید بندی در صفحه پروفایل
  •  قسمت پانزدهم: معرفی modal ها و کامپوننت های پیشرفته در این زمینه
  • قسمت شانزدهم: نمایش پست به صورت مدال
  •  قسمت هفدهم: شروع ساخت صفحه تنظیمات
  • قسمت هجدهم: ساخت صفحه تنظیمات
  • قسمت نوزدهم: معرفی alert ها و ساخت یک alert فارسی پیشرفته
  • قسمت بیستم: کامل کردن alert پیشرفته ساخته شده
  • قسمت بیست و یکم: شروع ساخت صفحه ویرایش پروفایل
  • قسمت بیست و دوم: ادامه ساخت صفحه ویرایش پروفایل
  •  قسمت بیست و سوم: کامل کردن صفحه ویرایش پروفایل
  • قسمت بیست و چهارم: ساخت صفحه جستجو
  •  قسمت بیست و پنجم: کنترل فالو کردن و آنفالو کردن کاربران
  • قسمت بیست و ششم: رفتن به صفحه پروفایل کاربران با کلیک بر روی عکس و نام آن‌ها
  • قسمت بیست و هفتم: تب بندی صفحه فعالیت‌ها
  • قسمت بیست و هشتم: کامل کردن تب بندی
  • قسمت بیست و نهم: کامل کردن صفحه فعالیت‌ها شما
  • قسمت سی‌ام: کامل کردن صفحه فعالیت‌های دیگران
  • قسمت سی و یکم: کنترل خروج کاربر از برنامه
  • قسمت سی و دوم: معرفی استایل شیت توسعه یافته
  • قسمت سی و سوم: تست پروژه بر روی سیستم عامل مک و شبیه ساز آیفون

در بخش ششم آموزش react native به معرفی Lumen و نحوه استفاده از آن،معرفی مفهوم apiها و پرداختیم.

  • قسمت اول : معرفی مفهوم apiها
  • قسمت دوم : معرفی lumen
  • قسمت سوم :ساخت یک پروژه lumen
  • قسمت چهارم :چگونگی استفاده از lumen به صورت ساده
  • قسمت پنجم :تحلیل پایگاه داده برنامه
  • قسمت ششم :ساخت پایگاه داده برنامه
  • قسمت هفتم : کامل کردن پایگاه داده برنامه و روابط بین جداول
  • قسمت هشتم: ساخت کنترلرهای مورد نیاز
  • قسمت نهم : پرکردن جداول
  • قسمت دهم :استفاده از bostman برای تست کد ها
  • قسمت یازدهم :ساخت apiهای مربوط به ورود کاربران
  • قسمت دوازدهم :ساخت Api مربوط به ثبت نام کاربران
  • قسمت سیزدهم : ساخت api مربوط به صفحه جستجوها
  • قسمت چهاردهم :ساخت api مربوط به صفحه فعالیت ها
  • قسمت پانزدهم : تکمیل جلسه قبل
  • قسمت شانزدهم :ساخت api مربوط به استوری ها
  • قسمت هفدهم :ساخت api های مربوط به گرفتن لایک ها
  • قسمت هجدهم: ساخت api های مربوط به گرفتن نظرات
  • قسمت نوزدهم : ساخت api های مربوط به کنترل لایک کردن و آنلایک کردن
  • قسمت بیستم : ساخت api مربوط به نمایش استوری
  • قسمت بیست و یکم : ساخت api های مربوط به ویرایش پروفایل
  • قسمت بیست و دوم : کامل کردن جلسات قبل

در بخش هفتم خروجی APIها، صفحه ورود و ثبت‌نام و پروفایل و بسیاری موارد دیگر کامل کردیم.

  • قسمت اول: معرفی کتابخانه ارتباط با سرور
  • قسمت دوم: کامل کردن خروجی‌های APIها
  • قسمت سوم: اصولی کردن خروجی‌های APIها مناسب برنامه
  • قسمت چهارم: ادامه مبحث جلسه قبل
  • قسمت پنجم: اتصال سرور به IP
  • قسمت ششم: دیباگ کردن پروژه و اتصال به سرور
  •  قسمت هفتم: اتصال تستی پروژه به سرور و دریافت اطلاعات
  • قسمت هشتم: کامل کردن صفحه ورود و اتصال آن به سرور و پایگاه داده
  • قسمت نهم: کامل کردن صفحه ثبت‌نام و اتصال آن به سرور و پایگاه داده
  • قسمت دهم: کنترل عدم احتیاج به لاگین کردن پس از یک‌بار وارد شدن به برنامه
  •  قسمت یازدهم: معرفی مفهوم توکن ها در برنامه و کار با آن
  • قسمت دوازدهم: کامل کردن قسمت مربوط به قفل پروفایل
  •  قسمت سیزدهم: اضافه کردن قسمت غیرفعال کردن حساب کاربری به تنظیمات و کنترل آن
  • قسمت چهاردهم: اتصال قسمت پروفایل به سرور
  •  قسمت پانزدهم: تکمیل قسمت پروفایل
  • قسمت شانزدهم: نمایش پست‌ها در قسمت پروفایل

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

  • قسمت اول: اتصال صفحه ویرایش پروفایل به سرور
  • قسمت دوم: کامل کردن صفحه اسپلش اسکرین
  • قسمت سوم: کنترل قسمت فالو و آنفالور کردن کاربران
  • قسمت چهارم: ارتباط با سرور و گرفتن پست‌ها و نمایش آن‌ها
  • قسمت پنجم: کنترل لایک بودن یا نبودن پست توسط کاربر
  • قسمت ششم: ارتباط با سرور قسمت نمایش لایک های هر پست
  •  قسمت هفتم: ارتباط با سرور صفحه نظرات پست‌ها
  • قسمت هشتم: معرفی کامپوننت انتخاب عکس از گوشی و دوربین
  • قسمت نهم: نوشتن API مربوط به آپلود عکس
  • قسمت دهم: انتخاب عکس و آپلود عکس
  •  قسمت یازدهم: انتخاب عکس پروفایل و آپلود عکس
  • قسمت دوازدهم: ادامه قسمت آپلود عکس پروفایل
  •  قسمت سیزدهم: تکمیل قسمت عکس پروفایل
  • قسمت چهاردهم: ساخت صفحه اضافه کردن پست و اضافه کردن پست‌ها
  •  قسمت پانزدهم:ادامه ساخت صفحه اضافه کردن پست
  • قسمت شانزدهم: معرفی چند کامپوننت مهم
  • قسمت هفدهم: رفرش کردن برنامه با کشیدن صفحه به سمت پایین (Swipe Refresh)
نکته
بعد از خرید این دوره آموزش react native ، وبینار ناگفته های برنامه نویسی تجاری موفق در ایران که حاصل تجربه چند ساله دانشجویار در بازار برنامه نویسی ایران است، به صورت رایگان برای شما ارسال می گردد . 

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