Intro to React Native

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