SE346 Lecture 1:

React Native Introduction

CuuDuongThanCong.com https://fb.com/tailieudientucntt
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Course Outline
Buổi 1 Giới thiệu môn học, Giới thiệu React Native, Thiết lập môi trường
phát triển, Tạo thử ứng dụng đầu tiên.
Buổi 2 JavaScript Programming Language, Lịch sử JavaScript, ECMAScript
2015 /ECMAScript 6/ES2015/ES6, Công cụ ESLint
Buổi 3 Xây dựng giao diện người dùng sử dụng JSX và Flexbox, Testing và
Debugging
Buổi 4 File structures và import, Vòng đời của React component và
methods, Basic Views, React’s Props, tái sử dụng Components.
Buổi 5 Trạng thái của React, Xử lý User Inputs, Input Fields, Cài đặt
modules & libraries bên ngoài.
Buổi 6 Navigation Bar, Scene Transition, ListView

Buổi 7 Map, Google Map, Apple Map

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Course Outline
Buổi 8 Camera, Camera Roll, và Picture Gallery + AsyncStorage

Buổi 9 Advanced Lifecycle, App State, Firebase Realtime Database I

Buổi 10 Firebase Realtime Database II, Firebase Authentication I

Buổi 11 Firebase Authentication II, Firebase Analytics

Buổi 12 Giới thiệu Redux, Xử lý dữ liệu trong React với Redux

Buổi 13 Tái sử dụng code và component trong React Native

Buổi 14 Deploying ứng dụng Android và iOS lên store

Buổi 15 Ôn tập, Thuyết trình đồ án cuối kỳ

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Grading Policy

Quizzes: 10%
Seminar: 20%
Term Project: 70%

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Term Project
• Making a 5-10 Screens Mobile Application.
• Group & Project Assignment after the midterm exam.
• Set up a group up to three people. (40/3 ~14 groups)
• 15% - Group scores - Usefulness, App Business
Model, UI, UX, Functionality, Code Style, and
Pitching.
• 5% - Individual scores - App development questions
target to each person during presentation.
• 10 minutes presentation: Pitching 3 minutes, Code
Explanation 2 minutes, Question & Answering 5
minutes.

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Books & References
• https://facebook.github.io/react-native/

• Bonnie Eisenman, Learning React Native:

Building Native Mobile Apps with JavaScript,
O'Reilly Media, 2016

• https://github.com/jondot/awesome-react-native

• https://js.coach/react-native/

CuuDuongThanCong.com https://fb.com/tailieudientucntt
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 What is React Native?
• JavaScript framework for building iOS and Android
mobile apps.

• Based on popular JavaScript Web framework called

React.

• Created by Facebook. Firstly release iOS version on

March 2015 and Android version on September
2015

• Writing the app by using JavaScript and XML-esque

markup (JSX)

• React-Native bridges and invokes the Native

rendering API in Objective-C (iOS) and Java
(Android)

CuuDuongThanCong.com https://fb.com/tailieudientucntt
Approach of Mobile App Dev.

Approach Platform Logic UI UX Dev Time*

Object C, Swift
Native (iOS), Java Native Native Smooth 6-24 weeks
(Android)

HTML5 PhoneGap, HTML

JS Laggy 2-8 weeks
Hybrid Cordova, Ionic ,
CSS

Native React Native,

JS Native Smooth 2-8 weeks
Hybrid NativeScript

* 20-30 screens mobile apps approximated based on instructor experiences

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Why React Native?
• Native Experience

• One language rules them all, JavaScript.

• Fast & Great Development Experience

• Don’t Waste Time Recompiling (Hot Reloading)

• 80% Share code between Android & iOS

• Great Debugging Tool using Chrome Developer Tools

• Be able to bridge with Native Code when we need to.

CuuDuongThanCong.com https://fb.com/tailieudientucntt
Native Experience
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Hot Reloading
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Debugging with Chrome Developer Tools
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Why not React Native?

• React-Native is still relatively young compared with

Native iOS and Android Communities (Released on
2015)

• Some of Native API still are not supported. (But you

can use the native libraries through)

• Add one additional layer to mobile app project.

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 What is React?
• Declarative, Efficient,
and Flexible
JavaScript Library that
Building User
Interface on Website.

• React Native is rooted

from React.

• React treats every A React Component

thing as a Component.

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 What HAPPENS WHEN YOU
RUN A React Native APP?

@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 No WebView
No HTML
No CSS

@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
import React, {
Component,
} from 'react';

import {
AppRegistry,
Text,
} from 'react-native';

class SampleApp extends Component {

render() {
return (
<Text style={{ margin: 40 }}>
Hello, World!
</Text>
);
}
}

AppRegistry.registerComponent('SampleApp', () => SampleApp);

@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@implementation MyNativeModule

RCT_EXPORT_MODULE()

@end

@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@implementation MyNativeModule

+ (NSString *)moduleName { return @""; }

