Show


Sign up with Linkedin

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close

Plus icon:

React Fundamentals

Non Certification Program

Schedules Play Course Overview

Overview


React Native is a most productive Mobile App Frameworks for developing complex, a high performance Native Mobile application using JavaScript Language. Software Developer should learn to React correctly to use in production applications, to get all the benefits and features offered by React Native component-based architectures, states, React Native ecosystems. This training includes extensive workshop sessions, in-depth content, with hands-on from an experienced Chief Software Architect, Developer & Trainer who has architected, developed more than 24+ applications & products for Web, Mobile, Desktop.

Advanced React Native Training covers introductory to intermediate to advanced topics, 80% of the course is hands-on, 20% for trainer instruction, demos.

This course is designed to meet day-to-day challenges faced by software developers while developing React Native Application for iOS and Android, the course session introduces the best practices, design patterns to use when developing React Native application with Native Mobile features.   The course sessions are designed to build a project in the iterative mode with best practices followed in the industry, close to real application. By end of the training, developers shall have experience of applying all concepts learned on a project, ready to apply skills to production applications.  Right from the beginning of the training, we introduce best practices, teaching React.js with proven patterns

Course Curriculum


Topic

 

React Native Introduction

Introduction to React

React Native Introduction

Advantages of React Native

Create React App

Introduction to Expo, Expo SDK

React Native

Difference between Expo vs React Native Scripts

Environment Setup

Node.js

React Native Tools

iOS/Android SDK

Emulation Tools (Genymotion)

HTTP RESTful API Server for Workshop

Setup NPM project with quick start configuration

Visual Studio Code

Getting Started

react-native init

react-native start commands

Installing React Native

iOS setup – XCode

Android setup – Android Studio

Run an example project in iOS and Android simulators

ECMA 2016/ES6

Introduction to ES6, Features

Template Literals

Block Scope, Let, Constant, Variables

ES6 Classes, Inheritance, Getter, Setter

ES6 modules, export, import, module level scope

Rest, Deconstruct operator, arrow functions

ES6 Map

Render UI with React

 

React Component in ES6 Way

Working with Buttons, Text Labels

React, Component

Create Components using ES6 classes

Extending React.Component

PropTypes

React Prop (Properties), Passing values to components

React State, Set state

Render function

JSX Introduction

Using JSX in Application Files, Script Tags

JSX

JSX Introduction

Using JSX in Application Files, Script Tags

View Components using JSX

JSX Syntax

Using JSX to create view classes

Conditional rendering

Looping over elements, objects

React Native Architecture

JavaScript Bridge for React Native

Understanding Native Packager for iOS and Android

Logging and Debugging

React Native UI components

 

Introduction to React Native Component

Working with Text, View, Button, ActivityIndicator

Props vs State

Understand the difference between props and state

Know when to use props vs. state

Pass data up and down the view hierarchy

Compose generic components into specialized components

React Native Events

React Native Events

Component Events

Working with touch, swipe events

Press and longPress event, Touchable

Working with TextInput and Events,

Synthetic Events, properties

Component Advanced

Component Life-Cycle

Initializing States

Using Properties

Communication between components

Component Composition

Reusable Components

Events

React Context

What is React Context

Props and Cons of Using Context

Get Child Context with examples

Ref

Linting and Type Checking

ESLint, Static Analysis of JS Code

Flow Type Checking

 

React Native View

Working with View, Text, Button, Image

Device Event

DeviceEventEmitter, Keyboard access

Styles

Working with Styles

Style Properties for text, font, background

 

Issues with CSS

Inline Styles

Pass styles as props

Layout

Flexbox

Stack Layout

Absolute and Relative Positioning

Promises

ES6 Promise Introduction

ES2017/ES8 Async, Await for readable promise handling

ES.NEXT finalize for promise

HTTP

Working with network , Fetch APIs

Network Request, HTTP GET, POST methods

 

Trainer do not have experience working with kinvey react-native sdk, trainer  would Kinvey apis using their js-core,  on day 2/day 3

Navigation

 

React Native Navigation (WIX)

Navigation with React Navigation

Stack based navigation

Tab Based Navigation

Stack within Tab

Passing parameters

Going one tab to Another tab

 

 

Input Controls

Working with Input controls

TextInput

Date Picker

Options

