React Native - The Practical Guide [ویدئو]

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

شروع شدن Getting Started

• به این دوره خوش آمدید و چه انتظاری دارید! Welcome to This Course and What to Expect!

• React Native چیست؟ What Is React Native?

• A Glance Under the Hood React Native. A Glance Under the Hood of React Native.

• ایجاد پروژه های React Native: Expo CLI در مقابل React Native CLI Creating React Native Projects: Expo CLI Versus React Native CLI

• ایجاد یک پروژه جدید React Native Creating a New React Native Project

• تجزیه و تحلیل پروژه ایجاد شده Analyzing the Created Project

• اجرای اولین برنامه ما روی یک دستگاه واقعی! Running Our First App on a Real Device!

• ایجاد یک محیط توسعه محلی Setting Up a Local Development Environment

• درباره این دوره About This Course

React Native Basics [برنامه اهداف دوره] React Native Basics [Course Goals App]

• معرفی ماژول Module Introduction

• کاوش اجزای اصلی و استایل کامپوننت Exploring Core Components and Component Styling

• کار با اجزای اصلی Working with Core Components

• استایل‌سازی React Native Apps Styling React Native Apps

• بررسی طرح‌بندی‌ها و Flexbox Exploring Layouts and Flexbox

• React Native و Flexbox React Native and Flexbox

• استفاده از Flexbox برای ایجاد طرح‌بندی Using Flexbox to Create Layouts

• Flexbox - شیرجه عمیق Flexbox - A Deep Dive

• بهبود چیدمان Improving the Layout

• رسیدگی به رویدادها Handling Events

• مدیریت فهرستی از اهداف دوره (در برنامه آزمایشی ما) Managing a List of Course Goals (in Our Demo App)

• تفاوت های استایل iOS و اندروید iOS and Android Styling Differences

• قابلیت اسکرول کردن محتوا با ScrollView Making Content Scrollable with ScrollView

• بهینه سازی لیست ها با FlatList Optimizing Lists with FlatList

• تقسیم کامپوننت ها به اجزای کوچکتر Splitting Components into Smaller Components

• استفاده از لوازم جانبی Utilizing Props

• کار بر روی مؤلفه «ورودی هدف». Working on the "Goal Input" Component

• رسیدگی به شیرها با کامپوننت قابل فشار Handling Taps with the Pressable Component

• ساخت موارد قابل حذف و استفاده از شناسه ها Making Items Deletable and Using IDs

• افزودن افکت ریپل اندروید و جایگزین iOS Adding an Android Ripple Effect and an iOS Alternative

• اضافه کردن یک صفحه نمایش مدال Adding a Modal Screen

• حالت دادن به روکش معین Styling the Modal Overlay

• باز و بسته شدن مدال Opening and Closing the Modal

• کار با تصاویر و تغییر رنگ Working with Images and Changing Colors

• لمس پایان برنامه App Finishing Touches

• خلاصه ماژول Module Summary

اشکال زدایی React Native Apps (مقدمه) Debugging React Native Apps (Introduction)

• معرفی ماژول Module Introduction

• رسیدگی به خطاها Handling Errors

• ورود به کنسول Logging to the Console

• اشکال زدایی جاوا اسکریپت از راه دور Debugging JavaScript Remotely

• با استفاده از React DevTools Using the React DevTools

• با استفاده از مستندات Using the Documentation

غواصی عمیق‌تر در اجزا، طرح‌بندی‌ها و استایل - ساختن یک برنامه بازی کوچک Diving Deeper into Components, Layouts, and Styling - Building a Mini-Game App

• معرفی ماژول و آنچه که ما خواهیم ساخت Module Introduction and What We will Build

• راه اندازی و تجزیه و تحلیل برنامه هدف Starting Setup and Analyzing the Target App

• راه اندازی اجزای صفحه نمایش ما Setting Up Our Screen Components

• ایجاد دکمه های سفارشی Creating Custom Buttons

• استایل برای اندروید و iOS Styling for Android and iOS

• سبک دادن به عنصر "ورودی عدد". Styling the "Number Input" Element

• پیکربندی فیلد TextInput Configuring the TextInput Field

• افزودن بازخورد بصری به دکمه ها Adding Visual Feedback to the Buttons

• بهبود دکمه ها Improving the Buttons

• رنگ آمیزی اجزا و برنامه کلی Coloring the Components and the Overall App

• افزودن گرادیان خطی Adding a Linear Gradient

• افزودن تصویر پس زمینه Adding a Background Image

• شروع با منطق بازی Getting Started with Game Logic

