Mobile Apps


تعلم React Native

تعلم الاساسيات وقم ببناء تطبيق ايكومرس كامل

4.93 (70 reviews)


18 hours


May 2020

Last Update
Regular Price

Unlimited access to 30 000 Premium SkillShare courses

What you will learn

React Native


React Hooks


Working with REST APIs

Building ECommerce (Android & IOS) Application


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

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

. React components

. Props

. State

. Hooks

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

. React Native APIs (StyleSheet, Dimensions …)

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

. Expo

. React Native CLI

. Android Studio

. XCode

. Postman

. Reactotron

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

. redux, react-redux, redux-thunk

. react-navigation

. axios

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

. Transforming UI design into IOS & Android application

. Working with REST APIs or Backend


تعلم React Native
تعلم React Native
تعلم React Native
تعلم React Native


[1] Introduction


[2] What is React Native?

0. Introduction

1. What is React-Native?

2. What is React and its associated platforms(React-Dom, React-Native, ...)?

3. React-Native, React, and JavaScript all in one place

4. React-Native architecture(JavaScript thread, Native threads, Bridge)

[3] Environment Setup

0. Introduction

1. Different React Native environments

2. Snack

3. Editor

4. Expo CLI

5. React Native CLI[Android - Mac]

6. React Native CLI[Android - Other OSs]

7. Running on android physical device

8. React Native CLI[IOS - Mac]

9. Running on IOS physical device

10. Real app project structure

11. Opening Android application in Android Studio and IOS application in XCode

[4] React Basics

0. Introduction

1. What are React Components?

2. Building the first component

3. What is JSX?

4. Components data buckets(Props & state)

5. Using Props

6. Maintainability matters

7. Building reusable components

8. Handling Events

9. Building the first project component (AppButton)

10. Encapsulate loading behaviour of AppButton

11. Using state

12. Binding component methods

13. Building AddToCartButton Component

14. Functional vs. Class-based components

15. Component Lifecycle methods

16. React.Component vs. React.PureComponent

17. Building Timer component

18. React Hooks

19. useState hook

20. useEffect hook

21. Transform AddToCart to Functional component using Hooks

22. Transform Timer to Functional component using Hooks

[5] Styling

0. Introduction

1. style prop and StyleSheet API

2. style(layout & design)

3. Style properties

4. Layout using flexbox

5. Flexbox in React Native

6. Implementing Layouts using FlexBox

7. Understanding previously written styles

8. Accessibility matters

9. UI component kits

10. Responsiveness challenge

11. Different layout example

12. Scaling

13. Using react-native-size-matters

14. Using react-native-extended-stylesheet

15. Icons

16. Displaying icons using Image component

17. Displaying icons using react-native-svg

18. Displaying icons using react-native-vector-icons

19. Building reusable TextInput component

[6] Building App UI

0. Introduction

1. Building Login screen UI

2. Fixing AppButton component issue

3. Building ConfirmationCode screen UI

4. Building Category Component

5. Building Card component

6. Building Price component

7. Building Product component

8. Building Home screen UI

9. Building Category screen UI

10. Building Product screen UI

11. Fixing AddToCart component issue

12. Building IonIcon component

13. Building CartItem component UI

14. Building Cart screen UI

15. Building Checkout screen UI

16. Building Search screen UI

17. Building Account screen UI

18. Building UpdateProfile screen UI

19.Building AddAddress screen UI

20. Building Order component UI

21. Building Orders screen UI

[7] Lists

0. Introduction

1. Mapping array of data into ui components

2. Scrolling using ScrollView

3. How does ScrollView work?

4. keys

5. FlatList

6. SectionList

7. Use FlatList and SectionList for gigantic lists

8. FlatList and SectionList are PureComponents

9. Handy features using FlatList

10. Building Categories List

11. Building Products List

12. Building CartItems List

13. Building Orders List

[8] Navigation

0. Introduction

1. Introducing react-navigation terms

2. Installing react-navigation

3. Design your app navigation structure first

4. Switching between AuthStack and Home Tabs