+ (void)load { RCTRegisterModule(self); }

@end

@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
{
"remoteModuleConfig":[
// [ $moduleName, $exportedConstants:{}? $methods:[]?, $asyncIndexes:[]? ]
["RCTStatusBarManager",["getHeight","setStyle","setHidden","setNetworkActivityIndicatorVisible"]],
["RCTSourceCode",{"scriptURL":"https:\/\/fanyv88.com:443\/http\/localhost:8081\/index.ios.bundle?platform=ios&dev=true"},["getScriptText"],[0]],
["RCTAlertManager",["alertWithArgs"]],
["RCTExceptionsManager",["reportSoftException","reportFatalException","updateExceptionMessage","reportUnhandledException"]]
,
// ...
]
}

@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 VM
Basics
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
// import React, {
// Component,
// } from 'react';
//
// import {
// AppRegistry,
// Text,
TouchableHighlight,
// } from 'react-native';
//
// class SampleApp extends Component {
onPress() {
alert('Hello, World!');
}
// render() {
// return (
<TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}>
<Text>
Button
</Text>
</TouchableHighlight>;
// );
// }
// }
//
// AppRegistry.registerComponent('SampleApp', () => SampleApp);

@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 class SampleApp extends Component {
onPress() {
-> alert('Hello, World!');
}
...
}

@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
if (Platform.OS === 'ios') {
AlertIOS.alert(title, message, buttons);
} else if (Platform.OS === 'android') {
AlertAndroid.alert(title, message, buttons);
}

@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
// import React,
//
{
//
// Component,
} from 'react';
// import {
// AppRegistry,
// Text,
// TouchableHighlight,
// } from 'react-native';
//
// class SampleApp extends Component {
// onPress() {
Alert.alert('Hello, World!', 'Press ok to alert again', [
{ text: 'Ok', onPress() { alert('Ok!') } },
{ text: 'Cancel', onPress() { alert('Cancel') } },
]);
// }
// render() {
// return (
// <TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}>
// <Text>
// Button
// </Text>
// </TouchableHighlight>;
// );
// }
// }
//
// AppRegistry.registerComponent('SampleApp', () => SampleApp);

@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
@tadeuzagallo #reactamsterdam

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Async Rules
• Good benefits of JavaScript is their asynchronous
natures.

• React-Native is running on separated thread using

JavaScript asynchronous call via the event bridge
to invokes the host native platform’s underlying APIs
and UI elements. (Objective-C, Java)

• Since, React-Native don’t run on the main UI

rendering thread, it can do asynchronous call without
impact user’s experience (such as delay).

CuuDuongThanCong.com https://fb.com/tailieudientucntt
JS World Android World

Event Bridge

AsyncCall Android
(Non-Blocking) Native
UI

Thread 1 Main Thread

CuuDuongThanCong.com https://fb.com/tailieudientucntt
How React-Native Draw?
• React for the Web, render normal HTML elements

• React Native, render cross-platform (or platform-

specific) native UI component.
<DatePickerIOS>

Cross Platform (iOS, Android) Platform Specific

CuuDuongThanCong.com https://fb.com/tailieudientucntt
Example of Platform Specific
Components
<Switch>

<SwitchAndroid> <SwitchIOS>

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 JSX
• Combining JavaScript and XML-markup syntax to create view.

• Single File Concept (Write down at Component Class), Not

Seperate Files (Split HTML, CSS, JS)

• Separation of concerns > Separation of technologies

JSX (Underlined) Rendered View

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Styling
• In Web, We have CSS, necessary part of the Web.

• In React-Native, We have something similar to CSS,

called Flexbox Layout Model.

{ background-color : ‘white’}
CSS

{ backgroundColor : ‘white’}
Camel Case in React
CuuDuongThanCong.com https://fb.com/tailieudientucntt
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 React-Native Support
• Mac OS can develop

• iOS

• Android

• Windows OS can develop

• Only Android
• Ubuntu
• Only Android
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 HomeBrew Installation

• Open Terminal (Click on Find icon on the top right

of the screen)

• Type “Terminal”

• Enter $ /usr/bin/ruby -e "$(curl -fsSL https://

raw.githubusercontent.com/Homebrew/install/
master/install)"

CuuDuongThanCong.com https://fb.com/tailieudientucntt
Install React-Native in Mac
for iOS Development.

CuuDuongThanCong.com https://fb.com/tailieudientucntt
React-Native-Cli Command

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Try

• $ react-native init sampleProject

• $ cd sampleProject

• $ react-native run-ios

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 IDE
• Any Text Editor is fine.

• Atom

• React

• React-Snippet

• Atom-React-Native-CSS

• Atom-React-Native-
Autocomplete

• Sublimes

• Visual Studio Code

CuuDuongThanCong.com https://fb.com/tailieudientucntt
Project Structure

CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Q/A

CuuDuongThanCong.com https://fb.com/tailieudientucntt