This document introduces React Native, including who uses it, what it is, how to build and learn it, and how it compares to native development. React Native is a JavaScript framework that allows building iOS and Android apps using React. It was released by Facebook in 2015 and is open source. The document discusses installing React Native, key components like state and props, the component lifecycle, debugging tools, and Redux for state management. It compares the advantages of React Native like cross-platform development and instant reloading to native development.

1. INTRO TO
REACT NATIVE
Dom Nguyen
QSoft Technical Office
Nov 16,2017
1

2. CONTEXT
• Who’s using React Native
• What is React Native?
• We build and learn React Native
• Compare Native and React Native
• Q/A
2

3. WHO’S
USING
REACT
NATIVE
Thousands of apps are
using that!
3

4. 4

5. WHAT IS REACT NATIVE?
• Javascript framework for creating native
applications
• Released in 2015 by Facebook
• Open Source
• Allow to create iOS, Android
5

6. WE ARE BUILD AND LEARN
REACT NATIVE?
• React Installation
• CodeEditor for development React
• Learning ES6 + ESLint
• React Component, State & Props
6

7. • React Component Life Cycle
• React Navigation
• Fetch Data ( ApiSauce)
• Redux - Store management
• Debugging Tools (Chrome Developer
Tools)
• Immutable JS
7

8. • Medium Channel (Redux, React Native,
Bring Module React Native,etc)
• Real Projects ( Github)
• Books ( Full-Stack React, etc)
8

9. REACT INSTALLATION
• OSX ( Brew, Node, Watchman, React Native CLI,
Xode, Android Studio, Android Env)
• {code}
/usr/bin/ruby -e "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/inst
all/master/install)” && brew install node && brew
install watchman && npm install -g react-native-cli
{code}
9

10. • Windows
• iOS is not support
• Chocolatey
• Node Js
• Python2
• Jdk8
• React native CLI
• Android Studio
10

11. CODEEDITOR FOR
DEVELOPMENT REACT
• Webstorm
• SublimeText
• Atom+Nuclie
• Visual Studio Code
11

12. LEARNING ES6
• Arrow functions
• Extended Parameter Handing - Default Parameter
function
• Modules - import, export
• Promise (Async, Await)
• Classes
12

13. REACT COMPONENT,
STATE & PROPS
• Component (Button, FlatList, Image, Text,
etc)
• State ( Auto update UI when changed)
• Props ( Paramater)
• Nested Component ( The component's state
is the props of the other component)
13

14. REACT COMPONENT LIFE
CYCLE
• Initialization
• getDefaultProps()
• getInitialState()
• render()
14

15. • Mounting
• Constructor()
• ComponentWillMount()
• Render()
• ComponentDidMount()
15

16. • Update
• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()
16

17. • Error Handing
• componentDidCatch()
• UnMounting
• componentWillUnmount()
17

18. REDUX - STORE
MANAGEMENT
18

19. NATIVE
• Proprietary Platforms
• Distributing Binaries
• Compile and Wait
• Platform-aware Teams
• Imperative APIs
19

20. REACT NATIVE
• Open Source
• Instant Distribution
• Reload Run
• Unified Teams
• Declarative APIs
20

21. COMPARE
NATIVE VS REACT NATIVE
21

22. REFERENCE
• https://facebook.github.io/react-native/docs/getting-
started.html
• https://reactjs.org/docs/react-component.html
• http://busypeoples.github.io/post/react-component-
lifecycle/
• https://medium.com/react-ecosystem/react-
components-lifecycle-ce09239010df
22

23. • https://github.com/thanhtungdp/learn-react-
how-to
• https://medium.com/@vinceyuan/react-native-
debugging-tools-3a24e4e40e4
• https://www.ibm.com/developerworks/library/
wa-manage-state-with-redux-p1-david-
geary/index.html
• https://medium.com/javascript-scene/10-tips-
for-better-redux-architecture-69250425af44
• https://facebook.github.io/immutable-js/23

24. Nov 16, 2017
“We can do it and Thanks for your support”
24