In this session, Trung and his team will be focusing on the following: – Introduce about React Native – How to develop an app by using React Native from scratch – Demo – Experience sharing – Q&A

1. React Native
Hello World
Speakers:
- Hau Nguyen
- Trung Pham Duc
1

2. Audience
● Students
● New to React Native
2

3. Agenda
● Introduction
○ What’s React
○ What’s React Native
● Live Coding - Create RN App from scratch
● Q&A
3

4. What’s React?
● A JavaScript library developed by Facebook
for building user interfaces
● Built upon the concept of Component
4

5. Tools to build mobile apps
5
Hybrid Native
Native components via JS bridge

6. What is React Native?
● A framework for building native iOS, Android
apps using JavaScript and React.
● A React Native app is a “real” mobile app.
6

7. Who’s using React Native?
7

8. Advantages of React Native
● Build cross-platform mobile apps
● Use native code when you need to
● Integration with existing apps
● Reusable component
● Don't waste time recompiling
8

9. How does React Native render?
9

10. UI Component Library
10
Activity
Indicator
Modal
Image
Picker
ScrollView
Slider
TextInput
ActionSheet
ListView
View
Text
Button
WebView
...
Alert

11. Device APIs
11
AppState
CameraRoll
Dimensions
Vibration
NetInfo
Geolocation
Linking ...

12. React Native StyleSheet
// Create a new StyleSheet
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da'
},
title: {
fontSize: 19,
fontWeight: 'bold'
},
activeTitle: {
color: 'red'
}
});
// Use a StyleSheet
<View style={styles.container}>
<Text style={styles.title}>Hello World,</Text>
<Text style={styles.activeTitle}>Hello #devday</Text>
</View>
12

13. React Native StyleSheet - Flexbox
// Create a new StyleSheet
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}
/>
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
13

14. How to create a React Native app?
14

15. How to run a React Native app?
cd AwesomeProject
// Running on iOS
react-native run-ios
// Running on Android
react-native run-android
// Running on Windows
react-native windows
15

16. How to debug a React Native app?
Default debugger
16

17. How to debug a React Native app?
React Native debugger
17

18. Reference Links
18
● React
● React Native
● RN Flexbox Layout props
● React Native default debugger
● React Native debugger
● React Native Windows

19. THANK YOU!
19