آموزش دوره کامل React Native

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

معرفی Introduction

• معرفی Introduction

• واکنش بومی چیست What is react native

• IDE (ویرایشگر کد) IDE ( code editor )

• ابتدا MAC USERS را نصب کنید First install MAC USERS

• ابتدا WINDOWS USERS را نصب کنید First install WINDOWS USERS

اجرای شبیه سازها و تنظیم محیط Running simulators and setting up enviroment

• اکسپو یا نه اکسپو Expo or not expo

• در حال نصب XCODE Installing XCODE

• نصب اندروید استودیو MAC & WINDOWS Installing Android studio MAC & WINDOWS

• متغیرهای محیطی MAC ONLY Environment variables MAC ONLY

• متغیرهای محیطی WINDOWS ONLY Environment variables WINDOWS ONLY

• رفع سریع ویندوز برای نمایشگاه Windows quick fix for expo

• اجرای یک برنامه نمایشگاهی Running an expo app

• برنامه بدون نمایشگاه App without expo

• اجرای شبیه ساز اندروید Running the Android simulator

• اجرای شبیه ساز IOS Running the IOS simulator

مبانی RN RN Basics

• شروع با RN (در نهایت) Starting with RN ( finally )

• سبک ها، شیوه نامه ها، نماها و متن Styles, stylesheets, views and text

• اجزاء و حالت Components and state

• رویدادها را لمس کنید Touch events

• رویدادهای لمسی قسمت 2 Touch events part 2

• ورودی های متن Text inputs

• دکمه ها Buttons

• نمای طومار The scrollview

• نشانگر فعالیت Activity indicator

• کار با تصاویر Working with images

• با استفاده از مدال Using modals

• نشانگر فعالیت Activity indicator

• کار با تصاویر Working with images

جهت یابی Navigation

• معرفی Introduction

• در حال نصب ناوبری Installing navigation

• ناوبری پشته Stack navigation

• کار با Params Working with Params

• نوار ناوبری Navigation bar

• دکمه های ناوبری Navigation buttons

• دراور کناری The sidedrawer

• بیشتر در کشو کناری More on the sidedrawer

• ساید کش سفارشی Custom sidedrawer

• ناوبری برگه Tab navigation

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

کار با کتابخانه ها Working with libraries

• نصب انتخابگر تصویر Installing the image picker

• با استفاده از انتخابگر تصویر Using the image picker

• نصب کتابخانه مخاطبین Installing the contacts library

• حل مسائل Solving issues

• با استفاده از کتابخانه مخاطبین Using the contacts library

• نصب عناصر بومی React Installing react native elements

• استفاده از عناصر بومی React Using react native elements

بیشتر در مورد react native More on react native

• اشکال زدایی Debugging

• اجزای قابل استفاده مجدد Reusable components

• پلت فرم The platform

• تصاوير متحرك Animations

• بیشتر در مورد کامپ متحرک More on the animated comp

• درون یابی Interpolation

• انیمیشن های موازی و توالی Parallel and sequence animations

• ایجاد نمادهای راه اندازی [اختیاری] Creating Launch icons [ optional ]

• نصب Splash Screen [ اختیاری ] Installing Splash Screen [ optional ]

• IOS صفحه نمایش اسپلش [اختیاری] Splash screen IOS [ optional ]

• صفحه نمایش اسپلش اندروید [ اختیاری ] Splash screen Android [ optional ]

• درون یابی Interpolation

پروژه تمرین کوچک: چه کسی صورتحساب را پرداخت می کند؟ [ اختیاری ] Tiny practice project: Who pays the bill ? [ optional ]

• نصب و زمینه Installation and context

• ایجاد ورودی و اعتبارسنجی Creating the input and validation

• ایجاد لیست بازیکنان Creating the list of players

• شروع مرحله 2 و نان تست Starting the stage 2 and toasts

• ایجاد مرحله 2 Creating the stage 2