• مدیریت ورودی کاربر و نمایش یک گفتگوی هشدار Handling User Input and Showing an Alert Dialog

• تغییر صفحه نمایش به صورت برنامه ای Switching Screens Programmatically

• شروع کار روی صفحه بازی Starting Work on the Game Screen

• رعایت محدودیت های صفحه نمایش دستگاه با SafeAreaView Respecting Device Screen Restrictions with the SafeAreaView

• ایجاد کامپوننت عنوان Creating a Title Component

• مدیریت رنگ ها در سطح جهانی Managing Colors Globally

• ایجاد، استفاده و نمایش اعداد تصادفی Creating, Using, and Displaying Random Numbers

• اضافه کردن دکمه های کنترل بازی ("+" و "-") به برنامه Adding Game Control Buttons ("+" and "-") to the App

• در حال بررسی "بازی تمام شده" Checking for "Game Over"

• بهبود بصری صفحه نمایش بازی Improving the Game Screen Visuals

• استفاده از "سبک های آبشاری" Using "Cascading Styles"

• کار با آیکون ها (آیکون های دکمه) Working with Icons (Button Icons)

• افزودن و استفاده از فونت های سفارشی با برنامه های React Native Adding and Using Custom Fonts with React Native Apps

• افزودن یک تصویر (پیش زمینه). Adding a (Foreground) Image

• استفاده و استایل دادن به متن تودرتو Using and Styling Nested Text

• اضافه کردن منطق به (دوباره) شروع بازی ها و نمایش یک صفحه خلاصه Adding Logic to (Re)Start Games and Displaying a Summary Screen

• ورود به سیستم دور بازی Logging Game Rounds

• خروجی داده های ورود به سیستم با FlatList Outputting Log Data with FlatList

• شکل دادن به سیاهههای مربوط به دور بازی Styling the Game Round Logs

• پایان کار Finishing Touches

• خلاصه ماژول Module Summary

ایجاد رابط های کاربری تطبیقی ​​(تطبیق با پلتفرم و اندازه دستگاه) Building Adaptive User Interfaces (Adapt to Platform and Device Sizes)

• معرفی ماژول Module Introduction

• تنظیم عرض پویا Setting Dynamic Widths

• معرفی Dimensions API Introducing the Dimensions API

• تنظیم اندازه تصویر با Dimensions API Adjusting Image Sizes with the Dimensions API

• درک مشکلات جهت گیری صفحه نمایش Understanding Screen Orientation Problems

• تنظیم اندازه ها به صورت پویا (برای جهت گیری های مختلف) Setting Sizes Dynamically (for Different Orientations)

• مدیریت محتوای صفحه با KeyboardAvoidingView Managing Screen Content with KeyboardAvoidingView

• بهبود رابط کاربری حالت افقی Improving the Landscape Mode UI

• بهبودهای بیشتر با useWindowDimensions Further Improvements with useWindowDimensions

• نوشتن کد مخصوص پلتفرم با پلتفرم API Writing Platform-Specific Code with the Platform API

• حالت دادن به نوار وضعیت Styling the Status Bar

React Native Navigation با React Navigation [برنامه وعده‌های غذایی] React Native Navigation with React Navigation [Meals App]

• معرفی ماژول Module Introduction

• ناوبری چیست؟ What Is Navigation?

• شروع به کار با برنامه و ارائه دسته‌های غذا Getting Started with the App and Outputting Meal Categories

• نمایش موارد در یک شبکه Displaying Items in a Grid

• شروع به کار با بسته ناوبری React Getting Started with the React Navigation Package

• پیاده سازی ناوبری بین دو صفحه Implementing Navigation Between Two Screens

• درک UseNavigation Hook Understanding the useNavigation Hook

• کار با پارامترهای مسیر برای انتقال داده ها بین صفحات Working with Route Parameters to Pass Data Between Screens

• نمایش وعده های غذایی Displaying Meals

• اضافه کردن تصاویر و استایل Adding Images and Styling

• یک ظاهر طراحی هدرها و پس زمینه های صفحه نمایش Styling Screen Headers and Backgrounds

• تنظیم پویا گزینه های ناوبری Setting Navigation Options Dynamically

• افزودن و پیکربندی صفحه جزئیات غذا Adding and Configuring the Meal Details Screen

• خروجی محتوا در صفحه جزئیات غذا Outputting Content in the Meal Details Screen

• اتمام صفحه جزئیات غذا Finishing the Meal Details Screen

• اضافه کردن دکمه های هدر Adding Header Buttons