Working with Phone System, Camera APIs

Capturing and Storing Photos

Working contact API

Working with File System APIs

Gestures

Animation

[Basic part]

Introduction to Gestures on iOS and Android

Working with gestures

Working with animation

Storages

Mobile Storages Introduction

AsyncStorage

Using Async Storage

getItem

setItem

mergeItem

clear

 

SQLite

Working with Database,

SQLite Introduction

SQLite create tables

SQLite Connections

Saving SQLite on File System & Loading

Insert, Select queries

Redux

Introduction to Redux, a Flux Implementation

Dispatchers

Dispatcher Introduction

The role of dispatcher

Registering callbacks

Triggering Actions

Redux Stores

Store

The role of Store

Maintain Application State

Event Broadcasting

Redux Reducer

Reducer

Creating Reducers

Retrieving State

Combining Reducers

Actions

Action Creator

Creating Actions

Dispatching actions to the dispatcher

Binding & Provides, Injection

React-Redux Bindings

Binding Components to React Store using "Connect"

Injecting Redux Store using Provider

Using Providers with React Routers

 

Topic

 

Views and Components with React and Redux

Views

Presentational/Function Views

Container Views

React Components as Container Views

React Component vs Presentational View

State Subscribers

Updating data from the store

Working with React and Redux

Applying React & Redux integration

Pure Presentational Components

Container Components

Map redux state to react components

Map Dispatch to react components

bindActionCreators

Upload/Download File

 

Demo

Uploading Files to HTTP server using Fetch Post API

Download files from Web servers

Handling multiple file downloads using async [example only]

Introduction to RXJS

RXJS Introduction

Understanding Observable, Subject

Subscribe, Next, Sequences

Understanding Stream of data

RxJS Filters, Maps, FlatMaps and Debounce operators

 Redux & RXJS  Obervables

Dispatching Async Actions

Epics

Using Redux RxJS Observable for data handling

Glamorous & Style Handling

  1. Component Level Style handling
  2. Glamorous for CSS

Introduction to ImmutableJS

 

Demo

  1. Immutable JS Introduction, Integrating Immutable JS for Redux State

Debugging React

Debugging react native application on Google Chrome iOS and Android

 

 

Inspect element using React dev tools

& Mobile Apps

 

Unit Testing

[Examples and Demo only]

Using Testing using JEST, Mocks,   Coverage Reporting

Unit testing React Components

Unit Test react component using snapshot

Unit test react component using enzyme mount

Unit Testing Redux

Unit Testing Epics

Share Code iOS and Android

Share code between iOS and Android effectively

Best practices for iOS and Android code sharing and designing

Building & Publishing

for App Stores

Building for iOS Store

Building for Android Store

Approval Process

Dos & Don’t with JavaScript, iOS and Android store guidelines

The most critical functions and features of JavaScript features should NOT be used in Mobile Application

 

Prerequisite


 Tools

  1. Install NodeJS 6.x LTS from https://nodejs.org/en/download/
  2. Google Chrome Version 55 or later
  3. Chrome Plug-ins (Postman)
  4. Git  (install from https://git-scm.com/)
  5. Visual Studio Code
  6. XCode
  7. Android SDK
  8. Java JDK

 

Detailed workshop setup shall be given after training confirmation.

IDE

Visual Studio Code

Developer Skill

Basic JavaScript, UI Development, Basic knowledge on Mobile App development,  ES6 is preferred

Internet

Course need fulltime internet connectivity for Developers. Trainer shall use DataCard or Company given WIFI connectivity

Firewall

If you have firewall setup, you should enabled npm registry, github website or provide a proxy settings with username/password for installing software modules

System

Laptop/Desktop PCs with one of the operating system

  1. Windows  7.0 or later
  2. Mac OS 11.11  or later
  3. Ubuntu Linux Desktop 16.10 or later

Administrator Account

All the systems must have Administrator privileges for developers attending training.

Certification


On successful completion of the training program, participants will receive the certificate of participation.

Reviews

Contact Us
+91-(0124)-470-0200

Traning For:
Enroll Now
Become a Trainer
Love to educate people about your favorite subject? Create your own online course with Xebia.


Start Teaching

For Corporates
Develop your workforce with the right skills. We train and engage your people with highly skillful training programs.

Get Xebia for Business