Starting React Native & Expo

How to getting started with React Native and Expo, and Release at Unitomo Facebook Developer Circles: Surabaya

Transcript

1. REAC T N AT IVE & E X P O START ING W IT H
2. Mochammad Firdaus
 Fatchur Rozi Front End Engineer at Pinjam.co.id @firdausious
3. Mo bi l e App s Devel o pm ent…
4. Factors of Comparison
5. Native Tech Comparison
6. What We Learn Today • Getting started React Native
 • Deployment
7. Why Rea ct Native.. ?
8. React Native • ReactJS jutsu

9. React Native • ReactJS jutsu
 • Cross Platforms (iOS, Android, Windows ?)
10. React Native • ReactJS jutsu
 • Cross Platforms (iOS, Android, Windows ?) • Faster than Hybrid Tech (Cordova)
11. React Native • ReactJS jutsu
 • Cross Platforms (iOS, Android, Windows ?) • Faster than Hybrid Tech (Cordova) • Shared Codebase (ex: validation, utils, I18N)
12. Interes tin g… b ut…
13. Dilemma • Setting Up can be intense

14. Dilemma • Setting Up can be intense
 • iOS doesn't work on Linux on Windows
15. Dilemma • Setting Up can be intense
 • iOS doesn't work on Linux on Windows • Need more fast development
16. Create-React-Native-App • Easy set-up
 • Only needs Node • Familiar • Running with Expo
17. Create-React-Native-App Link: https:/ /github.com/react-community/create-react-native-app
18. E xpo .. Wh at.. ?
19. Built top of React Native, Free open source project for building Native iOS and Android apps in Javascript.
20. Native Components:
 • MapView • DatePicker • Toolbar Native SDK APIs:
 • ImagePicker • Geolocation • Push Notification More: https:/ /docs.expo.io/versions/v17.0.0/sdk/index.html
21. LET’ S D IVE IN
22. Things todo • Components
 • Handling events • Writing components with JSX • Props and State
23. • Encapsulated UI • Reusable • Unidirectional data flow Components
24. SH OW T IME .. !!
25. Create TodoApp • One TextInput
 • One Submit button • Insert textinput when press submit button • Show array of todos • Link: https://github.com/Facebook-DevC-Surabaya/w1- reactnative-todoapp
26. Wh at a b o ut Pro d uc ti on ?
27. Publish on Expo:
 • exp publish | Hit button publish on Expo XDE
28. Publish on Expo:
 • exp publish | Hit button publish on Expo XDE • exp build:android <ios>
29. Publish on Expo:
 • exp publish | Hit button publish on Expo XDE • exp build:android <ios> • Need internet connection
30. Publish on Expo:
 • exp publish | Hit button publish on Expo XDE • exp build:android <ios> • Need internet connection • And a Coffe ☕
31. • npm run eject Eject from Expo
32. • npm run eject • Will need XCode / Android Studio for building apps Eject from Expo
33. • npm run eject • Will need XCode / Android Studio for building apps • Deploy on Android (https://facebook.github.io/react-native/ docs/signed-apk-android.html | http://blog.tylerbuchea.com/ react-native-publishing-an-android-app/) Eject from Expo
34. • npm run eject • Will need XCode / Android Studio for building apps • Deploy on Android (https://facebook.github.io/react-native/ docs/signed-apk-android.html | http://blog.tylerbuchea.com/ react-native-publishing-an-android-app/) • Deploy on iOS (https://medium.com/react-native- development/deploying-a-react-native-app-for-ios-pt-1- a79dfd15acb8) Eject from Expo
35. Co n cl us io n
36. Conclusion • Many ways to start, choose based on your needs

37. Conclusion • Many ways to start, choose based on your needs
 • Beware with Native Modules, especially with Expo
38. Conclusion • Many ways to start, choose based on your needs
 • Beware with Native Modules, especially with Expo • Do it First, then Do it Right, then Do it Better
39. THAN K YOU I’M DO NE …
40. Glossary • Adam Perry - Create React Native App: 5 min. to "Hello, World!" - React Conf 2017
 (https://www.youtube.com/watch? v=9baaVjGdBqs&list=WL&index=8&spfreload=10)
 • Intro to React Native & Expo - Build your first mobile app (https://www.youtube.com/watch? v=fQhH5SK2yTU&list=WL&index=5)