React Native - راهنمای عملی

برنامه های موبایل یکی از بهترین راهها برای تعامل با کاربران است. جای تعجب نیست که همه می خواهند یکی بسازند! خوب نیست اگر بتوانید از دانش توسعه وب خود ، همراه با دانش React خود استفاده کنید ، برای ساختن برنامه های تلفن همراه با آن استفاده کنید؟ این دقیقاً همان کاری است که React Native به شما امکان می دهد انجام دهید! React و JavaScript تنها چیزی است که شما برای ایجاد برنامه های موبایل بومی عالی که در Android و iOS کار می کنند ، نیاز دارید. این احتمالاً به همین دلیل است که بسیاری از شرکت های جهانی از آن برای ساخت برنامه های تلفن همراه خود استفاده می کنند! با استفاده از این دوره ، یاد بگیرید که برنامه های بومی React خود را ایجاد کنید ، آنها را به فروشگاه Google Play و Apple App منتشر کنید و در اکوسیستم بومی React غرق شوید. ، نحوه ساخت طرح های پاسخگو که در اندازه دستگاه های مختلف کار می کنند ، نحوه حرکت در اطراف ، استفاده از نقشه ها و دوربین و موارد دیگر! بهترین راه برای یادگیری ساخت یک برنامه واقعی است. ما برنامه "مکان های مورد علاقه" را در این دوره می سازیم ، برنامه ای که کاربران می توانند تصاویر شگفت انگیز و مکانی را که در آن گرفته اند به اشتراک بگذارند. این برنامه به شما امکان می دهد مواردی از قبیل استفاده از نقشه ها ، دوربین ، تأیید اعتبار کاربر ، اتصال به یک سرور و موارد دیگر را مشاهده کنید.
تا پایان این دوره ، مهارت های React Native و JavaScript را توسعه داده اید برای ساخت و استقرار برنامه های پاسخگو تلفن همراه مورد نیاز است.

عنوان اصلی : React Native - The Practical Guide

سرفصل های دوره :

