آموزش جامع ری‌اکت نیتیو (React Native) + ساخت فروشگاه آنلاین + پرسش و پاسخ مصاحبه - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• توسعه Native در مقابل Hybrid Native vs Hybrid Mobile Development

• آیا React Native یک فریم‌ورک Hybrid است؟ Is React Native Hybrid?

• معرفی Expo CLI Expo CLI

• ایجاد اولین پروژه Creating First Project

• درک ساختار پروژه Understanding Project Structure

• اجرای اپلیکیشن روی موبایل Running the App on Mobile

• شبیه‌ساز اپل [Xcode] Apple [Xcode] Simulator

کامپوننت‌های اصلی Core Components

• مقدمه‌ای بر کامپوننت‌های اصلی Introduction to Core Components

• تمرین: مقدمه‌ای بر کامپوننت‌های اصلی RQ - Introduction to Core Components

• کانتینر View View - Container

• تمرین: کانتینر View RQ - View Container

• استایل‌دهی Inline Inline Styling

• تمرین: استایل‌دهی Inline RQ - Inline Styling

• روش بهتر استایل‌دهی: شیء StyleSheet Better Way of Styling - StyleSheet Object

• تمرین: روش بهتر استایل‌دهی (StyleSheet) RQ - Better Way of Styling - StyleSheet Object

• مبانی مدیریت رویدادها (Event Handling) Event Handling Basics

• تمرین: مبانی مدیریت رویدادها RQ - Event Handling Basics

• ارسال پارامتر به تابع مدیریت رویداد Parameter Passing to Event Handler Function

• کامپوننت Button Button Component

• تفاوت ویژگی Color در اندروید و iOS Color Property Difference for Android & iOS

• کار با State: افزایش شمارنده Working with State - Incrementing Counter

• کاهش شمارنده Decrementing Counter

• عملکرد شمارنده با ارسال پارامتر Counter Functionality with Parameter Passing

• روش بهتر برای به‌روزرسانی State (Callback) Better Way to Update State - Callback

• تمرین: مدیریت وضعیت (State Management) RQ - State Management

• کار با آرایه به عنوان State Working with Array as State

• کار با شیء (Object) به عنوان State Object as State

• تمرین: UseState RQ - UseState

• کامپوننت Switch Switch Component

• استایل‌دهی به کامپوننت Switch Styling Switch Component

• تمرین: کامپوننت Switch RQ - Switch Component

• کامپوننت Image Image Component

• سایزدهی تصویر با resizeMode Sizing Image with resizeMode

• ویژگی‌های DefaultSource، Blur و Fade در تصاویر DefaultSource, Blur, and Fade Properties - Image

• تمرین: کامپوننت Image RQ - Image Component

• کامپوننت TextInput TextInput Component

• پراپ‌های کامپوننت TextInput Props TextInput Component

• ویژگی‌های AutoCorrect، AutoCapitalize و Multiline AutoCorrect, AutoCapitalize, and Multiline TextInput

• تمرین: کامپوننت TextInput RQ - TextInput Component

• کامپوننت ScrollView ScrollView Component

• کامپوننت ScrollView افقی Horizontal ScrollView Component

• پیاده‌سازی Paging با ScrollView Paging Using ScrollView Component

• پروژه: ساخت دفترچه تلفن با استفاده از تمام کامپوننت‌ها (بخش اول) Task - Create an Address Book Using All the Components Learned (Part 1)

• پروژه: پیاده‌سازی تغییرات استایل (بخش دوم) Task - Implementing Style Changes (Part 2)

• پروژه: افزودن قابلیت حذف (بخش سوم) Task - Adding Delete Functionality (Part 3)

• کامپوننت FlatList FlatList Component

• پیاده‌سازی Lazy Loading، Header و Footer در FlatList FlatList Implementing Lazy Loading, Header, and Footer Component

• کامپوننت SectionList SectionList Component

• تمرین: FlatList و SectionList RQ - FlatList & SectionList

ناوبری (Navigation) Navigation

• مقدمه‌ای بر ناوبری (Navigation) Introduction to Navigation

• ساختار Expo Router (مسیریابی مبتنی بر فایل) با TypeScript Expo Router (File-Based Routing) Structure with TypeScript

• ساختار Expo Router (مسیریابی مبتنی بر فایل) با JavaScript Expo Router (File-Based Routing) Structure with JavaScript

• تمرین: Expo Router RQ - Expo Router

• جابجایی بین مسیرها (Routes) در موبایل Navigating Between Routes in Mobile

• پیکربندی فایل _layout Configuring _layout File

• تمرین: فایل‌های _layout RQ - _layout Files

• الگوی ناوبری: Stack Navigator Navigation Pattern: Stack Navigator

• سفارشی‌سازی Header و دکمه بازگشت (به صورت سراسری) Customizing Header and Back Button (Globally)

• سفارشی‌سازی Header و دکمه بازگشت (برای هر صفحه) Customizing Header and Back Button (Individual Screen)

• سفارشی‌سازی Header و دکمه بازگشت (در داخل صفحه) Customizing Header and Back Button (Within the Screen)

