materi pembelajaran react native meliputi What is react native Why react native Problem whit react native Apa itu JSX dan ES6

1. 1
2
3
4
5
What is react native
Why react native
Problem whit react native
We’ve Know
Apa itu JSX dan ES6
Read Me
Suryo Atmojo S.Kom M.Kom 1

2. REACT NATIVE
Suryo Atmojo
Universitas Wijaya Putra

3. Suryo Atmojo
Universitas Wijaya Putra

4. What is react native
Suryo Atmojo S.Kom M.Kom 4
Apa itu react native
Let’s Begin Now!
React native merupakan javascript framework yang memungkinkan developer untuk
membangun aplikasi native cross platfrom hanya dengan melakukan satu sumber
kode, kita dapat menggunakan pada dua platfrom baik itu android dan iOS yang
pastinya sangat membantu developer untuk membangun sebuah aplikasi yang tidak
perlu mengembangkan satu per satu pada setiap platfrom.

5. Why react native
Suryo Atmojo S.Kom M.Kom 5
Mengapa react native
Let’s Begin Now!
Untuk mempermudah melakukan pengembangan aplikasi, dengan menggunakan
javascript dapat berjalan di beberapa devices platfrom, seperti Windows 10 desktop,
Windows 10 mobile, Xbox one, Mac OS, Apple TV, Android, iOS.

6. 6Suryo Atmojo S.Kom M.Kom

7. Suryo Atmojo S.Kom M.Kom 7

8. Problem whit react native
Suryo Atmojo S.Kom M.Kom 8
Mengapa react native
Let’s Begin Now!
Problem yang sering dirasakan saat implementasi react native, update versi yang
terlalu cepat, debugging sulit karena pesan error yang sulit dimengerti, harus
menggunakan console.log() dimana-mana, dan jika kita ingin menggunakan 3rd-party
libraries yang sesuai keinginan memang sulit, karena react native merupakan
framework yang cukup terbilang masih baru.

9. We’ve Know
Suryo Atmojo S.Kom M.Kom 9
HOT-Reload
SVG
CrhomeDebugg
er
Flexbox
Fetch
Inspector
npm
Ada beberapa hal yang harus kita ketahui sebelum kita membangun sebuah
aplikasi native dengan menggunakan React Native

10. Apa itu JSX dan ES6
Suryo Atmojo S.Kom M.Kom 10
JSX
Let’s Begin Now!
JSX adalah sebuah tahap preprocessor untuk menambahkan syntax XML pada
javascript. Kita bisa tidak menggunakan react native tanpa menggunakan JSX namun
dengan munggunakan JSX akan membuat react native semakin elegan.
Sama seperti XML, JSX tags memliki sebuah tag nama, atibut dan children. Jika
atribut value menggunakan penutup quotes, maka value tersebut adalah string.

11. Apa itu JSX dan ES6
Suryo Atmojo S.Kom M.Kom 11
ES6
Let’s Begin Now!
ES6 ini sebuah standart baru untuk javascript, bisa dibilang Modern Javascript, jadi
syntax-nya ada perbedaan dari yang javascript biasa, untuk browser kita bisa menulis
pakai ES6 namun hanya browser terbaru saja yang support, yaitu Chrome dan
Firefox, kalau ingin bisa dipakai di seluruh browser ada namanya Babel.js, sebuah
library untuk meng-convert kodingan kita yang dari ES6 ke javascript yg biasa, jadi
bisa digunakan di semua browser. Kalau untuk React Native sendiri sudah
mengimplementasikan Babel out-of-the-box, jadi tidak perlu menginstall Babel pun
kita sudah bisa ngoding di React Native pakai ES6.

12. Text Editor Apa yang bias digunaan
5 keywords and a text field
Penggunaan text editor untuk melakukan implementasi syntax javascript, ada beberapa text editor
yang banyak digunakan.
Suryo Atmojo S.Kom M.Kom 12

13. Get Exponent
Suryo Atmojo S.Kom M.Kom 13
Get Exponent
Let’s Begin Now!
Untuk memudahkan developer melakukan env setup saat implementasi react native,
ada tools yang memudahkan kita yaitu Get Exponent sangat mudah digunakan,
dengan tampilan yang menggunakan GUI sehingga memudahkan developer pemula
tidak perlu lagi menggunakan command prompt pada windows dan terminal pada
linux untuk menjalankan program untuk debugging. Untuk lebih jelasnya dapat dilihat
pada situs resminya

14. STATE
MANAGEMENT