• اضافه کردن دکمه آیکون به هدر Adding an Icon Button to a Header

• افزودن پیمایش کشو و ایجاد کشو Adding Drawer Navigation and Creating a Drawer

• پیکربندی Drawer Navigator و Drawer Configuring the Drawer Navigator and the Drawer

• افزودن، پیکربندی و استفاده از تب های پایین Adding, Configuring, and Using Bottom Tabs

• ناوبرهای تودرتو Nesting Navigators

• برگه‌های پایین و لمس‌های پایان برنامه Bottom Tabs and App Finishing Touches

• خلاصه ماژول Module Summary

مدیریت حالت گسترده برنامه با Redux و Context API App-Wide State Management with Redux and Context API

• معرفی ماژول Module Introduction

• شروع به کار با Context API React Getting Started with React's Context API

• مدیریت وضعیت گسترده برنامه با زمینه Managing App-Wide State with Context

• استفاده از Context ایجاد شده با useContext Using the Created Context with useContext

• مدیریت غذاهای مورد علاقه با Context API Managing Favorite Meals with the Context API

• شروع کار با Redux و Redux Toolkit Getting Started with Redux and Redux Toolkit

• کار با Redux Slices Working with Redux Slices

• مدیریت Redux State and Dispatching Actions Managing Redux State and Dispatching Actions

• استفاده از حالت Redux در کامپوننت ها Using Redux State in Components

• خلاصه ماژول Module Summary

زمان تمرین - برنامه ردیاب هزینه Time to Practice - The Expense Tracker App

• معرفی ماژول و آنچه که ما خواهیم ساخت Module Introduction and What We will Build

• راه اندازی راه اندازی The Starting Setup

• افزودن ناوبری (با React Navigation) و پیکربندی ناوبری Adding Navigation (with React Navigation) and Configuring Navigation

• افزودن رنگ های جهانی و ویرایش پیکربندی ناوبری Adding Global Colors and Editing Navigation Configuration

• ایجاد مؤلفه های کلیدی برنامه برای نمایش هزینه ها Creating Key App Components to Display Expenses

• ادامه کار بر روی اجزای مربوط به هزینه Continuing Work on the Expense-Related Components

• افزودن داده های هزینه ساختگی Adding Dummy Expense Data

• خروجی لیست هزینه ها Outputting a List of Expenses

• بهبود طرح و استایل برنامه Improving App Layout and Styling

• کار بر روی موارد فهرست هزینه Working on Expense List Items

• قالب بندی تاریخ ها Formatting Dates

• افزودن دکمه سرصفحه و قابل لمس کردن موارد هزینه Adding a Header Button and Making Expense Items Tappable

• پیمایش برنامه‌ای بین صفحه‌ها Navigating Programmatically Between Screens

• سبک دادن به صفحه مدیریت هزینه Styling the Expense Management Screen

• پشتیبانی از حالت های مختلف ویرایش و استفاده از پارامترهای مسیر Supporting Different Editing Modes and Using Route Parameters

• اضافه کردن دکمه "حذف". Adding a "Delete" Button

• اضافه کردن دکمه های سفارشی Adding Custom Buttons

• بستن یک Modal به صورت برنامه ای Closing a Modal Programmatically

• مدیریت وضعیت گسترده برنامه با زمینه Managing App-Wide State with Context

• استفاده از Context از Inside Components Using Context from Inside Components

• حذف و به روز رسانی هزینه ها Deleting and Updating Expenses

• پایان کار Finishing Touches

مدیریت ورودی کاربر Handling User Input

• معرفی ماژول Module Introduction

• ساخت کامپوننت ورودی سفارشی Building a Custom Input Component

• ایجاد یک فرم کلی Creating an Overall Form

• پیکربندی عناصر ورودی فرم Configuring the Form Input Elements

• اضافه کردن یک ظاهر طراحی شده Adding Styling

• تنظیم طرح بندی فرم Setting the Form Layout

• مدیریت ورودی کاربر به روشی عمومی Handling User Input in a Generic Way

• مدیریت فرم وضعیت و ارسال Managing Form State and Submission

• کار با داده های وارد شده Working with Entered Data

• تنظیم و استفاده از مقادیر پیش فرض Setting and Using Default Values

• افزودن اعتبارسنجی Adding Validation

• ارائه بازخورد اعتبار سنجی بصری Providing Visual Validation Feedback

• اضافه کردن استایل خطا Adding Error Styling

• خلاصه ماژول Module Summary

ارسال درخواست Http Sending Http Requests

• معرفی ماژول Module Introduction

