Mô tả

ملحوظة: عذرا الخادم الخاص بالمشروع الذي يتم بناءه في المساق لم يعد يعمل، تستطيع تعلم المساق ولكن لن تتمكن من بناء المشروع بشكل كامل


في هذا المساق ستتعلم اساسيات الرياكت والرياكت نيتف وريدكس،وكيفية استخدامهم في بناء تطبيقات الموبايل باستخدام لغة جافاسكريبت، كما ستتعلم مجموعة من الادوات والمكتبات والمهارات التي ستمكنك من بناء ونشر تطبيق ايكومرس كامل.


ومن اهم هذه الأساسيات:

. React components

. JSX

. Props

. State

. React Native Components (View, Text, TextInput, Image, FlatList …)

. React Native APIs (StyleSheet, Dimensions …)

. Hooks (useState, useEffect)


ومن أهم هذه الأدوات:

. Expo

. React Native CLI

. Android Studio

. XCode

. Adobe XD

. Postman

. Reactotron


ومن أهم هذه المكتبات:

. redux, react-redux, redux-thunk

. react-navigation

. axios


ومن أهم هذه المهارات:

. Transforming UI design into IOS & Android application

. Working with REST APIs or Backend

. Modeling real world applications

. Using css-like styles

. Building layouts using Flexbox

. Dealing with responsiveness issues

. Using icons

. Building navigators

. Implementing auth workflows using JWT

. Handling user input

. Validating user input

. Working with Regular expressions

. Debugging

. Publishing Android apps to Google Play store

. Publishing IOS apps to App store


متطلبات المساق:

حتى تستطيع فهم المساق بشكل جيد وبناء مشروع ايكومرس خلال المساق لابد من وجود معرفة مسبقة بلغة جافاسكريبت، لا يتطلب معرفة متقدمة ولكن أساسيات اللغة:

- Variables and Data Types

- Functions and Scope

- Control Flow(If-Else, Switch) and Loops

- Arrays and Objects

Bạn sẽ học được gì

React Native

React

React Hooks

Redux

Working with REST APIs

Building ECommerce (Android & IOS) Application

Yêu cầu

  • JavaScript

Nội dung khoá học

15 sections

[1] Introduction

1 lectures
Introduction
13:24

[2] What is React Native?

5 lectures
0. Introduction
00:31
1. What is React-Native?
02:16
2. What is React and its associated platforms(React-Dom, React-Native, ...)?
02:01
3. React-Native, React, and JavaScript all in one place
01:40
4. React-Native architecture(JavaScript thread, Native threads, Bridge)
01:53

[3] Environment Setup

12 lectures
0. Introduction
00:41
1. Different React Native environments
03:19
2. Snack
01:54
3. Editor
01:34
4. Expo CLI
02:59
5. React Native CLI[Android - Mac]
11:43
6. React Native CLI[Android - Other OSs]
02:13
7. Running on android physical device
01:55
8. React Native CLI[IOS - Mac]
04:27
9. Running on IOS physical device
01:15
10. Real app project structure
08:59
11. Opening Android application in Android Studio and IOS application in XCode
01:30

[4] React Basics

23 lectures
0. Introduction
00:34
1. What are React Components?
00:52
2. Building the first component
07:20
3. What is JSX?
05:11
4. Components data buckets(Props & state)
06:44
5. Using Props
04:44
6. Maintainability matters
05:20
7. Building reusable components
06:19
8. Handling Events
01:54
9. Building the first project component (AppButton)
06:13
10. Encapsulate loading behaviour of AppButton
02:42
11. Using state
05:56
12. Binding component methods
04:00
13. Building AddToCartButton Component
08:14
14. Functional vs. Class-based components
03:13
15. Component Lifecycle methods
06:38
16. React.Component vs. React.PureComponent
01:51
17. Building Timer component
19:58
18. React Hooks
01:41
19. useState hook
04:05
20. useEffect hook
03:53
21. Transform AddToCart to Functional component using Hooks
02:19
22. Transform Timer to Functional component using Hooks
08:03

[5] Styling

20 lectures
0. Introduction
00:36
1. style prop and StyleSheet API
04:25
2. style(layout & design)
01:02
3. Style properties
01:10
4. Layout using flexbox
05:49
5. Flexbox in React Native
07:08
6. Implementing Layouts using FlexBox
13:10
7. Understanding previously written styles
01:24
8. Accessibility matters
02:28
9. UI component kits
01:26
10. Responsiveness challenge
01:21
11. Different layout example
20:58
12. Scaling
05:16
13. Using react-native-size-matters
03:54
14. Using react-native-extended-stylesheet
03:17
15. Icons
04:49
16. Displaying icons using Image component
02:18
17. Displaying icons using react-native-svg
09:17
18. Displaying icons using react-native-vector-icons
07:03
19. Building reusable TextInput component
19:34

[6] Building App UI

