React_Native_101.pdf

Transcript

1. David Winalda - 28 Februari 2021 React Native 101 Berkenalan dengan konsep dan roadmap React Native
2. Objectives (1) Apa saja yang akan kita dapatkan setelah webinar ini • Mengetahui apa itu React Native • Kenapa menggunakan React Native • Siapa saja yang sudah menggunakan React Native • Arsitektur React Native • Perbedaan React Native CLI dan Expo • Mengetahui prerequisites yang diperlukan • Mengetahui cara Setup Environment React Native
3. Objectives (2) Apa saja yang akan kita dapatkan setelah webinar ini • Membuat project baru • Menjalankan Aplikasi dan Emulator • Basic Component • Mengenal styling pada React Native • Mengenal konsep routing pada React Native • Mengetahui beberapa alternatif Backend pada React Native • Mengetahui step publish aplikasi ke playstore
5. https://reactnative.dev
6. Apa itu React Native?
7. React Native adalah sebuah framework untuk membangun cross platform native mobile apps menggunakan React. React Native rilis pada tahun 2015 React JS rilis pada tahun 2013
8. React Native dibuat dan dikembangkan oleh engineer dari Facebook pada tahun 2015. React Native bersifat Open Source.
10. Kenapa menggunakan React Native?
11. • Learn once, write anywhere (save time and resource) • Bukan web view, tetapi native code app • Menggunakan React JS • Learning curve cukup mudah • Refresh rendering • React Native is the future • Large community
12. Study Case Shopify Engineering • https://shopify.engineering/react- native-future-mobile-shopify
13. but React Native is not for everyone
14. • Mobile Games • Utility, Media Players, Navigation Apps, and a lot of computation • Heavy Projects & High Customizations • Speci fi cally built for one OS • But many developers believe React Native will still doing improvement
15. Siapa saja yang menggunakan React Native
19. Arsitektur React Native
21. React Native CLI & Expo
22. Pada dokumentasi React Native, pada saat instalasi akan ada pilihan Apakah mau menjalankan Reatc Native pada React Native CLI atau Expo
23. • React Native CLI Adalah built-in langsung dari React Native • Expo Adalah framework yang dapat digunakan untuk membangun sebuah aplikasi React khususnya React Native. Expo menyediakan tools, library, dan services yang dapat langsung kita gunakan untuk Membuat aplikasi React Native
26. Gunakan Expo jika …
27. Kamu baru memasuki dunia mobile development • Proses setup lebih cepat • Tidak perlu instal Andoroid SDK ataupun iOS SDK karena Expo menggunakan SDK nya sendiri • Tidak perlu instal Android Studio ataupun Xcode • Hanya memerlukan Node JS • Dapat langsung menggunakan Playground bernama Snack • Dapat membuat aplikasi React Native
28. Pertimbangan lainnya • Beberapa fi tur seperti Push Noti fi cation dan Facebook login sudah disediakan oleh Expo • Beberapa library seperti maps, camera, dan gallery sudah di sediakan Expo sehingga tidak perlu menambahkan library dan dapat berjalan pada Android dan IOS
29. Gunakan React CLI karena …
30. • Expo lebih cocok digunakan dalam pengembangan aplikasi sederhana yang tidak memerlukan kode pada level native module atau fi tur- fi tur dasar yang sudah didukung oleh Expo • Aplikasi yang dibuat dengan Expo memiliki ukuran (size) yang besar sekitar 25 mb (pada react native sekitar 10mb) • Expo tidak mendukung background process sehingga fi tur seperti tracking tidak dapat berjalan pada aplikasi • React Native CLI sudah sangat stable dan realiable jika kita membuat aplikasi untuk jangka panjang dan mudah untuk scalable.
31. Prerequisites
32. • HTML • CSS • JavaScript • React JS
33. Setup Environment
34. Setup Environment Apa saja yang harus disiapkan • Text Editor & Extension • Node JS dan JDK • Android Studio • Android Emulator / Real Device Android (Gunakan AirDroid) • Xcode • iOS Simulator / Real Device iPhone • React Native Debugger • React Native Installation • React Native Folder Structure
35. More details check on : https://reactnative.dev/docs/environment-setup
36. Text Editor • Visual Studio Code • Sublime
38. Extension Install extension pada Visual Studio Code • ES7 React/Redux/GraphQL/React-Native snippets • ESLint • Prettier • Bracket Pair Colorizer • Path Intellisense • GitLens • Codetime
39. Setup Prettier dan ESLint
40. Setup ESLint • Install Extension ESLint pada Text Editor • Install package ESLint secure global untuk menggunakan CLI (npm i -g eslint) • Buat fi le package.json • Gunakan ESLint pada sebuah project menggunakan CLI Eslint (eslint —init) • Setup setting.json pada VSC • Optional • Setup lint pada script package.json • “lint”: “eslint .” • “ fi x-lint”: “eslint . — fi x”
41. React Native Debugger
43. https://https://github.com/jhen0409/react-native-debugger
44. React Native Installation
45. Membuat Project React Native
46. React Native Folder Structures
48. Basic Component
49. https://reactnative.dev/docs/components-and-apis#basic-components
50. React Native Styling
51. • Stylesheet.create • 3rd Parties Library • Styled Component • Emotion • Etc
52. Check awesome React Native for see complete reference about React Native Google it: Awesome React Native
53. Stylesheet.Create
54. Styling React Native
55. 3rd party styling library
58. Hal lain yang perlu dikuasai untuk design pada React Native • Height dan Width • Flexbox • Position • Images
59. Teknik design pattern pada Style React Native
60. https://thoughtbot.com/blog/structure-for-styling-in-react-native
61. React Navigation
62. Tentunya proses routing pada website yang menggunakan React JS dan mobile apps yang menggunakan React Native akan berbeda secara behaviour
63. Beruntungnya sudah ada library untuk mendukung pembuatan routing pada React Native
65. Backend untuk React Native
66. React Native adalah Client App dimana kita tidak bisa membuat service backend di dalamnya
67. Backend untuk React Native React Native sangat fl eksibel untuk menggunakan service dari bahasa pemrograman, framework, hingga SaaS platform apapun untuk digunakan sebagai backend • Express JS • Go • GraphQL • Laravel • Firebase
68. Publish your App
69. Mempublish mobile app yang telah kita buat menggunakan React Native pada masing-masing platform (Android dan iOS) memiliki step dan mekanisme yang berbeda
70. More details: Android: https://reactnative.dev/docs/signed-apk-android iOS: https://reactnative.dev/docs/next/publishing-to-app- store
71. Langkah-langkah untuk mempublish aplikasi React Native ke Google Playstore • Persiapkan icon launcher dan nama aplikasi • Generate keystore • Setup gradle • Generate release APK • Testing pada mode production/public/release • Melakukan pembayaran registrasi pertama kali pada Playstore sebesar $25 • Mengisi beberapa data yang diperlukan • Upload bundle aplikasi • Tunggu proses approval (+- 7 Hari kerja)
72. Untuk langkah-langkah lebih detail silahkan download materi berikut ini: https://drive.google.com/file/d/15SvZsX2j6f9u8Sa6wes03sLUY8VPLdZJ/ view?usp=sharing