15. REDUX
Suryo Atmojo S.Kom M.Kom 15
Let’s Begin Now!
Redux biasanya digunakan saat developer membangun sebuah aplikasi react native
medium atau large sehingga memudahkan mereka untuk melakukan state
management.

16. REDUX
Suryo Atmojo S.Kom M.Kom 16
Redux Arsitektur :
Let’s Begin Now!
store
Aplikasi yang akan dibuat menggunakan single Redux store untuk menahan semua data dan state. Kita
dapat melihat state dengan memanggil store.getState(). Store pada state tidak pernah dimodifikasi
secara langsung namun dengan cara memanggil store.dispatch(action) untuk dispatch action ke store.
action
action harus jelas sebuah objek mengandung sebuah type field, misalnya {type: ’INCREMENT’}. Kita
juga dapat mendefinisikan type yang kita inginkan. Kita juga dapat memasukan field lain pada sebuah
action object. Kita sering melewatkan sebuah data pada sebuah payload field, misalnya {type:
‘SET_VALUE’, payload: 42}.
reducer
Kita dapat mendefinisikan sebuah function untuk mengatasi action, dan update store. Dengan memilih
bagaimana untuk update sebuah state tergantung pada type dari action reducer menerima function.
Redux akan melewatkan function state pada sebuah store, dan action akan mengirimnya, dengan
menunggu update state object untuk mengembalikan: (state, action) => newstate. Kita memanggil
function sebuah reducer function.
Untuk contoh implementasinya bisa dilihat di React Native Express.

17. MobX
Suryo Atmojo S.Kom M.Kom 17
Let’s Begin Now!
Mobx sebuah library yang membuat state management simple dan scalable dengan menerapkan functional reactive
programming. Filosofi dari MobXsangat sederhana yaitu :
Anything that can be derived from the application state, should be derived. Automatically.
yang termasuk UI, data serialization dan server communication.

18. Xamarin vs Native Script
Suryo Atmojo S.Kom M.Kom 18
Let’s Begin Now!
Xamarin memungkinkan developer untuk membuat single apps multiple platfrom. Xamarin menggunakan basic
programming C# dan mengimplemetasikan metode shared codebase, para developer bisa menggunakan Xamarin untuk
menggembangkan berbagai aplikasi native iOS, Android, dan juga Windows dengan native user interfaces dan berbagi
code pada multiple platform. Secara sederhana, dengan Xamarin memungkinkan para developer membuat aplikasi iOS
dan Android dengan C#.
Native Script adalah sebuah framework untuk membangun native iOS dan Android apps menggunakan javascript dan
CSS. Native script merender UI dengan native platfrom rendering engine, tidak menggunakan webview, menghasilkan
performa sepereti aplikasi native pada umumnya. Memungkinkan developer hanya menggunakan single codebase
javasript untuk iOS dan Android.
Untuk lebih jelas perbedaan secara detail Xamarin dan Native Script bisa dilihat disni.

19. Keuntungan yang tidak adil dari JS
Suryo Atmojo S.Kom M.Kom 19
Let’s Begin Now!
JavasSriptCore framework memiliki kemampuan untuk mengevaluasi JavaScript program dari Swift, Objective-C, dan C-
based apps. Kita juga dapat menggunakan JavaScriptCore untuk memasukan objek secara kustom ke dalam JavaScript
environment.
Bagian buruk dari JavaSript adalah update yang terlalu cepat, sulit untuk debugging dan harus finding 3rd party libraries.

20. Firebase
Suryo Atmojo S.Kom M.Kom 20
Let’s Begin Now!
Dengan menggunakan firebase memberikan solusi bagi para developer untuk memepermudah pekerjaan mereka saat
mengembangkan aplikasi, tidak perlu lagi memikirkan backend developer tinggal menggunakan fitur yang sudah
disediakan oleh firebase.
Beberapa fitur yang dimiliki oleh Firebase adalah sebagai berikut :
1. Firebase Analytics.
2. Firebase Cloud Messaging dan Notifications.
3. Firebase Authentication.
4. Firebase Remote Config.
5. Firebase Real Time Database.
6. Firebase Crash Reporting.
Jadi untuk membuat aplikasi native cross platfrom kita dapat menggunakan : React Native + Redux + Firebase +
CodePush

21. The Sky’s NOT the Limit.

22. Contact Us!
Jl medokan semampir indah I no 3
Surabaya
Indonesia
https://www.facebook.com/rade
nmassuryoatmojo
suryoatm@gmail.com |
suryoatmojo@uwp.ac.id
+62 856 4922 4822
Suryo Atmojo S.Kom M.Kom 22

23. Thank You for Watching!
Suryo Atmojo
Universitas Wijaya Putra
Any Questions?