22 lectures
0. Introduction
00:25
1. Building Login screen UI
10:59
2. Fixing AppButton component issue
02:37
3. Building ConfirmationCode screen UI
03:37
4. Building Category Component
07:01
5. Building Card component
06:44
6. Building Price component
09:18
7. Building Product component
02:50
8. Building Home screen UI
04:13
9. Building Category screen UI
02:08
10. Building Product screen UI
19:38
11. Fixing AddToCart component issue
01:51
12. Building IonIcon component
03:26
13. Building CartItem component UI
05:45
14. Building Cart screen UI
05:55
15. Building Checkout screen UI
13:27
16. Building Search screen UI
03:37
17. Building Account screen UI
13:28
18. Building UpdateProfile screen UI
04:55
19.Building AddAddress screen UI
01:23
20. Building Order component UI
05:37
21. Building Orders screen UI
01:54

[7] Lists

14 lectures
0. Introduction
00:31
1. Mapping array of data into ui components
03:33
2. Scrolling using ScrollView
02:24
3. How does ScrollView work?
03:10
4. keys
02:46
5. FlatList
02:42
6. SectionList
02:49
7. Use FlatList and SectionList for gigantic lists
02:15
8. FlatList and SectionList are PureComponents
09:00
9. Handy features using FlatList
02:50
10. Building Categories List
03:17
11. Building Products List
05:08
12. Building CartItems List
03:23
13. Building Orders List
01:44

[8] Navigation

12 lectures
0. Introduction
00:34
1. Introducing react-navigation terms
02:38
2. Installing react-navigation
02:18
3. Design your app navigation structure first
01:44
4. Switching between AuthStack and Home Tabs
02:59
5. Implementing Auth stack
04:26
6. Implementing Tab-based Home
11:21
7. Implementing tabs stacks
04:29
8. Navigating in Home tabs
09:51
9. Passing params to screens when navigating
03:16
10. SafeAreaView
02:24
11. Fixing SafeAreaView padding issue
01:33

[9] Handling user input

10 lectures
0. Introduction
00:39
1. Accessing user input
02:25
2. Validating user input
04:08
3. Regular Expressions
03:20
4. Realtime input validation and showing feedback
03:16
5. Reusable input validation feedback ui
05:36
6. Reusable input validation logic
08:39
7. Handling and validating auth inputs
08:18
8. Custom useInput hook
03:55
9. TextInput props and methods
03:26

[10] Networking

9 lectures
0. Introduction
00:46
1. Networking terminology
07:23
2. Installing Postman and exploring project REST Api
02:54
3. Using fetch API
09:50
4. Using axios
05:10
5. Signing in
08:48
6. Confirming otp
06:40
7. Dealing with JSON Web Token(JWT)
11:39
8. Separation of concerns issue and data flow challenge
02:54

[11] State management using redux

10 lectures
0. Introduction
00:29
1. Flux data flow model
07:16
2. Minimal implementation of flux
16:50
3. Introducing redux
04:25
4. Installing and preparing redux
05:18
5. setToken, and setUser using redux
15:44
6. react-redux hooks instead of connect
02:30
7. ActionTypes constants and action creators
03:17
8. Async actions using redux-thunk middleware
25:00
9. Understanding middlewares with redux-logger
02:04

[12] Debugging

6 lectures
0. Introduction
00:38
1. In-app Developer Menu
04:31
2. Chrome
01:23
3. React-Dev-Tools
02:16
4. React-Native-Debugger
02:51
5. Reactotron
06:55

[13] Focusing on the project

32 lectures
0. Introduction
00:20
1. Showing meaningful error message for user on entering wrong otp
10:01
2. Handling signing in edge case
06:20
3. Signing user out
11:05
4. Fetching user data at start
03:25
5. No boilerplate actions through api-request-biolerplate-actions
11:38
6. Updating user name
14:51
7. Adding addresses
06:54
8. Minimum validation to user name and address inputs
09:54
9. Less pain in handling errors
01:07
10. Displaying addresses and selecting one
08:43
11. Fetching and displaying orders
12:01
12. Fetching and displaying home categories and products
14:37
13. Fetching category children categories
08:05
14. Displaying category children categories
12:31
15. Fetching and displaying category products through pagination
23:05
16. Finishing category screen
08:09
17. Fetching and displaying a given product
09:18
18. Fetching and displaying cart items
08:22
19. Displaying cart items count badge
07:08
20. Calculating total and navigating to Checkout screen
04:14
21. Checking out
22:32
22. Adding product to cart
17:21
23. Updating cart item (increase, decrease, remove)
11:43
24. Searching for a product
16:42
25. Polishing Account & Auth Stacks
13:22
26. Polishing Search Stack
07:01
27. Polishing Cart Stack
06:32
28. Polishing Home Stack
10:12
29. FlastLists and reference equality issue
05:38
30. Adding splash screen on Android
03:08
31. Adding splash screen on IOS
02:02

[14] Publishing & Conclusion

4 lectures
0. Introduction
00:24
1. Publishing Android app
16:48
2. Publishing IOS app
10:23
3. Conclusion
02:08

Terminology

6 lectures
API
01:42
Thread
00:36
Synchronous VS. Asynchronous
02:35
Pure Functions
02:48
Shallow Comparison VS. Deep Comparison
02:15
Memory Leak and Garbage Collection
06:33

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.