EIEIOTECHNOVATION
← Training programmes

EIEIO / PROGRAMMING & DEVELOPMENT

React Native

Course outline

3 days
Discuss this programme →

Duration

3 days

Overview

The Economist says there will be 20 billion mobile devices by 2020. Roughly 2 million apps are now in iTune and Google Play. Mobile apps generate additional revenues to every company by encouraging repeat orders from customers on the go. Comparing to the traditional method of marketing mobile apps lowers the marketing cost. This market needs has driven the software industry to focus on mobile apps development. A diverse skill-set is necessary to develop apps for multiple platforms such as Android / iOS.

ReactJS allows developing awesome web applications powered by JavaScript. Now React Native framework build on top of ReactJS, requires HTML, JS and CSS knowledge to build hybrid mobile applications. Hybrid solution enables single code base across multiple platform. Since Ionic allows the developer to release mobile applications without having to learn thousands of different languages, it is extremely popular and in high demand.

This course takes participants from zero to published app, taking a very practice-orientated route. Participants will be building apps throughout the course, learning about the basics of Ionic 2 and its rich component library, how to fetch and handle user input, how to store data and access native device features and much more! Each app will be a real world example that focuses on different topics like Components, Navigation, Tabs, Side menus, User Input, Native Device Features, Storage, Http, and Authentication. Upon completing the app participants will also learn how to run the apps either in browser or on an emulator or on own device.

Objective

  • A brief refresher on JavaScript ES6
  • Understanding ReactJS
  • ReactJS components
  • Single Page Application (SPA)
  • Multiple Pages Application using Router
  • How to set up React Native projects
  • Basics about React Navigation, project structure and its rich component library
  • Use the beautiful components ships with React
  • Back Button Navigation, Tabs and Side menus
  • Show Modals, Alerts, Toasts and many more useful UI components
  • Test the app in the browser, on emulators and real devices
  • Access the local device Storage
  • Access native device features like the Camera or GPS

Target Participants

The primary target audience for this course is software developers / programmers. This program is for anybody who has programming background and interested in diving into the development of mobile apps for iOS and Android.

Program Prerequisites

Understanding of JavaScript programming language would be beneficial, but not ultimately required

Mode of Delivery

Every participant will be provided with course notes and are required to bring in their own laptops for hands-on exercise and practice sessions.

Day 1

  • JavaScript

Introduction

  • JavaScript Refresher
  • Basic Language features
  • Creating variables
  • Control statements
  • Functions and Functional programming
  • Creating Classes and Objects
  • Scope
  • Scope in JavaScript
  • The var Keyword
  • Scope in Nested Functions
  • The let Keyword
  • Object-Oriented Programming
  • Prototyping
  • Composing Prototypes
  • ES2015 Classes
  • Static Methods
  • Inheritance

Module Overview

  • Functions
  • Function Declarations
  • Function Expressions
  • Default Values
  • Flexible Arguments
  • Closures
  • Immediately-Invoked Function Expressions (IIFEs)
  • Callbacks
  • Recursion
  • Promises
  • Advanced Arrays
  • Arrays Methods
  • Iterators and Arrow Functions
  • Static Array Methods
  • Array Prototype Methods
  • JSON
  • Arrays in Objects
  • Objects in Arrays
  • JSON Syntax
  • JSON Parsers
  • Regular Expression
  • Start and End ( ^ $ )
  • Number of Occurrences ( ? + * {} )
  • Common Characters ( . \d \D \w \W \s \S )
  • Grouping ( [] )
  • Negation ( ^ )

Day 2

  • Subpatterns ( () )
  • Alternatives ( | )
  • Escape Character ( \ )
  • Introduction to JSX
  • Using JSX
  • Nested Elements
  • Attributes
  • JavaScript Expressions
  • Styling
  • Comments
  • HTML attributes – name, id, className and htmlFor
  • React
  • What react is and what it is not
  • React Concepts
  • Features
  • Advantages
  • Limitations
  • Environment Setup
  • Component composition
  • How react works
  • How Virtual DOM works
  • How react handles data binding
  • React Components
  • Creating a simple React Application
  • A simple react component with JSX template
  • Component structure
  • React render
  • Stateless Components
  • Stateful Components
  • More on React Components
  • State
  • Using Props
  • Default Props

Day 3

  • Validating Props
  • State and Props
  • Component API and Component Life Cycle
  • Set State
  • Force Update
  • Find Dom Node
  • Mounting Components
  • componentWillMount, componentDidMount, componentWillUnmount
  • Updating Components
  • componentWillUpdate, componentDidUpdate, shouldComponentUpdate
  • Setting Properties
  • componentWillReceiveProps
  • Forms
  • Create Forms
  • Simple Events
  • Using Refs
  • Accessing Form Elements using Refs
  • Using Keys
  • Form validation
  • Event handling
  • React.js Event Handlers
  • Synthetic Events
  • Clipboard Events
  • Composition Events
  • Keyboard Events
  • Focus
  • Form
  • Mouse
  • Selection
  • Event Pooling
  • Other useful events in React
  • Sharing events across the components
  • React Native Components
  • Built-in Components
  • Working with Images
  • Flexbox
  • ListView
  • TextInput
  • ScrollView
  • Touchable
  • Buttons
  • Creating Views (Scenes)
  • Navigation
  • App Scene Navigation
  • React Navigation Library
  • Navigator Basics
  • Implementing Navigation
  • Stack Navigator
  • Tab Navigator
  • Employee Directory App
  • Mini Project – Ecommerce
  • Music Album
  • Shopping Cart
  • Customer Registration
  • View own Shopping Cart

Programme scope, delivery arrangements and suitability are confirmed during enquiry.