• نصب فونت و تکمیل برنامه Installing fonts and finishing app

ادغام redux و firebase Integrating redux and firebase

• نصب redux Installing redux

• ارسال یک اقدام Dispatching an action

• یکپارچه سازی firebase و ایجاد فرم ها Integrating firebase and creating forms

• ثبت نام و ورود به سیستم با firebase Register and log ing with firebase

• ارسال یک اقدام Dispatching an action

پروژه تمرین - RedWire Practice project - RedWire

• معرفی Introduction

• نصب و راه اندازی Installation

• راه اندازی redux Setting up redux

• ناوبری قسمت اول Navigation part one

• ناوبری قسمت دوم Navigation part two

• ساید کش سفارشی Custom sidedrawer

• ساید کش سفارشی Custom sidedrawer

• نصب فونت Installing fonts

• هدر را دلال محبت کنید Pimp the header

• ایجاد کارت های مقاله Creating the article cards

• ایجاد صفحه مقالات Creating the articles screen

• ایجاد صفحه نمایش فیلم ها Creating the videos screen

• افزودن ویدیوهای یوتیوب Adding youtube videos

• ایمیل و رمز عبور از نمایه Email and password from profile

• ایجاد فرم داده های کاربر Creating the userdata form

• صفحه ورود کاربران قسمت اول Login users screen part one

• صفحه ورود کاربران قسمت دوم Login users screen part two

• شروع پروژه فایربیس Starting a firebase project

• ثبت نام کاربران Register users

• ورود کاربران Login users

• کاربران ثبت نام خودکار Autosignin users

• خروج از کاربر و رفع ورود خودکار Logout user and fixing autosign in

• به روز رسانی نمایه کاربر قسمت 1 Updating user profile part 1

• به روز رسانی نمایه کاربر قسمت 2 Updating user profile part 2

• گرفتن مقالات Getting articles

• در حال واکشی مقالات بیشتر Fetching more articles

• نمایش داده های مقاله Showing article data

• در حال واکشی ویدیوها Fetching videos

• در حال واکشی ویدیوهای بیشتر Fetching more videos

پروژه تمرین: برنامه NBA [Legacy - RN نسخه 5.X] Practice project : NBA app [Legacy - RN Version 5.X]

• نمای کلی پروژه Project overview

• نصب react و dependencies Installing react and dependencies

• راه اندازی Redux Setting up Redux

• افزودن پیمایش React Adding React navigation

• افزودن React Navigation ..ادامه دارد Adding React navigation ..continued

• لوگوی ورود و پس زمینه Login logo and background

• ورودی های قابل استفاده مجدد را تشکیل دهید Form reusable inputs

• ورودی های تکمیل و حالت خطا Finishing inputs and error state

• اضافه کردن دکمه ها Adding the buttons

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

• در حال اتمام اعتبار سنجی Finishing validation

• در حال ارسال فرم Submitting the form

• استفاده از redux قبل از سرور Using redux before server

• کاربر را ثبت نام کنید Sign up the user

• ورود کاربر Sign in user

• ذخیره توکن در حافظه Saving the token on the storage

• افزودن ورود خودکار Adding the Auto sign in

• حالت دادن به برگه هدر Styling the header tab

• نمادها و سبک در نوار پایین Icons and style on the bottom bar

• نمادها و سبک در نوار پایین - قسمت دوم Icons and style on the bottom bar - part two

• تهیه خبر Preparing the news

• نمایش کارت های خبری Showing News cards

• در حال تکمیل کارت های خبری Finishing the News cards

• نصب و استفاده از فونت ها Installing and using fonts

• ایجاد مقاله اخبار Creating the News article

• گرفتن بازی ها از F.Base Getting the games from F.Base

• دریافت بازی ها از F.Base - قسمت 2 Getting the games from F.Base - part 2

• اتمام صفحه اصلی بازی Finishing the games main screen