• راه اندازی Backend (Firebase) Backend Setup (Firebase)

• نصب Axios Installing Axios

• ارسال درخواست های POST Http Sending POST Http Requests

• واکشی داده های Backend (دریافت درخواست ها) Fetching Backend Data (GET Requests)

• تبدیل و استفاده از داده های واکشی شده Transforming and Using Fetched Data

• استفاده از داده های پاسخ از درخواست های POST Using Response Data from POST Requests

• به روز رسانی و حذف داده های Backend (درخواست های به روز رسانی و حذف) Updating and Deleting Backend Data (UPDATE and DELETE Requests)

• مدیریت وضعیت بارگیری Managing the Loading State

• رسیدگی به خطاهای درخواست Handling Request Errors

• خلاصه ماژول Module Summary

احراز هویت کاربر User Authentication

• معرفی ماژول Module Introduction

• بررسی برنامه آزمایشی Demo App Walkthrough

• احراز هویت چگونه کار می کند؟ How Does Authentication Work?

• راه اندازی Backend Backend Setup

• کنترل صفحات ثبت نام و ورود به سیستم Controlling Signup and Login Screens

• ارسال درخواست های احراز هویت به Backend Sending Authentication Requests to the Backend

• ایجاد کاربران جدید Creating New Users

• ورود کاربران به Logging Users In

• مدیریت خطای احراز هویت Authentication Error Handling

• ذخیره و مدیریت وضعیت احراز هویت کاربر (با متن) Storing and Managing the User Authentication State (with Context)

• استخراج رمز احراز هویت Extracting the Authentication Token

• محافظت از صفحه نمایش Protecting Screens

• افزودن یک عملکرد خروج Adding a Logout Functionality

• دسترسی به منابع محافظت شده Accessing Protected Resources

• ذخیره توکن‌های Auth در دستگاه و ثبت نام کاربران به صورت خودکار Storing Auth Tokens on the Device and Logging Users Automatically

• خلاصه ماژول Module Summary

استفاده از ویژگی‌های دستگاه بومی (دوربین، مکان و موارد دیگر) Using Native Device Features (Camera, Location, and More)

• معرفی ماژول Module Introduction

• افزودن لیست "مکان های مورد علاقه". Adding a "Favorite Places" List

• ویرایش موارد مکان مورد علاقه Editing the Favorite Place Items

• افزودن یک صفحه نمایش "افزودن مکان" + ناوبری Adding an "Add Place" Screen + Navigation

• اضافه کردن دکمه هدر Adding a Header Button

• رنگ های جهانی و یک ظاهر طراحی شده Global Colors and Styling

• شروع با یک فرم سفارشی Getting Started with a Custom Form

• افزودن و پیکربندی بسته دوربین (برای دسترسی به دوربین اصلی) Adding and Configuring the Camera Package (for Native Camera Access)

• عکس گرفتن در اندروید Taking Photos on Android

• عکس گرفتن در iOS + مدیریت مجوزها Taking Photos on iOS + Managing Permissions

• نمایش پیش نمایش تصویر Showing an Image Preview

• ایجاد یک دکمه سفارشی Creating a Custom Button

• شروع به کار با انتخابگر مکان Getting Started with the Location Picker

• مکان یابی کاربران Locating Users

• افزودن نقشه پیش نمایش موقعیت مکانی Adding a Location Preview Map

• اضافه کردن یک نقشه تعاملی (Google Maps و Apple Maps) Adding an Interactive Map (Google Maps and Apple Maps)

• امکان تعامل نقشه و افزودن نشانگرها Allowing Map Interaction and Adding Markers

• تأیید مکان‌های انتخابی Confirming Picked Locations

• پیش نمایش مکان های انتخاب شده Previewing Picked Locations

• افزودن دکمه ارسال فرم Adding a Form Submit Button

• مدیریت موقعیت مکانی و وضعیت تصویر در فرم Managing Location and Image State in the Form

• تبدیل مکان‌های انتخابی به آدرس‌های قابل خواندن برای انسان Converting Picked Locations to Human-Readable Addresses

• انتقال داده های وارد شده به صفحه "AllPlaces". Passing Entered Data to the "AllPlaces" Screen

• خروجی لیست مکان ها Outputting a List of Places

• یک ظاهر طراحی اقلام مکان Styling Place Items

• SQLite: شروع و راه اندازی SQLite: Getting Started and Initialization

• آماده سازی کد برای درج داده ها در پایگاه داده SQLite Preparing Code to Insert Data into the SQLite Database

• درج مکان ها در پایگاه داده Inserting Places into the Database