• تمرین: Stack Navigator RQ - Stack Navigator

• ناوبری تب‌ها (Tab Navigator) Tab Navigator

• سفارشی‌سازی دکمه‌های تب Customizing Tab Buttons

• تمرین: Tabs RQ - Tabs

• ناوبری کشویی (Drawer Navigation) Drawer Navigation

• سفارشی‌سازی Drawer Customizing Drawer

• تمرین: Drawer RQ - Drawer

• ناوبری تو در تو (Nested Navigator) Nested Navigator

مدیریت خطا Error Handling

• مقدمه Introduction

• درک خطاها در React Native Understanding Errors in React Native

• مدیریت خطای محلی با استفاده از بلوک Try Catch Local Error Handling Using Try-Catch Block

• مدیریت خطاهای سراسری با Error Boundaries Handling Global Errors with Error Boundaries

• مدیریت خطاهای API Handling API Errors

• افزودن پیام‌های خطای کاربرپسند Adding User-Friendly Error Messages

• استفاده از ErrorUtils برای مدیریت خطای سراسری Using ErrorUtils for Global Error Handling

• تمرین: مدیریت خطا RQ - Error Handling

ماژول‌های پلتفرم Platform Modules

• ماژول‌های مختص هر پلتفرم Platform-Specific Modules

• رندرینگ مختص پلتفرم Platform-Specific Rendering

• استایل‌های مختص پلتفرم Platform-Specific Styles

• پسوندهای/فایل‌های مختص پلتفرم Platform-Specific Extensions/Files

درخواست‌های HTTP و عملیات CRUD در Firebase HTTP Request & Firebase CRUD Operation

• مقدمه ماژول Firebase Module Introduction - Firebase

• مقدمه‌ای بر FetchAPI Introduction to FetchAPI

• ارسال داده (POST) با استفاده از Fetch API Post Data Using Fetch API

• پروژه: ارسال داده با استفاده از ورودی کاربر Task - Post Data Using User Input

• ارسال داده و اعتبارسنجی فرم (Form Validation) Post Data - Form Validation

• دریافت داده (GET) با استفاده از Fetch API Get Using Fetch API

• پروژه: دریافت رکوردها و نمایش لیست Task - Get the Records and Display the List

• به‌روزرسانی رکوردها با متد PATCH Updating Records - PATCH Call

• به‌روزرسانی جزئی رکوردها با متد PATCH Updating Partial Records - PATCH Call

• پروژه: به‌روزرسانی پویا رکوردها Task - Update Records Dynamically

• حذف رکوردها با متد HTTP Delete Deleting Records Using HTTP - Delete Method

• پروژه: حذف پویای رکوردها از لیست Task - Deleting Records Dynamically from the List

کار با HTTP و Axios HTTP with Axios

• مقدمه‌ای بر Axios Introduction to Axios

• ایجاد یک Instance از Axios Creating an Axios Instance

• کار با متد POST Working with POST Method

• کار با متد GET Working with GET Method

• کار با متد PATCH Working with PATCH Method

• کار با متد DELETE Working with DELETE Method

رابط کاربری (UI) User Interface (UI)

• چیدمان (Layout) Layout

• نمونه چیدمان با Header، محتوا و Footer (درک Flex) Sample Layout with Header, Content Area, and Footer (Understanding Flex)

• نمونه چیدمان: درک جهت‌های Flex (Flex Directions) Sample Layout - Understanding Flex Directions

• تمرین: Flex RQ - Flex

• نمونه چیدمان: درک تراز Justify Content Sample Layout - Understanding Justify Content Alignment

• نمونه چیدمان: AlignContent و AlignItem Sample Layout - AlignContent and AlignItem

• تمرین: ترازهای Flex RQ - Flex - Alignments

مدیریت ژست‌ها (Gesture Handling) Gesture Handling

• مقدمه Introduction

• ژست‌های Tap و Press Tap and Press Gesture

• ژست Pan (کشیدن و جابجا کردن) Pan Gesture (Drag & Move)

• ژست Pinch (بزرگ‌نمایی و کوچک‌نمایی) Pinch Gesture (Zoom In & Zoom Out)

• ژست چرخش (Rotation) Rotation Gesture

• ترکیب چندین ژست Combining Multiple Gestures

دوربین و انتخاب تصویر (Camera/ImagePicker) Camera/ImagePicker

• مقدمه Introduction

• پیکربندی Expo Image Picker Configuring Expo-Image-Picker

• اجرای دوربین Launching the Camera

• مدیریت دسترسی‌ها: دوربین در iOS Managing Permissions - Camera in iOS

• تنظیمات دوربین Camera Options

• رندر کردن تصویر گرفته شده Rendering the Clicked Image

• استفاده از Image Picker Using the Image Picker

• انتخاب چندین تصویر Selecting Multiple Images

• پروژه: محدود کردن تعداد تصاویر انتخابی Task - Limit the Number of Images Selected

نوتیفیکیشن‌های Push Push Notification

• مقدمه Introduction