• ایجاد صفحه ویدیوی بازی ها Creating the Games Video screen

• در حال اتمام صفحه ویدیوی بازی ها Finishing the Games video screen

• کد نهایی پروژه Final project code

React native [Legacy - RN نسخه 5.X] React native [Legacy - RN Version 5.X]

• معرفی Introduction

• معرفی Introduction

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

• شروع با RN Starting with RN

• نصب ابزار (MAC USERS) Installing tools ( MAC USERS )

• نصب ابزار ( WINDOWS USERS ) Installing tools ( WINDOWS USERS )

• نصب ANDROID STUDIO (کاربران Mac و Win) Installing ANDROID STUDIO ( Mac and Win users )

• خارج کردن برنامه های نمایشگاهی Ejecting expo apps

• اجرای شبیه ساز اندروید (کاربران WIN و MAC) Running Android simulator ( WIN and MAC users )

• متغیرهای محیط ویندوز (کاربران WIN) Windows environment variables ( WIN users )

• در حال اجرا در اکسپو Running on Expo

• در حال اجرا شبیه ساز IOS (کاربران MAC) Running IOS simulator ( MAC users )

• ابتدا به ساختار نگاه کنید First look at the structure

• سبک ها، نماها و متن Styles, Views and Text

• دکمه ها و رویدادهای لمسی Buttons and touch events

• اجزا و حالت Components and State

• بیشتر در مورد لمسی ها More on touchables

• مدیریت ورودی ها Handling inputs

• افزودن کاربران به لیست Adding users to the list

• با استفاده از Scrollview Using the Scrollview

• جزء جمع کننده The picker component

• مولفه اسلایدر (0.58.6) The Slider component ( 0.58.6 )

• نشانگر فعالیت Activity indicator

• کار با تصاویر Working with images

• استفاده از Modals Using Modals

• مقدمه ای برای ناوبری واکنش Intro to react navigation

• نصب R.Navigation و اجرای Sim Installing R.Navigation and running Sim

• ناوبر پشته و صفحه های پیوند دهنده Stack navigator and linking screens

• پارامترهای ناوبری Navigation params

• سفارشی کردن نوار هدر Customizing the Header Bar

• اضافه کردن لوگو به هدرها Adding logos to headers

• ایجاد یک کشو جانبی Creating a Side-drawer

• اطلاعات بیشتر در مورد کشو جانبی More on Side-drawer

• جزء سفارشی برای کشو جانبی Custom component for Side-drawer

• ایجاد یک ناوبری پایین Creating a bottom Navigation

• نوار ناوبری - گزینه ها Tab Navigation-Options

• ترکیب انواع ناوبری Combining navigation types.

• نصب انتخابگر تصویر ( پیوند ) Installing Image picker ( link )

• اگر انتخابگر تصویر با مشکل مواجه شد، به صورت دستی نصب کنید If image picker fails, manual install

• استفاده از دوربین و کتابخانه عکس Using camera and photo library

• نصب مخاطبین RNative Installing RNative contacts

• افزودن تماس و باز کردن فرم Adding contact and opening form

• دریافت مخاطبین Getting contacts

• نصب آیکون های برداری RNative installing RNative vector icons

• استفاده از نمادهای برداری RNative Using RNative vector icons

• React debugger native React native debugger

• استفاده مجدد از اجزا و سبک ها Reusing components and styles

• بیشتر در پلت فرم More on the platform

• ابعاد Dimensions

• کتابخانه شخص ثالث اطلاعات دستگاه Device info 3rd party library

• ساخت انیمیشن های XY Creating XY animations

• تسهیل کننده و محرک Easing and triggers

• نه انیمیشن های XY Not XY animations

• درون یابی Interpolation

• انیمیشن های توالی و زمان بندی Sequence and timing animations

• اتصال Redux Connecting Redux

• ارسال یک اقدام Dispatching an action

