آموزش React Native - راهنمای عملی [2023]

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

شروع شدن Getting Started

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

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

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• یک نگاه زیر سرپوش React Native A Glance Under The Hood Of React Native

• ایجاد پروژه های React Native: Expo CLI در مقابل React Native CLI Creating React Native Projects: Expo CLI vs 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

• منابع دوره، تصاویر فوری کد و نحوه استفاده Course Resources, Code Snapshots & How To Use

React Native Basics [برنامه اهداف دوره] React Native Basics [COURSE GOALS APP]

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

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

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

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

• React Native: Core Components, Styling & Colors - اطلاعات بیشتر React Native: Core Components, Styling & Colors - More Information

• کاوش طرح‌بندی‌ها و Flexbox Exploring Layouts & Flexbox

• React Native و Flexbox React Native & Flexbox

• استفاده از Flexbox برای ایجاد Layout Using Flexbox To Create Layouts

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

• مولفه ها، سبک ها، چیدمان ها Components, Styles, Layouts

• بهبود طرح Improving The Layout

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

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

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

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

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

• اجزا و لیست های بیشتر More Components & Lists

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

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

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

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

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

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

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

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

• باز کردن و بستن Modal Opening & Closing the Modal

• کار با تصاویر و تغییر رنگ Working with Images & 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 & Styling - Building a Mini-Game App

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

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

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

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

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

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

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

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

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

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

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

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

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

• مدیریت ورودی کاربر و نمایش یک گفتگوی هشدار Handling User Input & 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 & Displaying Random Numbers

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

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

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

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

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

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

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

• استفاده از متن تودرتو و استایل کردن Using & Styling Nested Text

• افزودن منطق به (باز) شروع مجدد بازی ها و نمایش یک صفحه خلاصه Adding Logic to (Re-)Start Games & 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 & 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

• Dimensions API & Responsive UIs The Dimensions API & Responsive UIs

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

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

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

React Native Navigation با React Navigation [برنامه MEALS] React Native Navigation with React Navigation [MEALS APP]

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

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

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

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

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

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

• تنظیم صفحه پیش فرض Setting the Default Screen

• درک UseNavigation Hook Understanding the useNavigation Hook

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

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

• افزودن تصاویر و استایل Adding Images & Styling

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

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

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

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

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

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

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

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

• پیکربندی Drawer Navigator & The Drawer Configuring the Drawer Navigator & The Drawer

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

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

• برگه‌های پایین و کلیدهای پایان برنامه Bottom Tabs & App Finishing Touches

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

مدیریت حالت در سطح برنامه با Redux & Context API App-wide State Management with Redux & 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 & Redux Toolkit

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

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

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

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

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

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

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

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

• افزودن رنگ های جهانی و ویرایش پیکربندی ناوبری Adding Global Colors & 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 & Styling

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

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

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

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

• حالت دادن به صفحه مدیریت هزینه Styling The Expense Management Screen

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

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

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

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

• مدیریت وضعیت در سطح برنامه با زمینه Managing App-wide State With Context

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

• حذف و به روز رسانی هزینه ها Deleting & 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 & Submission

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

• تنظیم و استفاده از مقادیر پیش فرض Setting & 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 & Using Fetched Data

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

• به روز رسانی و حذف داده های پشتیبان (درخواست های به روز رسانی و حذف) Updating & Deleting Backend Data (UPDATE & 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 & Login Screens

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

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

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

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

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

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

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

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

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

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

• نکته ای در مورد انقضای توکن A Note About Token Expiration

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

استفاده از ویژگی‌های دستگاه بومی (دوربین، مکان و موارد دیگر) Using Native Device Features (Camera, Location & 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 & Styling

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

• افزودن و پیکربندی بسته دوربین (برای دسترسی به دوربین اصلی) Adding & 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 & Apple Maps)

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

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

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

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

• مدیریت موقعیت مکانی و وضعیت تصویر در فرم Managing Location & 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 & 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 بدون نمایشگاه 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 & Native Device Features

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

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

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

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

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

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

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

• اضافه کردن آیکون ها و صفحه نمایش چلپ چلوپ Adding Icons & 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

• پیکربندی برنامه های اندروید Configuring Android Apps

Push Notifications Push Notifications

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

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

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

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

• پیکربندی اعلان های زمان بندی شده Configuring Scheduled Notifications

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

• اعلان های محلی - مجوزها Local Notifications - Permissions

• واکنش به اعلان های دریافتی 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

امتیاز: جاوا اسکریپت Refresher Bonus: JavaScript Refresher

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

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

• راه اندازی پروژه Project Setup

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

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

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

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

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

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

• Spread Operator & Rest Parameters Spread Operator & Rest Parameters

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

• کد Async & Promises Async Code & Promises

• بسته شدن Wrap Up

• منابع ماژول Module Resources

امتیاز: 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 & Two-Way Binding

• بسته شدن Wrap Up

• منابع ماژول Module Resources

جایزه Bonus

• محتوای دوره میراث Legacy Course Content

• این دوره به روز شد | به روز رسانی اطلاعات This Course Was Updated | Update Information

• اطلاعات به روز رسانی دوره و سوالات متداول Course Update Information & FAQs

• امتیاز: محتوای بیشتر! Bonus: More Content!