• راه‌اندازی نوتیفیکیشن محلی (Local Notification) Local Notification Setup

• اولین نوتیفیکیشن First Notification

• مدیریت نوتیفیکیشن‌های دریافتی Handling the Incoming Notification

• واکنش به نوتیفیکیشن‌های دریافتی Reacting on Incoming Notification

• راه‌اندازی Push Notification Push Notification Setup

• کانال نوتیفیکیشن (Notification Channel) Notification Channel

• ارسال با ابزار Push Notification Pushing with the Push Notification Tool

• ارسال Push Notification با Expo API Sending Push Notification with Expo API

• اجرای Push Notification روی SDK 53 Running Push Notifications on SDK 53

ساخت اپلیکیشن React Native بدون Expo React Native App Without Expo

• مقدمه Introduction

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

• تمرین: Expo دقیقاً چگونه کار می‌کند؟ RQ - How Exactly Expo Does Work?

• جایگزین‌های ایجاد اپلیکیشن React Native Alternatives for React Native App Creation

• تمرین: جایگزین‌های ایجاد اپلیکیشن RQ - Alternatives for React Native App Creation

• ایجاد پروژه با React Native CLI Creating Project with React Native CLI

• تمرین: ایجاد پروژه با React Native CLI RQ - Creating Project with React Native CLI

• درک ساختار پروژه Understand Project Structure

• تمرین: Unit Test و Ruby Gems RQ - Unit Test & Ruby Gems

مکان‌یابی و نقشه Location/Map

• مقدمه Introduction

• راه‌اندازی قابلیت مکان‌یابی (Location) Setup for Location

• دریافت مکان دستگاه Fetching Device Location

• تمرین: دریافت مکان دستگاه RQ - Fetching Device Location

• راه‌اندازی نقشه Setting Up Map

• مشخص کردن مکان کاربر روی نقشه Locating User on the Map

• تمرین: مشخص کردن مکان کاربر روی نقشه RQ - Locating User on the Map

• مدیریت انتخاب مکان روی نقشه Handling Location Selection on Map

ساخت اپلیکیشن فروشگاه آنلاین Building E-Commerce Application

• مقدمه‌ای بر محدوده پروژه Introduction to the Scope of Work

• شروع ایجاد پروژه Commencing the Project Creation

• راه‌اندازی NativeWind CSS برای UI Setting Up NativeWind CSS for UI

• راه‌اندازی تب‌ها (Tabs) Setting Up the Tabs

• سفارشی‌سازی دکمه‌های تب Customizing Tab Buttons

• مدیریت Headerها در صفحات Taking Care of the Headers on Screen

• دریافت داده‌های محصولات Fetching the Products Data

• طراحی UI کارت محصول Creating the Product Card UI

• رندر کردن محصولات با کامپوننت FlatList Rendering Products Using FlatList Component

• پیاده‌سازی قابلیت جستجوی محصول Implementing Product Search Functionality

• راه‌اندازی مودال فیلتر Setting Up Filter Modal

• افزودن فیلترها Adding Filters

• دریافت دسته‌بندی‌های پویای محصولات Fetching Dynamic Product Categories

• تعاملی کردن فیلترها Making Filters Interactive

• اعمال فیلترها روی محصولات Applying Filters to the Products

• ایجاد صفحه جزئیات محصول Creating Product Details Screen

• کار روی UI جزئیات محصول Working on Product Details UI

• تکمیل UI جزئیات محصول Completing Product Details UI

• پیاده‌سازی Context API برای سبد خرید Implementing Context API for Cart

• پیاده‌سازی عملکرد سبد خرید Implementing Cart Functionality

• پیاده‌سازی UI سبد خرید Implementing Cart UI

• تکمیل UI سبد خرید Completing the Cart UI

• پیاده‌سازی خلاصه سبد خرید Implementing Cart Summary

• پیاده‌سازی صفحه ثبت‌نام (SignUp) Implementing Register (SignUp) Screen

• مدیریت مقادیر فرم ثبت‌نام Handling Register Form Values

• پیاده‌سازی صفحه ورود (Login) Implementing Login Screen

• بازنویسی (Refactoring) تب‌های ثبت‌نام و ورود Refactoring Register and Login Tabs

• پیاده‌سازی عملکرد ثبت‌نام Implementing Register (SignUp) Functionality

• دریافت جزئیات کاربر Fetching User Details

• پیاده‌سازی صفحه پروفایل Implementing Profile Screen

• عملکرد ورود به حساب Login Functionality

• مدیریت خطاهای نهایی Final Error Handling

اتصال درگاه پرداخت Stripe Integrating Stripe Payment Gateway

• راه‌اندازی درگاه پرداخت Stripe Stripe Payment Gateway Setup

• ایجاد API برای Payment Intent Creating API for Payment Intent

• یکپارچه‌سازی API مربوط به Payment Intent Integrating Payment Intent API

• اجرای PaymentSheet در Stripe Initiating PaymentSheet of Stripe

• فراخوانی API پرداخت (Checkout) Calling Checkout API