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

دانلود React Native Fundamentals & UI Design

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره: این دوره شامل مربی هوشمند Coursera Coach است! روشی هوشمندانه برای یادگیری با گفتگوهای تعاملی و آنی که به شما کمک می‌کند دانش خود را آزمایش کنید، پیش‌فرض‌ها را به چالش بکشید و در حین پیشروی در دوره، درک خود را عمیق‌تر کنید. این دوره شما را با ضروریات ساخت اپلیکیشن‌های موبایل با React Native آشنا می‌کند؛ از جمله خلق طراحی‌های خیره‌کننده UI، درک کامپوننت‌های اصلی و یکپارچه‌سازی APIها. شما مهارت‌های لازم برای طراحی اپلیکیشن‌های کاربردی و جذاب بصری را کسب خواهید کرد که در هر دو پلتفرم iOS و اندروید به درستی اجرا شوند. با ترکیبی از تمرینات کدنویسی عملی و تکنیک‌های طراحی UI، شما برای ساخت اپلیکیشن‌های شخصی خود با React Native کاملاً آماده خواهید شد. دوره با معرفی React Native، پیش‌نیازهای موفقیت و راه‌اندازی محیط توسعه از جمله Expo Snack آغاز می‌شود. در ادامه، تجربه عملی با کامپوننت‌های رابط کاربری React Native مانند SafeAreaView، Text و Buttons کسب خواهید کرد. سپس به مباحث پیشرفته‌تری مانند ساخت UI واکنش‌گرا (Responsive) با استفاده از Flexbox، انیمیشن‌ها و اتصال به APIها برای دریافت داده‌ها خواهید پرداخت. همچنین استفاده از Redux برای مدیریت وضعیت (State Management) را بررسی می‌کنید تا تجربه‌ای روان و یکپارچه در اپلیکیشن ایجاد کنید. مسیر یادگیری شما شامل طراحی کامپوننت‌های سفارشی مانند هدرها، دکمه‌ها و آواتارهای کاربر، ساخت سیستم‌های ناوبری (Navigation) موثر و مدیریت تعاملات کاربر است. همچنین یاد می‌گیرید که چگونه داده‌های واقعی اپلیکیشن را با کمک APIها، Axios و Redux مدیریت کنید. شما با چالش‌های توسعه واقعی روبرو می‌شوید تا اپلیکیشن‌هایتان را کاملاً کاربردی کنید. در پایان دوره، یک اپلیکیشن کامل با React Native خواهید ساخت که تمامی ویژگی‌های آموخته شده را در بر گیرد. این دوره برای هر کسی که به توسعه موبایل، طراحی UI و ساخت اپلیکیشن با React Native علاقه‌مند است، ایده‌آل است. چه مبتدی باشید و چه با برنامه‌نویسی آشنا باشید، این دوره به شما کمک می‌کند مهارت‌های خود را ارتقا داده و برای ورود به صنعت توسعه اپلیکیشن آماده شوید. در پایان این دوره، شما قادر خواهید بود رابط‌های کاربری واکنش‌گرا طراحی کنید، اپلیکیشن‌های React Native بسازید، APIها را یکپارچه کنید، وضعیت جهانی (Global State) را با Redux مدیریت کنید و به راحتی در صفحات اپلیکیشن جابجا شوید. همچنین در زمینه دیباگ کردن و بهینه‌سازی اپلیکیشن‌ها برای عملکرد بهتر، تخصص کسب خواهید کرد.

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

ری‌اکت نیتیو | شروع به کار 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

نمایش نظرات

آموزش مبانی ری‌اکت نیتیو (React Native) و طراحی رابط کاربری (UI)
جزییات دوره
11h 42m
92
(آخرین آپدیت)
55
- از 5
دارد
دارد
دارد
Chris Croft
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Chris Croft Chris Croft

مربی مدیریت، سخنران، نویسنده