• واکشی مکان ها از پایگاه داده Fetching Places from the Database

• افزودن صفحه جزئیات مکان Adding the Place Details Screen

• واکشی اطلاعات جزئیات مکان از پایگاه داده Fetching Place Detail Data from the Database

• نمایش نقشه فقط خواندنی Showing a Readonly Map

• خلاصه ماژول Module Summary

ساخت برنامه های React Native بدون Expo Building React Native Apps without Expo

• معرفی ماژول Module Introduction

• اکسپو دقیقا چگونه کار می کند؟ How Exactly Does Expo Work?

• جایگزین های اکسپو Expo Alternatives

• راه اندازی سیستم ما Setting Up Our System

• استفاده از گردش کار برهنه Expo Using Expo's Bare Workflow

• استفاده از ویژگی‌های دستگاه بومی با جریان کار برهنه Using Native Device Features with the Bare Workflow

• خروج به جریان کار برهنه Ejecting to the Bare Workflow

• ایجاد پروژه با React Native CLI (بدون نمایشگاه) Creating Projects with the React Native CLI (no Expo)

• برنامه های غیر اکسپو و ویژگی های دستگاه بومی Non-Expo Apps and Native Device Features

• خلاصه ماژول Module Summary

انتشار React Native Apps Publishing React Native Apps

• معرفی ماژول Module Introduction

• انتشار برنامه ها: یک مرور کلی Publishing Apps: An Overview

• موارد و ملاحظات پیکربندی کلیدی Key Configuration Items and Considerations

• پیکربندی نام‌ها و نسخه‌های برنامه Configuring App Names and Versions

• نکته ای سریع درباره متغیرهای محیطی A Quick Note About Environment Variables

• اضافه کردن آیکون ها و صفحه نمایش چلپ چلوپ Adding Icons and a Splash Screen

• ساخت برنامه های نمایشگاهی با EAS Building Expo Apps with EAS

• EAS برای iOS (حتی در دستگاه های ویندوز) EAS for iOS (Even on Windows Devices)

• ساخت برای iOS بدون نمایشگاه Building for iOS without Expo

• ساختن برای اندروید بدون اکسپو Building for Android without Expo

Push Notifications Push Notifications

• معرفی ماژول Module Introduction

• اعلان‌های (محلی) چیست؟ What Are (Local) Notifications?

• افزودن بسته اعلان نمایشگاه Adding the Expo Notification Package

• اعلان های زمان بندی Scheduling Notifications

• رسیدگی به اعلان های دریافتی Handling Incoming Notifications

• واکنش به اعلان های دریافتی Reacting to Incoming Notifications

• واکنش به تعامل کاربر با اعلان های دریافتی Reacting to User Interaction with Incoming Notifications

• درک Push Notifications Understanding Push Notifications

• نصب Push Notifications Push Notifications Setup

• با استفاده از Push Token Using the Push Token

• ارسال Push Notifications Sending Push Notifications

• خلاصه ماژول Module Summary

خلاصه دوره Course Roundup

• خلاصه دوره Course Roundup

امتیاز: JavaScript Refresher Bonus: JavaScript Refresher

• معرفی ماژول Module Introduction

• جاوا اسکریپت - خلاصه JavaScript - A Summary

• بازنگری دستور هسته Core Syntax Refresher

• اجازه دهید و ثابت کنید let and const

• توابع پیکان Arrow Functions

• موضوعات: خواص و روش ها Objects: Properties and Methods

• آرایه ها و روش های آرایه Arrays and Array Methods

• آرایه ها، اشیاء و انواع مرجع Arrays, Objects, and Reference Types

• پارامترهای Spread Operator و Rest Spread Operator and Rest Parameters

• در حال تخریب Destructuring

• کد Async و Promises Async Code and Promises

• بسته شدن Wrap Up

امتیاز: React.js Refresher Bonus: React.js Refresher

• معرفی ماژول Module Introduction

• React چیست؟ What is React?

• یک پروژه شروع A Starting Project

• درک JSX Understanding JSX

• درک مولفه ها Understanding Components

• کار با چندین کامپوننت Working with Multiple Components

• کار با Props Working with Props

• رندر کردن لیست داده ها Rendering Lists of Data

• رسیدگی به رویدادها Handling Events

• ارتباط والدین و فرزند Parent-Child Communication

• دولت مدیریت Managing State

• بیشتر در مورد ایالت More on State

• ورودی کاربر و اتصال دو طرفه User Input and Two-Way Binding

• بسته شدن Wrap Up