React Native Web & Apps Development

React Native enables you to build iOS , Web and Android appliaction and benefit from code reuse cross platform.

Instructor: Asif Hanif
Last updated Thu, 09-Jun-2022
+ View more
Course overview

Course Description

React Native enables you to build iOS , Web and Android appliaction and benefit from code reuse cross platform. React Native is an exciting new language backed by Facebook that allows you to create a native mobile experience on Android, Web and iOS devices through a common coding experience. Apps can be developed fast using popular free text editors and testing is fast for iOS, Web and Android - rapid mobile development.

This course teaches developers at any level to get started with React Native and start coding. You will build cross platform applications for Android, Web and iOS in React Native! This is a hands-on training course. Every Module includes a hands-on project. You’ll need to successfully finish the project(s) to complete the Specialization and earn your certificate.

Certificate

On successful completion of the course participants will be awarded participation certificate from DigiPAKISTAN. Also prepare for International Exam.

Duration & Frequency

Total Duration of the course is 3 months

What will i learn?

  • Learn how to use ReactJS to build real native mobile apps for iOS and Android
  • Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android
  • Explore React Native basics and advanced features!
  • Learn how to use key mobile app features like Google maps or the device camera
Requirements
  • React knowledge is a must (but you absolutely DON'T have to be an expert)
  • JavaScript knowledge is a must, next-gen JavaScript knowledge (i.e. ES6+) is recommended
  • NO Android/ Java or iOS (Swift, ObjectiveC) development experience is required
Curriculum for this course
Course Overview
  • Course Overview Part-I
  • Course Overview Part-II
  • Course Outline
Environment Setup
  • Install Node
  • Install Npm
  • Install Code Editor
Basic Concepts
  • ES6 - Introduction
  • ES6 - Features
  • ES6 Features - Let & Const
  • ES6 Features - Classes
  • ES6 Features - Arrow Functions
  • ES6 Features - Promises
  • ES6 Features - For Of Loop
  • ES6 Features - Symbol
  • ES6 Features - Default Parameter
  • ES6 Features - Rest Parameter
  • ES6 Features - Array Methods
  • ES6 Features - Math Methods
  • ES6 Features - Number
  • ES6 Features - Recap
  • Virtual DOM
  • Virtual DOM Cont...
  • Immutability
  • JSX
  • State and Props
React Component Approaches
  • Class Component and Functional Component
  • Component Life Cycle
  • Hooks
  • State and Props (With Example)
  • Re-Rendering and Immutability
  • Re-Rendering and Immutability (Function Component)
  • Life Cycle Demo - Part 1
  • Life Cycle Demo - Part 2
Initial App Structure
  • Initial Components
  • Styling
  • Types of Routers
  • Router Hooks
  • Common Components
  • Clean up
Intro to Redux
  • Intro to Redux
Actions, Stores, and Reducers
  • Actions
  • Store
  • Immutability
  • Reducers
Connecting React to Redux
  • Introduction
  • map State To Props
  • map Dispatch To Props
Redux Flow
  • Create Course Form
  • Actions and Reducers
  • Combine Reducers
  • Store
  • React-Redux, Prop Types, Default Props
  • Errors resolved and first run
  • Step by Step Flow
  • Component Structure
A sync in Redux
  • Introduction
  • Redux-thunk
  • Mock API - Part1
  • Mock API - Part2
  • Code Clean up
  • Styling
Code Example
  • Navigate to Course Form View
  • Create Course Form
  • Load Author Action
  • Author Reducer & Initial State
  • Show Authors in Dropdown
  • Create Course
  • Display Author Name in Table
  • Navigation to Course List Page
  • Populating Course Form
  • Editable Form Fields
  • Update Course
  • Refactoring
Challenge
  • Challenge
React Native - Course Overview
  • Course Overview
React Native Setup
  • React Native Setup
Hello World
  • Hello World with Expo
  • Hello World with Android - Part 1
  • Hello World with Android - Part 2
Fundamentals
  • Platform specific work
  • Styling - Part 1
  • Styling - Part 2
Example 1
  • Initializing the NumberGame app
  • Setting the random target
  • Generating random numbers
  • Styling random numbers
  • Setting press event on buttons
  • UI change for selected buttons
  • Adding selected numbers to array
  • React Devtools + Multiple click fix
  • Check Game Status
  • Change Target color with game status
  • Add Timer
  • Code Improvement
  • Stop timer
  • Shuffle random numbers
  • Reset game
Example 2
  • Initializing the FoodApp
  • Introduction to API
  • Splash Screen
  • Fetching Categories
  • Displaying category titles
  • Display images with FlatList
  • Styling the category view
  • Creating CategoryItem View
  • Creating CategoryDetail View
  • Show Description
  • Fetch Category Meals
  • Styling Meal list
  • Adding a Back button
  • Show Search Bar
  • Searching Categories
  • Assign filtered data to another list
Animation and Gesture Control
  • Styling Splash Screen
  • Animating Splash Screen
  • Moving to Categories
  • Introduction to PanResponder
  • Move to initial position on release
  • Detecting swipe direction
  • Moving category out of screen
  • Displaying next and previous category
  • Adjusting Back button and Reloading Meal list
  • Handling first and last category swipe
  • Summary
Deployment
Deployment
  • Create Google Play Account
  • Create App Bundle
  • Main Store Listing
  • Publishing App
  • Ending Note & Apology
+ View more
Other related courses
AWS Developer Associate
Updated Thu, 09-Jun-2022
AWS SysOps Administrator
Updated Thu, 09-Jun-2022
Android Apps Development
Updated Thu, 09-Jun-2022
Data Science
Updated Thu, 09-Jun-2022
CompTIA Security + (SYO - 601)
Updated Thu, 09-Jun-2022
About instructor

Asif Hanif

Show full biography
Apply Now
Includes:
  • Verified Certificate
  • Internship Opportunity
  • Career Development

Copyright © 2023 DigiPAKISTAN - National Skills Development Program. All Rights Reserved