react native - reactbkk.com · nick schrock at reactjs conf 2016 react native proprietary platforms...
TRANSCRIPT
![Page 1: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/1.jpg)
React NativeGAME-CHANGER FOR MOBILE DEVELOPMENT
React Bangkok 1.0.0August 27, 2016
![Page 2: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/2.jpg)
PanJ
CTO at TakeMeTour
9 years on web development
Full-stack developer
DevOps beginner
PANJAMAPONG SERMSAWATSRI
![Page 3: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/3.jpg)
ChernRANATCHAI CHERNBAMRUNG
CTO at NextCover
Main stream Front-end
Full-stack developer
DevOps beginner
![Page 4: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/4.jpg)
History of JavaScript
JavaScript
1997 2009
NodeJS
PhoneGap
ES2015
![Page 5: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/5.jpg)
What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
![Page 6: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/6.jpg)
What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
![Page 7: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/7.jpg)
What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
![Page 8: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/8.jpg)
What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
![Page 9: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/9.jpg)
React Native
![Page 10: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/10.jpg)
Native
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms
Installed binaries
Compile cycles
Platform-specific team
![Page 11: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/11.jpg)
Native
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms
Installed binaries
Compile cycles
Platform-specific team
![Page 12: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/12.jpg)
Native
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms
Installed binaries
Compile cycles
Platform-specific team
![Page 13: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/13.jpg)
Native
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms
Installed binaries
Compile cycles
Platform-specific team
![Page 14: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/14.jpg)
– Eric Baer
“Using React is a Business Decision, Not a Technology Choice”
![Page 15: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/15.jpg)
React<div>
<img src=“/logo.png” /> </div>
React Native<View>
<Image source={require(‘logo.png’)} /> </View>
DOM
Native Component
![Page 16: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/16.jpg)
React Native vs
Ionic/Cordova
![Page 17: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/17.jpg)
React Native Ionic/Cordova
Hot Reloading ✓ ✗
Code Push ✓ ✓
View Engine Native Components WebView
Memory Usage Moderate High
![Page 18: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/18.jpg)
React Native vs
Native
![Page 19: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/19.jpg)
React Native Native
Code Sharing ✓ ✗
![Page 20: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/20.jpg)
React Native Native
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
![Page 21: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/21.jpg)
– Mark Zuckerberg
“JavaScript will be the next universal language after English”
didn’t said
![Page 22: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/22.jpg)
Let’s get hands-on!WORKSHOP TIME!
![Page 23: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/23.jpg)
Slide № 23
React Native In Touchhttps://github.com/ranatchai/react-native-bkk-example
- Different Between iOS and Android - Code Overview, Styling Component - Dev Process - It Great but … ?
![Page 24: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/24.jpg)
Slide № 24
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 25: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/25.jpg)
Slide № 25
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 26: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/26.jpg)
Slide № 26
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 27: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/27.jpg)
Slide № 27
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 28: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/28.jpg)
Slide № 28
Thing We Learn
- Result in Android and iOS is Different
https://github.com/ranatchai/react-native-bkk-example
![Page 29: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/29.jpg)
Slide № 29
Code Overviewhttps://github.com/ranatchai/react-native-bkk-example
![Page 30: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/30.jpg)
Slide № 30
Project Structure
![Page 31: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/31.jpg)
Slide № 31
![Page 32: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/32.jpg)
Slide № 32
![Page 33: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/33.jpg)
Slide № 33
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 34: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/34.jpg)
Slide № 34
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 35: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/35.jpg)
Slide № 35
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 36: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/36.jpg)
Slide № 36
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 37: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/37.jpg)
Slide № 37
![Page 38: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/38.jpg)
Slide № 38
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 39: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/39.jpg)
Slide № 39
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 40: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/40.jpg)
Slide № 40
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 41: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/41.jpg)
Slide № 41
Thing We Learn
- Native bundle per Platform (iOS/Android) - Write code like React web but can’t use DOM - Easy Stylesheet - find Component from github
https://github.com/ranatchai/react-native-bkk-example
![Page 42: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/42.jpg)
Slide № 42
Code Overview (2)https://github.com/ranatchai/react-native-bkk-example
![Page 43: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/43.jpg)
Slide № 43
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 44: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/44.jpg)
Slide № 44
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 45: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/45.jpg)
Slide № 45
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 50: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/50.jpg)
Slide № 50Themeforest for ReactNative
![Page 51: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/51.jpg)
Slide № 51
Development Processhttps://github.com/ranatchai/react-native-bkk-example
![Page 52: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/52.jpg)
Slide № 52
$ react-native start
Run Packager
![Page 53: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/53.jpg)
Slide № 53
$ react-native start
Run Packager
![Page 54: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/54.jpg)
Slide № 54
$ react-native start
Run Packager
Run iOS
$ react-native run-ios
![Page 55: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/55.jpg)
Slide № 55
$ react-native start
Run Packager
Run iOS
$ react-native run-ios
![Page 56: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/56.jpg)
Slide № 56
$ react-native start
Run Packager
Run Android Emulator
$ android avd
![Page 57: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/57.jpg)
Slide № 57
Run Android
$ react-native avd
![Page 58: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/58.jpg)
Slide № 58
$ react-native start
![Page 59: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/59.jpg)
Slide № 59
$ react-native start
Run Android
$ react-native run-android
![Page 60: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/60.jpg)
Slide № 60
$ react-native start
Run Android$ react-native run-android
![Page 61: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/61.jpg)
Slide № 61
CMD + DOpen Dev tools iOS
https://github.com/ranatchai/react-native-bkk-example
![Page 62: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/62.jpg)
Slide № 62
CMD + MOpen Dev tools Android
https://github.com/ranatchai/react-native-bkk-example
![Page 63: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/63.jpg)
Slide № 63
Hot reload and Live reload
![Page 64: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/64.jpg)
Slide № 64
Enable Live Reload
https://github.com/ranatchai/react-native-bkk-example
![Page 65: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/65.jpg)
Slide № 65
Live Reload Demo
https://github.com/ranatchai/react-native-bkk-example
https://youtu.be/urbcszfA7yU
![Page 66: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/66.jpg)
Slide № 66
Enable Hot Reload
https://github.com/ranatchai/react-native-bkk-example
![Page 67: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/67.jpg)
Slide № 67
Hot Reload Demo
https://github.com/ranatchai/react-native-bkk-example
https://youtu.be/bfKyoBcu8b0
![Page 68: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/68.jpg)
Slide № 68
Enable Remote Debugging
https://github.com/ranatchai/react-native-bkk-example
![Page 69: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/69.jpg)
Slide № 69
Debugger: Chrome Dev Tools
https://github.com/ranatchai/react-native-bkk-example
![Page 70: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/70.jpg)
Slide № 70
React Native Debugger
https://github.com/jhen0409/react-native-debugger
![Page 71: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/71.jpg)
Slide № 71
React Native Debugger
https://github.com/jhen0409/react-native-debugger
![Page 72: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/72.jpg)
Slide № 72
React Native Debugger
https://github.com/jhen0409/react-native-debugger
![Page 73: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/73.jpg)
Slide № 73
Thing We Learn
- Dev Process very fast with hot reload - Easy Debugging Code with Chrome Dev Tools
https://github.com/ranatchai/react-native-bkk-example
![Page 74: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/74.jpg)
Slide № 74
Everyting is Great but…
- Can we use React Native with Redux ? - Testing framework ? - Offline Storage ? - Instant App Update ? (Code Push) - CI & CD ?
![Page 75: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/75.jpg)
Slide № 75
Study from Full Stack Boilerplatehttps://github.com/futurice/pepperoni-app-kit
![Page 76: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/76.jpg)
Who are using React Native?
Facebook Facebook Ads Manager
Facebook Groups
Gyroscope QQ Discord
![Page 77: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/77.jpg)
Ready for Production?• New versions are coming very fast, some have
breaking changes • Open-sourced components are sufficient, but there
are some open issues • There are some limitations on styling components in
tricky cases, native bridge is needed • TakeMeTour was able to launch its first version in both
platforms within 2 weeks of development • An intern took the code written for iOS and made it
run *NATIVELY* on Android within 2 days
![Page 78: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/78.jpg)
Slide № 78
Tip & Trickhttps://github.com/ranatchai/react-native-bkk-example
![Page 80: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/80.jpg)
Slide № 80
Next Generation IDE for building React Native
https://decosoftware.com
![Page 81: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/81.jpg)
Slide № 81
Web
https://github.com/necolas/
react-native-web
Mac
https://github.com/ptmt/
react-native-macos
Ubuntu
https://github.com/
CanonicalLtd/react-native
React Native for Web & Desktop App
![Page 82: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/82.jpg)
Slide № 82
Old
![Page 83: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/83.jpg)
Slide № 83
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 84: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/84.jpg)
Slide № 84
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 85: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/85.jpg)
Slide № 85
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 86: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/86.jpg)
Slide № 86
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 87: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/87.jpg)
Slide № 87
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 88: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/88.jpg)
Slide № 88
![Page 89: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/89.jpg)
Slide № 89
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 90: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/90.jpg)
Slide № 90
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 91: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/91.jpg)
Slide № 91
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 92: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/92.jpg)
Slide № 92
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 93: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/93.jpg)
Slide № 93
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 94: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/94.jpg)
Slide № 94
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 95: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/95.jpg)
Slide № 95
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 96: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/96.jpg)
Slide № 96
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 97: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/97.jpg)
Slide № 97
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 98: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/98.jpg)
Slide № 98
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 99: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/99.jpg)
Slide № 99
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 100: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/100.jpg)
Slide № 100
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 101: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/101.jpg)
Slide № 101
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 102: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/102.jpg)
Slide № 102
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
![Page 103: React Native - reactbkk.com · Nick Schrock at ReactJS Conf 2016 React Native Proprietary platforms Installed binaries Compile cycles Platform-specific team – Eric Baer](https://reader034.vdocument.in/reader034/viewer/2022051321/5af8804e7f8b9a2d5d8ba412/html5/thumbnails/103.jpg)
Slide № 103
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example