• اتصال ابزارهای توسعه Connecting the devtools

دوره کوتاه وب React [ اختیاری ] - مبانی React web mini-course [ optional ] - Basics

• نصب Node و ایجاد اپلیکیشن Installing Node and creating an App

• بسته نرم افزاری The bundle

• شروع به کدنویسی!! Starting to code !!

• JSX پشت صحنه JSX Behind the scenes

• واردات قطعات Importing components

• انواع قطعات Types of components

• اضافه کردن سبک ها Adding styles

• مناسبت ها Events

• حالت State

• شروع با لوازم جانبی Starting with props

• شروع با لوازم...ادامه دارد Starting with props...continued

• لوازم جانبی برای یک کلاس Props to a Class

• بچه ها واکنش نشان دهید React children

• بیشتر با سبک ها More with styles

• پلاگین های سبک Styles plugins

• اخبار را فیلتر کنید Filter the news

• مسیرها: نصب روتر Routes:Installing Router

• مسیرها: نحوه کار و ایجاد اجزا Routes:How it works and creating components

• مسیرها: استفاده از مسیرها Routes:Using routes

• مسیرها: پیوند Routes:Linking

• مسیرها: کار با پارامترها Routes:Working with params

• مسیرها: سایر ویژگی های React Router Routes:Other features from React Router

• مسیرها: سوئیچ Routes:Switch

• مسیرها: تغییر مسیرها Routes:Redirections

• مسیرها: 404 و "withRouter" Routes:404 and "withRouter"

• چرخه عمر قطعات Component lifecycles

• چرخه عمر اجزا 2 Component lifecycles 2

• رندر مشروط Conditional rendering

• اجزای خالص Pure components

• عناصر مجاور Adjacent elements

• Hoc's (قطعات مرتبه بالا) Hoc's ( High order components )

• Hoc's ... ادامه دارد Hoc's ...continued

• انیمیشن ها: استفاده از انتقال Animations: Using transitions

• انیمیشن ها: با استفاده از انتقال .... ادامه دارد Animations: Using transitions....continued

• انیمیشن ها: CSS Transitions Animations: CSS Transitions

• انیمیشن ها: گروه انتقال Animations: Transition group

• پروپتایپ ها Proptypes

• Proptypes ... ادامه دارد Proptypes...continued

• اجزای کنترل شده Controlled components

مینی دوره وب React [ اختیاری ] - Redux React web mini-course [ optional ] - Redux

• معرفی Redux Redux introduction

• ایجاد فروشگاه Creating the store

• جریان Redux The Redux flow

• ترکیب کاهنده ها Combining reducers

• ایجاد یک کاهنده معتبر Creating a valid reducer

• ایجاد کنش ها Creating actions

• نقشه-وضعیت-به-پاپ و اتصال map-state-to-props and connect

• نقشه-ارسال به وسایل Map-dispatch-to-props

• انواع Types

• استفاده از میان افزار Using middleware

• تمرین Redux - ایجاد پروژه Redux practice - Creating the project

• تمرین Redux - مسیرها و redux Redux practice - routes and redux

• تمرین Redux - صفحه اصلی Redux practice - Home

• تمرین Redux - لیست خانه را فیلتر کنید Redux practice - Filter the home list

• تمرین Redux - بخش هنرمند Redux practice - Artist section

• تمرین Redux - پاک کردن داده‌های هنرمند Redux practice - Clearing artist data

مینی دوره وب React [ اختیاری ] - Hooks React web mini-course [ optional ] - Hooks

• مقدمه ای بر هوکز Introduction to Hooks

• قلاب "useState". The "useState" Hook

• قلاب "useState" ....ادامه دارد The "useState" Hook ....continued

• قلاب "useEffect". The "useEffect" Hook

• قلاب "useReducer". The "useReducer" Hook

• آماده سازی برنامه با Context Preparing the app with Context

• Context و useContext Context and useContext