آموزش مبانی ری‌اکت نیتیو (React Native) و طراحی رابط کاربری (UI) - آخرین آپدیت

ری‌اکت نیتیو | شروع به کار React Native | Getting Started

• معرفی تخصص Introduction to Specialization

• پیش‌نیازهای دوره Course Prerequisites

• ری‌اکت نیتیو چیست؟ What Is React Native

• معرفی Expo Snack Introduction to Expo Snack

• راه‌اندازی محیط توسعه Set Up Environment

• ساخت اولین اپلیکیشن Create Your First App

• شبیه‌ساز iOS (در MacOS) iOS Simulator (MacOS)

• اجرای اپلیکیشن روی دستگاه واقعی Run App on Real Device

• شبیه‌ساز اندروید (در MacOS) Android Emulator (MacOS)

• راه‌اندازی محیط در ویندوز Setup Environment Windows

رابط کاربری و کامپوننت‌های اصلی UI & Core Components

• توضیح کدهای اولیه Explain Init Code

• SafeAreaView SafeAreaView

• کامپوننت Text Text

• StyleSheet StyleSheet

• تصاویر (Images) Images

• دکمه‌ها و Pressable و Touchable Buttons & Pressable & Touchable

• ScrollView ScrollView

• Platform Platform

• لودرها (Loaders) Loaders

• Viewها Views

• حاشیه و فاصله (Margin & Padding) Margin & Padding

• Flex Flex

• جهت فلکس (flex direction) flex-direction

• flexWrap flexWrap

• موقعیت‌ها (Positions) Positions

• ابعاد (Dimensions) Dimensions

• رابط کاربری واکنش‌گرا (Responsive UI) Responsive UI

• هوک useState useState Hook

• مودال (Modal) Modal

• آیکون‌های Expo Expo Icons

• ImageBackground ImageBackground

• TextInput TextInput

• ساخت کامپوننت ری‌اکت Create React Component

تمرین‌های پیشرفته طراحی UI UI Mastering Practice

• مقدمه‌ای بر تسلط در UI UI Mastering Introduction

• طراحی با فیگما (Figma) Figma Design

• مقایسه PNG و SVG PNG vs SVG

• صفحه معرفی (Intro Screen) Intro Screen

• آواتار کاربر User Avatar

• کامپوننت هدر Header Component

• بخش شبکه‌های اجتماعی Social Section

• کانتینر شبکه‌های اجتماعی Social Container

• تکمیل صفحه تماس با ما Finish Contact Us Screen

• هدر صفحه اصلی Home Screen Header

• تب‌های بالا (Top Tabs) Top Tabs

• کامپوننت کارت با لایه تیره Card Component with Dark Overlay

• FlatList با دو ردیف FlatList with 2 Rows

• FlatList با استفاده از Props FlatList with Props

• هدر صفحه پرداخت Payment Screen Header

• متد پرداخت Payment Method

• انتخاب متد پرداخت Payment Method Selected

• لیست پرداخت‌ها Payment List

• باکس کارت بانکی Bank Card Box

• دکمه افزودن Add Button

• افزودن انیمیشن‌ها Adding Animations

• زمان تمرین و پروژه Task Time

ناوبری و تب‌های پایین (Bottom Tabs) Navigation & Bottom Tabs

• ساخت صفحات Builds Screens

• ناوبری استکی (Stack Navigation) Stack Navigation

• مرور و تنظیمات صفحات Recap & Screen Options

• هوک useRoute useRoute

• تب‌های پایین (BottomTabs) BottomTabs

کار با APIها Working with APIs

• ساخت اپلیکیشن جدید Create New App

• ساخت API سفارشی (Mock API) Create Custom API (Mock API)

• کتابخانه Axios Axios

• درخواست Get و FlatList Get Request & FlatList

• درخواست Get بر اساس ID Get By Id Request

• مدیریت خطا با Try Catch Try Catch

• درخواست حذف (Delete) Delete Request

• درخواست ارسال (Post) Post Request

• درخواست ویرایش (Put) Put Request

• بازنویسی و ساخت صفحه اصلی برای پروژه جدید Refactor and Create Home Screen for New Project

• کارت کتاب Book Card

• Props Props

• توابع API APIs Functions

• نمایش داده‌ها در FlatList Render Data in FlatList

• حذف کتاب Delete Book

• طراحی دکمه افزودن و مودال Add Button UI & Modal

• TextInput سفارشی CustomTextInput

• دکمه ذخیره Save Button

• ساخت کتاب Create Book

• ویرایش کتاب Edit Book

• رفع باگ‌ها Bug Fix

ریداکس و ریداکس تولکیت Redux & Redux Toolkit

• ریداکس آنقدرها سخت نیست Redux is not that hard

• چرا ریداکس مفید است؟ Why Redux is Useful

• توضیح Reducer Reducer Explained

• ساخت Store و دریافت داده از وضعیت جهانی Create Store and Get Data From Global State

• اکشن‌ها (Actions) و useDispatch Actions & useDispatch

• مفهوم Payload Payload

• ترکیب ریدوسرها (Combine Reducers) Combine Reducers

• RootState RootState

• مرور ریداکس و تمرین Recap Redux & Task

• استور ریداکس تولکیت (Redux Toolkit Store) Redux Toolkit Store

• ریدوسر و اکشن‌های ریداکس تولکیت Redux Toolkit Reducer & Actions