Mobile Technologies
D-MBRC-001

Developing Mobile Applications with ReactNative

Duration

3 days

Format

Instructor Lead

Audience

Software and web developers who want to rapidly create and deploy engaging mobile apps that will look great and perform well on a wide variety of devices.

Prerequisites

Delegates should be comfortable coding JavaScript from scratch, and web fundamentals (HTML and CSS).

Overview

This course focuses on developing truly cross-platform, native iOS and Android apps using React Native. React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript.

  • Getting Started with React Native
  • React Native Tools
  • Javascript ES6 Overview
  • Create your first React Native app
  • Developing your UI with JSX
  • Going deeper with React Native

Description

  • Intro to React Native
    • What is
    • Why you should use it
    • Abstracting React from the DOM
    • Advantages of React Native
    • React Native vs Web Apps
    • React Native vs React web
  • Getting Started with React Native
    • Installing React Native
    • iOS setup – XCode
    • Android setup – Android Studio
    • Create an example app
    • Exploring Project Structure
    • Run an example project in iOS and Android simulators
    • Debugging
  • React Native Tools
    • Console + editor
  • Javascript ES6 Overview
  • Core React Native Components
    • Establishing a layout with View
    • Displaying text with Text
    • Introduction to TextInputs
    • Adding images with Image
    • Interactive Design
    • Overview of form validation
    • Submitting & clearing a form
    • Creating Custom Components
    • Properties (props)
    • Managing State
    • Populating and Manipulating Lists
    • Using open source (NPM)
    • Making components interactive with TouchableHighlight
    • Displaying data with ListView
    • Changing screens with Navigator
    • Expanding touch capability with GestureResponder and PanResponder
    • Higher-Order components
  • Direct Manipulation
  • Styling
    • Describe StyleSheet, what are available values, how it works
    • Flexbox and its properties
    • Create Immutable style objects with Stylesheet.create
    • External Stylesheets
    • Pass styles as props
    • Positioning components with flexbox
  • ReactNative APIs
    • Using fetch to retrieve data
    • Getting a user’s location and handling permissions
    • Accessing stored photos with CameraRoll
    • Adding animations
  • Navigation
    • Basic concepts of navigation.
    • React Native Navigation
  • Working with HTTP, network requests, and accessing restful services
  • Persistence
    • persistence using AsyncStorage
    • available APIs, like `multiSet` and when it’s better to use what
  • Animations
    • Introduce `Animated` as a general solution for animations
    • Demonstrate how Animated works
    • Encourage them to animate a few things on the screen
    • wise - mention native driver
  • Lists
    • How and work and when to use each.
    • Available scroll solutions
    • Performance optimizations
  • Redux
  • Redux Sage
  • Using Native UI Components
  • Native Modules
  • Using 3.party libraries
  • Cross Platform APIs
  • iOS specific APIs
  • Android specific APIs
  • Deployment
    • Deploying to Apple App Store
    • Deploying to Android Play Store