5. Implementing Auth stack

6. Implementing Tab-based Home

7. Implementing tabs stacks

8. Navigating in Home tabs

9. Passing params to screens when navigating

10. SafeAreaView

11. Fixing SafeAreaView padding issue

[9] Handling user input

0. Introduction

1. Accessing user input

2. Validating user input

3. Regular Expressions

4. Realtime input validation and showing

5. Reusable input validation feedback ui

6. Reusable input validation logic

7. Handling and validating auth inputs

8. Custom useInput hook

9. TextInput props and methods

[10] Networking

0. Introduction

1. Networking terminology

2. Installing Postman and exploring project REST Api

3. Using fetch API

4. Using axios

5. Signing in

6. Confirming otp

7. Dealing with JSON Web Token(JWT)

8. Separation of concerns issue and data flow challenge

[11] State management using redux

0. Introduction

1. Flux data flow model

2. Minimal implementation of flux

3. Introducing redux

4. Installing and preparing redux

5. setToken, and setUser using redux

6. react-redux hooks instead of connect

7. ActionTypes constants and action creators

8. Async actions using redux-thunk middleware

9. Understanding middlewares with redux-logger

[12] Debugging

0. Introduction

1. In-app Developer Menu

2. Chrome

3. React-Dev-Tools

4. React-Native-Debugger

5. Reactotron

[13] Focusing on the project

0. Introduction

1. Showing meaningful error message for user on entering wrong otp

2. Handling signing in edge case

3. Signing user out

4. Fetching user data at start

5. No boilerplate actions through api-request-biolerplate-actions

6. Updating user name

7. Adding addresses

8. Minimum validation to user name and address inputs

9. Less pain in handling errors

10. Displaying addresses and selecting one

11. Fetching and displaying orders

12. Fetching and displaying home categories and products

13. Fetching category children categories

14. Displaying category children categories

15. Fetching and displaying category products through pagination

16. Finishing category screen

17. Fetching and displaying a given product

18. Fetching and displaying cart items

19. Displaying cart items count badge

20. Calculating total and navigating to Checkout screen

21. Checking out

22. Adding product to cart

23. Updating cart item (increase, decrease, remove)

24. Searching for a product

25. Polishing Account & Auth Stacks

26. Polishing Search Stack

27. Polishing Cart Stack

28. Polishing Home Stack

29. FlastLists and reference equality issue

30. Adding splash screen on Android

31. Adding splash screen on IOS

[14] Publishing & Conclusion

0. Introduction

1. Publishing Android app

2. Publishing IOS app

3. Conclusion




Synchronous VS. Asynchronous

Pure Functions

Shallow Comparison VS. Deep Comparison

Memory Leak and Garbage Collection


Hassan4 February 2021

one of the best content on React native. and I learned a lot of experience .and many tool in this course . and learned how to debugging code and write code more clean.. thanks ...... Eng Hossam

Anas11 December 2020

حقيقي أفضل كورس React Native موجود. بيشرح بالطريقة اللي بيتم فيها الشغل في الشركات، وبيركز على أهم النقاط، واللي كتير منها مش موجود في كورسات تانية.

Mohamed4 December 2020

I completed this course and this is best way to learn about react-native framework in Arabic and learn how to building mobile apps on Android and ios easy thanks Mr.Hosam

Momentu22 August 2020

The course is great, I really liked it it's recommended for anyone who wants to get started with React native, it only requires having good knowledge with JavaScript, the explanation and examples are so clear, it focused well on all the basics you will use in RN and how to debug, perfect course and instructor thank you !

Alaa28 July 2020

this course very usefull for all mobile developers have good content redux and hooks have good ecommerce project vet good pro hossam

Bassam7 July 2020

it's very good course recommended for everyone who want to start RN career , but it's above beginners a Little , you have to already know about JavaScript and already have background in React or React native thats all.


10/1/202095% OFFExpired
11/17/2020100% OFFExpired


Udemy ID


Course created date


Course Indexed date
Course Submitted by