شروع به کار:
به این دوره خوش آمدید و چه انتظاری دارید!
React Native چیست؟
نگاهی زیر سرپوش React Native.
ایجاد پروژه های React Native: Expo CLI در مقابل React Native CLI
ایجاد یک پروژه جدید React Native
تجزیه و تحلیل پروژه ایجاد شده
اجرای اولین برنامه ما در یک دستگاه واقعی!
راه اندازی یک محیط توسعه محلی
درباره این دوره
React Native Basics [برنامه اهداف دوره]:
معرفی ماژول
کاوش اجزای اصلی و استایل کامپوننت
کار با اجزای اصلی
Styling React Native Apps
کاوش در طرح‌بندی‌ها و Flexbox
React Native و Flexbox
استفاده از Flexbox برای ایجاد طرح‌بندی
Flexbox - شیرجه عمیق
بهبود چیدمان
رسیدگی به رویدادها
مدیریت فهرستی از اهداف دوره (در برنامه آزمایشی ما)
تفاوت‌های استایل iOS و Android
قابلیت اسکرول کردن محتوا با ScrollView
بهینه سازی لیست ها با FlatList
تقسیم اجزا به اجزای کوچکتر
استفاده از لوازم جانبی
کار بر روی مؤلفه «ورودی هدف».
دست زدن به شیرها با مولفه قابل فشار دادن
قابلیت حذف کردن و استفاده از شناسه ها
افزودن یک افکت ریپل اندروید و یک جایگزین iOS
افزودن یک صفحه نمایش مدال
استایل دادن به روکش معین
باز کردن و بستن مدال
کار با تصاویر و تغییر رنگ
لمس پایان برنامه
خلاصه ماژول
اشکال‌زدایی برنامه‌های بومی React (مقدمه):
معرفی ماژول
رسیدگی به خطاها
ورود به کنسول
اشکال‌زدایی جاوا اسکریپت از راه دور
با استفاده از React DevTools
استفاده از مستندات
غواصی عمیق‌تر در اجزا، چیدمان‌ها و استایل - ساختن یک برنامه بازی کوچک:
معرفی ماژول و آنچه که خواهیم ساخت
شروع راه اندازی و تجزیه و تحلیل برنامه هدف
تنظیم اجزای صفحه نمایش ما
ایجاد دکمه های سفارشی
استایلینگ برای اندروید و iOS
استایل دادن به عنصر "ورودی عدد".
پیکربندی فیلد TextInput
افزودن بازخورد بصری به دکمه ها
بهبود دکمه ها
رنگ‌آمیزی اجزا و برنامه کلی
افزودن یک گرادیان خطی
افزودن تصویر پس زمینه
شروع با منطق بازی
مدیریت ورودی کاربر و نمایش یک گفتگوی هشدار
تغییر صفحه نمایش به صورت برنامه ای
شروع کار در صفحه بازی
رعایت محدودیت های صفحه نمایش دستگاه با SafeAreaView
ایجاد یک جزء عنوان
مدیریت رنگ ها در سطح جهانی
ایجاد، استفاده و نمایش اعداد تصادفی
افزودن دکمه‌های کنترل بازی ("+" و "-") به برنامه
در حال بررسی «بازی به پایان رسیده»
بهبود بصری صفحه بازی
استفاده از "سبک های آبشاری"
کار با نمادها (نمادهای دکمه)
افزودن و استفاده از فونت های سفارشی با برنامه های React Native
افزودن یک تصویر (پیش زمینه).
استفاده از متن تودرتو و سبک‌دهی
افزودن منطق به (دوباره) شروع بازی ها و نمایش یک صفحه خلاصه
ثبت نام در دورهای بازی
خروجی داده های گزارش با FlatList
استایل دادن به گزارش های دور بازی
کارهای پایانی
خلاصه ماژول
ساخت رابط های کاربری تطبیقی ​​(تطبیق با پلتفرم و اندازه دستگاه):
معرفی ماژول
تنظیم پهنای پویا
معرفی Dimensions API
تنظیم اندازه تصویر با Dimensions API
درک مشکلات جهت گیری صفحه
تنظیم اندازه ها به صورت پویا (برای جهت های مختلف)
مدیریت محتوای صفحه با KeyboardAvoidingView
بهبود رابط کاربری حالت افقی
بهبودهای بیشتر با useWindowDimensions
نوشتن کد مخصوص پلتفرم با API پلتفرم
استایل دادن به نوار وضعیت
React Native Navigation با React Navigation [برنامه وعده‌های غذایی]:
معرفی ماژول
ناوبری چیست؟
شروع با برنامه و ارائه دسته‌های غذا
نمایش موارد در یک شبکه
شروع با بسته ناوبری React
اجرای پیمایش بین دو صفحه
درک useNavigation Hook
کار با پارامترهای مسیر برای انتقال داده بین صفحه‌ها
نمایش وعده های غذایی
افزودن تصاویر و استایل
طراحی سرصفحه و پس‌زمینه صفحه
تنظیم گزینه های پیمایش به صورت پویا
افزودن و پیکربندی صفحه جزئیات غذا
خروجی محتوا در صفحه جزئیات غذا
اتمام صفحه جزئیات غذا
افزودن دکمه های هدر
افزودن یک دکمه نماد به سربرگ
افزودن پیمایش کشو و ایجاد کشو
پیکربندی Drawer Navigator و Drawer
افزودن، پیکربندی و استفاده از تب های پایین
ناوبرهای تودرتو
برگه‌های پایین و کلیدهای پایان برنامه
خلاصه ماژول
مدیریت حالت گسترده برنامه با Redux و Context API:
معرفی ماژول
شروع با Context API React
مدیریت وضعیت گسترده برنامه با زمینه
استفاده از زمینه ایجاد شده با useContext
مدیریت غذاهای مورد علاقه با Context API
در حال گرفتنبا Redux و Redux Toolkit شروع شد
کار با Redux Slices
مدیریت Redux State and Dispatching Actions
استفاده از حالت Redux در کامپوننت ها
خلاصه ماژول
زمان تمرین - برنامه ردیاب هزینه:
معرفی ماژول و آنچه که خواهیم ساخت
راه اندازی راه اندازی
افزودن ناوبری (با React Navigation) و پیکربندی ناوبری
افزودن رنگ های جهانی و ویرایش پیکربندی پیمایش
ایجاد مولفه های کلیدی برنامه برای نمایش هزینه ها
ادامه کار بر روی اجزای مربوط به هزینه
افزودن داده‌های هزینه ساختگی
خروجی فهرستی از هزینه ها
بهبود چیدمان و استایل برنامه
کار بر روی موارد فهرست هزینه
قالب بندی تاریخ ها
افزودن دکمه سرصفحه و قابل لمس کردن اقلام هزینه
پیمایش برنامه‌ای بین صفحه‌ها
استایل دادن به صفحه مدیریت هزینه
پشتیبانی از حالت های مختلف ویرایش و استفاده از پارامترهای مسیر
افزودن دکمه "حذف".
افزودن دکمه های سفارشی
بستن یک مدال به صورت برنامه ای
مدیریت وضعیت گسترده برنامه با زمینه
استفاده از زمینه از اجزای داخلی
حذف و به روز رسانی هزینه ها
کارهای پایانی
مدیریت ورودی کاربر:
معرفی ماژول
ساخت یک کامپوننت ورودی سفارشی
ایجاد فرم کلی
پیکربندی عناصر ورودی فرم
افزودن استایل
تنظیم طرح بندی فرم
مدیریت ورودی کاربر به روشی عمومی
مدیریت وضعیت فرم و ارسال
کار با داده های وارد شده
تنظیم و استفاده از مقادیر پیش فرض
افزودن اعتبارسنجی
ارائه بازخورد اعتبار سنجی بصری
افزودن استایل خطا
خلاصه ماژول
ارسال درخواست‌های Http:
معرفی ماژول
تنظیم Backend (Firebase)
نصب Axios
ارسال درخواست های POST Http
واکشی داده های Backend (دریافت درخواست ها)
تبدیل و استفاده از داده های واکشی شده
استفاده از داده‌های پاسخ از درخواست‌های POST
به‌روزرسانی و حذف داده‌های پشتیبان (به‌روزرسانی و حذف درخواست‌ها)
مدیریت وضعیت بارگیری
رسیدگی به خطاهای درخواست
خلاصه ماژول
تأیید هویت کاربر:
معرفی ماژول
بررسی برنامه آزمایشی
احراز هویت چگونه کار می کند؟
تنظیم Backend
کنترل صفحه ثبت نام و ورود به سیستم
ارسال درخواست های احراز هویت به Backend
ایجاد کاربران جدید
ورود کاربران به سیستم
مدیریت خطای احراز هویت
ذخیره و مدیریت وضعیت احراز هویت کاربر (با زمینه)
استخراج رمز احراز هویت
حفاظت از صفحه نمایش
افزودن یک عملکرد خروج
دسترسی به منابع محافظت شده
ذخیره کردن نشانه‌های تأیید اعتبار در دستگاه و ثبت نام کاربران به صورت خودکار
خلاصه ماژول
استفاده از ویژگی‌های دستگاه بومی (دوربین، مکان و موارد دیگر):
معرفی ماژول
افزودن فهرست "مکان های مورد علاقه".
ویرایش موارد مکان مورد علاقه
افزودن یک صفحه "افزودن مکان" + پیمایش
افزودن دکمه هدر
رنگ‌ها و استایل جهانی
شروع با یک فرم سفارشی
افزودن و پیکربندی بسته دوربین (برای دسترسی به دوربین اصلی)
عکس گرفتن در اندروید
عکس گرفتن در iOS + مدیریت مجوزها
نمایش پیش نمایش تصویر
ایجاد یک دکمه سفارشی
شروع با انتخابگر مکان
مکانیابی کاربران
افزودن نقشه پیش نمایش موقعیت مکانی
افزودن یک نقشه تعاملی (Google Maps و Apple Maps)
اجازه دادن به تعامل نقشه و افزودن نشانگرها
تأیید مکان‌های انتخابی
پیش نمایش مکان های انتخابی
افزودن دکمه ارسال فرم
مدیریت موقعیت مکانی و وضعیت تصویر در فرم
تبدیل مکان‌های انتخابی به آدرس‌های قابل خواندن برای انسان
انتقال داده های وارد شده به صفحه "AllPlaces".
خروجی لیست مکان ها
طراحی اقلام مکان
SQLite: شروع به کار و مقداردهی اولیه
آماده سازی کد برای درج داده ها در پایگاه داده SQLite
درج مکان ها در پایگاه داده
واکشی مکان ها از پایگاه داده
افزودن صفحه جزئیات مکان
واکشی اطلاعات جزئیات مکان از پایگاه داده
نمایش نقشه فقط خواندنی
خلاصه ماژول
ساخت برنامه‌های بومی React بدون Expo:
معرفی ماژول
اکسپو دقیقا چگونه کار می کند؟
گزینه های جایگزین نمایشگاه
راه اندازی سیستم ما
استفاده از گردش کار برهنه Expo
استفاده از ویژگی‌های دستگاه بومی با جریان کار برهنه
خروج به جریان کار برهنه
ایجاد پروژه ها با React Native CLI (بدون نمایشگاه)
برنامه‌های غیر اکسپو و ویژگی‌های دستگاه بومی
خلاصه ماژول
انتشار React Native Apps:
معرفی ماژول
انتشار برنامه ها: یک مرور کلی
موارد و ملاحظات پیکربندی کلیدی
پیکربندی نام‌ها و نسخه‌های برنامه
یک یادداشت سریع درباره متغیرهای محیطی
افزودن آیکون ها و یک صفحه نمایش اسپلش
ساخت برنامه های نمایشگاهی با EAS
EAS برای iOS (حتی در دستگاه‌های Windows)
ساخت برای iOS بدون نمایشگاه
ساخت برای اندروید بدون نمایشگاه
اعلان فشاریns :
معرفی ماژول
اعلان‌های (محلی) چیست؟
افزودن بسته اعلان نمایشگاه
اعلان‌های زمان‌بندی
رسیدگی به اعلان های دریافتی
واکنش به اعلان‌های دریافتی
واکنش به تعامل کاربر با اعلان‌های دریافتی
درک اعلان‌های فشاری
تنظیم Push Notifications
استفاده از Push Token
ارسال Push Notifications
خلاصه ماژول
خلاصه دوره:
جمع بندی دوره
پاداش: JavaScript Refresher:
معرفی ماژول
جاوا اسکریپت - خلاصه
Refresher Syntax Core
اجازه دهید و ثابت کنید
توابع پیکان
اشیاء: خواص و روشها
آرایه ها و روش های آرایه
آرایه ها، اشیا و انواع مرجع
Spread Operator and Rest Parameters
تخریب
Async Code and Promises
بپیچید
پاداش: React.js Refresher:
معرفی ماژول
React چیست؟
یک پروژه شروع
درک JSX
درک اجزا
کار با چندین مؤلفه
کار با Props
نمایش لیست داده ها
رسیدگی به رویدادها
ارتباطات والدین و فرزند
مدیریت دولت
بیشتر در مورد State
ورودی کاربر و اتصال دو طرفه
بپیچید