1
00:00:02,460 --> 00:00:04,290
Jadi sekarang kita tahu apa

2
00:00:04,290 --> 00:00:07,370
React Native itu, mari kita lihat sekilas di belakang layar.

3
00:00:07,530 --> 00:00:13,080
Sekarang seperti yang saya sebutkan, dengan Bereaksi dan Bereaksi Asli, kami membangun aplikasi dan kode kami biasanya terlihat

4
00:00:13,080 --> 00:00:13,700
seperti ini.

5
00:00:13,710 --> 00:00:19,260
Kami membangun Komponen Bereaksi normal seperti yang Anda ketahui dari web dengan Javascript karena Javascript adalah bahasa

6
00:00:19,260 --> 00:00:21,650
yang kami gunakan untuk membangun aplikasi Bereaksi

7
00:00:21,810 --> 00:00:26,290
Asli tetapi di sana, kami menggunakan komponen khusus seperti tampilan dan teks di sini.

8
00:00:26,310 --> 00:00:31,130
Ini bukan elemen HTML normal Anda karena elemen HTML normal tidak

9
00:00:31,680 --> 00:00:37,230
didukung, platform asli tidak tahu cara menggunakannya, oleh karena itu Anda menggunakan komponen khusus

10
00:00:37,230 --> 00:00:42,600
yang diberikan kepada Anda oleh Bereaksi Asli yang Bereaksi Asli dapat menerjemahkannya ke

11
00:00:42,630 --> 00:00:46,380
instruksi platform asli mengerti, jadi begitulah cara kerjanya.

12
00:00:46,380 --> 00:00:51,150
Sekarang penting untuk memahami bahwa pandangan Anda, sehingga komponen yang Anda kerjakan, oleh karena itu pada akhirnya dikompilasi

13
00:00:51,150 --> 00:00:58,440
ke widget asli asli, ke elemen asli asli, ke kode asli asli. Kode Javascript Anda di mana Anda mengelola logika bisnis

14
00:00:58,470 --> 00:01:03,480
Anda tidak akan dikompilasi tetapi pandangan Anda akan dan itu tentu saja juga

15
00:01:03,750 --> 00:01:09,190
berarti bahwa Anda biasanya mendapatkan kinerja yang hebat ketika membangun Bereaksi aplikasi Asli karena hasilnya

16
00:01:09,190 --> 00:01:14,310
adalah aplikasi asli asli di mana sebagian besar dari kode adalah kode asli asli.

17
00:01:14,310 --> 00:01:19,300
Sekarang jika kita melihat lebih dekat pada komponen ini, penting untuk memahami bahwa Anda tentu

18
00:01:19,320 --> 00:01:25,640
saja dapat menggunakan React untuk membangun aplikasi web tetapi Anda juga dapat membangun aplikasi asli untuk Android dan iOS

19
00:01:25,650 --> 00:01:31,530
dengan kode asli, jadi tanpa React Native atau Anda dapat menggunakan React Native, jadi ini adalah empat cara

20
00:01:31,530 --> 00:01:37,410
berbeda untuk membangun aplikasi yang tentu saja Bereaksi untuk web tidak akan memberi kami aplikasi asli tetapi

21
00:01:37,410 --> 00:01:40,260
hanya untuk membandingkan bagaimana ini akan terkait.

22
00:01:40,260 --> 00:01:45,630
Jadi jika Anda menggunakan Bereaksi untuk web, Anda biasanya bekerja dengan katakanlah div untuk menyusun konten Anda.

23
00:01:46,260 --> 00:01:48,540
Jika Anda akan bekerja secara langsung

24
00:01:48,540 --> 00:01:54,780
dengan Android, jadi Anda akan membangun aplikasi Anda di Android Studio tanpa React Native sama sekali, Anda akan bekerja

25
00:01:54,780 --> 00:02:00,600
dengan tampilan Android misalnya, itu akan menjadi widget yang dapat Anda gunakan di sana di antarmuka pengguna

26
00:02:00,600 --> 00:02:08,970
yang Anda buat langsung dengan fitur platform asli untuk menyusun konten Anda. Di iOS, itu akan menjadi widget tampilan UI dan Anda tidak

27
00:02:08,970 --> 00:02:10,780
perlu mengingat istilah-istilah ini,

28
00:02:10,830 --> 00:02:16,020
saya hanya ingin menjelaskan bagaimana React Native menerjemahkan sesuatu untuk Anda karena di React Native

29
00:02:16,020 --> 00:02:18,180
apps, Anda benar-benar menggunakan elemen tampilan.

30
00:02:18,180 --> 00:02:22,950
Sekarang jika Anda melihat pada elemen tampilan itu, Anda tentu saja melihat bahwa

31
00:02:23,010 --> 00:02:24,830
itu sangat mirip dengan

32
00:02:24,840 --> 00:02:30,510
elemen div, itu terlihat seperti tag HTML, perbedaannya tentu saja dimulai dengan karakter kapital dan tampilan itu

33
00:02:30,690 --> 00:02:36,180
bukan tag HTML , browser tidak akan tahu apa yang harus dilakukan dengan tampilan tetapi React

34
00:02:36,240 --> 00:02:42,990
Native tidak dan React Native akan menerjemahkan tampilan itu ke tampilan Android atau ke tampilan UI untuk Anda dan itu

35
00:02:43,050 --> 00:02:49,260
tentu saja tidak hanya untuk tampilan ini, komponen pembungkus umum tetapi misalnya, jika Anda mengambil input pengguna, di

36
00:02:49,260 --> 00:02:54,210
web Anda akan melakukannya dengan elemen input, jika Anda akan membangun aplikasi Android asli,

37
00:02:54,210 --> 00:02:59,850
Anda akan menggunakan teks edit, untuk aplikasi iOS asli, Anda akan menggunakan bidang teks UI dan di

38
00:03:00,090 --> 00:03:06,240
React Native, ada komponen input teks, sekali lagi React Native mengkompilasi itu ke widget asli untuk Anda dan

39
00:03:06,240 --> 00:03:11,520
itulah cara React Native bekerja di belakang layar. Tentu saja kami tidak peduli tentang web dalam kursus

40
00:03:11,520 --> 00:03:17,310
ini di sini, hanya agar Anda mengerti bahwa ada beberapa kesamaan, kami menggunakan tag ini yang terlihat seperti tag HTML tetapi tentu saja,

41
00:03:17,440 --> 00:03:24,660
perbedaan yang penting adalah bahwa ini adalah komponen khusus yang dikompilasi. ke kode asli. Sekarang seperti yang telah saya sebutkan, penting untuk

42
00:03:24,660 --> 00:03:30,500
memahami bahwa untuk UI, React Native memberi Anda komponen khusus yang kemudian dikompilasi untuk

43
00:03:30,540 --> 00:03:33,000
penggunaan asli, untuk logika Anda

44
00:03:33,060 --> 00:03:38,760
yang lain, jadi jika Anda menggunakan Redux atau jika Anda memiliki logika bisnis, Anda

45
00:03:38,760 --> 00:03:47,070
mengirim permintaan HTTP, Anda mentransformasikan data, semua kode Javascript Anda yang lain tidak dikompilasi ke kode asli melainkan dijalankan di

46
00:03:47,070 --> 00:03:52,980
utas khusus yang dihosting oleh React Native. Jadi Anda dapat membayangkan aplikasi Bereaksi Asli yang

47
00:03:52,980 --> 00:03:58,450
pada akhirnya Anda dapatkan sebagai aplikasi asli asli karena merupakan aplikasi asli, di mana semua tampilan

48
00:03:58,450 --> 00:04:05,760
telah dikompilasi ke widget asli tetapi di mana ada aplikasi mini tambahan di dalam aplikasi Anda, Javascript mini aplikasi yang berjalan di

49
00:04:05,760 --> 00:04:12,690
sana, dihosting dan dimulai oleh Bereaksi Asli sehingga, yang menjalankan semua kode Javascript Anda dan kode Javascript Anda kemudian dapat berbicara

50
00:04:12,690 --> 00:04:13,800
dengan platform asli.

51
00:04:14,160 --> 00:04:19,860
Anda dapat menggambarkan ini seperti ini di sini, Anda memiliki kode Anda, aplikasi Anda dan Anda membangun aplikasi asli

52
00:04:19,860 --> 00:04:25,110
dan itu berjalan pada platform asli dan tentu saja di sana, Anda memiliki fitur platform tertentu yang

53
00:04:25,110 --> 00:04:27,150
tersedia seperti misalnya menggunakan kamera perangkat.

54
00:04:27,150 --> 00:04:32,520
Sekarang seperti yang telah disebutkan, kode Anda dapat dibagi menjadi dua hal di sini - pandangan Anda

55
00:04:32,520 --> 00:04:38,430
dan logika bisnis Anda, demikian juga kode Javascript lainnya. Sekarang seperti yang telah disebutkan beberapa kali,

56
00:04:38,490 --> 00:04:46,620
tampilan Anda dikompilasi ke tampilan asli, ke widget asli untuk platform ini dan kode Anda disimpan sebagai kode Javascript dan Anda dapat

57
00:04:46,620 --> 00:04:53,090
memanfaatkan fitur platform asli seperti kamera karena kode Javascript Anda berjalan dalam virtual khusus mesin pada akhirnya, diputar

58
00:04:53,100 --> 00:04:58,430
dan dihosting oleh React Native di dalam aplikasi Anda, jadi bagian yang tepat di

59
00:04:58,440 --> 00:05:04,710
sini adalah semua di dalam aplikasi asli kami yang kami kirimkan ke toko aplikasi dan bahwa kode

60
00:05:04,710 --> 00:05:10,080
Javascript, mesin virtual Javascript ini, tahu cara berbicara ke fitur platform asli, sehingga untuk sistem

61
00:05:10,200 --> 00:05:14,340
operasi aplikasi Anda berjalan pada akhirnya melalui jembatan khusus yang bisa

62
00:05:14,340 --> 00:05:20,580
Anda katakan dan jembatan itu dan mesin virtual itu, itu semua secara otomatis disediakan oleh React Native.

63
00:05:20,580 --> 00:05:22,050
Anda tidak perlu peduli

64
00:05:22,170 --> 00:05:29,190
dengan ini, yang Anda lakukan hanyalah menulis aplikasi React Native Anda dengan Javascript dan dengan komponen khusus ini dan hanya itu yang perlu Anda ketahui

65
00:05:29,190 --> 00:05:30,720
untuk saat ini, ini adalah

66
00:05:30,720 --> 00:05:36,870
cara aplikasi React Native bekerja di belakang layar dan saya merasa penting untuk menyadari hal ini karena hal itu menghilangkan beberapa keajaiban

67
00:05:37,170 --> 00:05:43,050
dalam arti positif karena Anda memahami apa yang sebenarnya Anda tulis dan apa yang akan terjadi dengan kode Anda dan bagaimana

68
00:05:43,050 --> 00:05:47,020
kode ini berakhir di aplikasi asli dan tentu saja, Anda juga mengerti bahwa Anda

69
00:05:47,100 --> 00:05:51,960
memiliki aplikasi asli asli karena itu pada akhirnya. Tidak semua kode Anda dikompilasi, itu

70
00:05:51,960 --> 00:05:52,980
akan sangat

71
00:05:52,980 --> 00:05:58,300
mustahil tetapi pandangan Anda dikompilasi dan tentu saja, pandangan, sehingga bagian yang dilihat pengguna,

72
00:05:58,320 --> 00:06:03,650
adalah bagian yang paling penting dalam hal kinerja untuk aplikasi karena rendering ulang UI

73
00:06:03,650 --> 00:06:05,700
dan semua itu, itu biasanya

74
00:06:05,700 --> 00:06:10,620
bagian intensif kinerja dan oleh karena itu sangat bagus bahwa ini dikompilasi dan

75
00:06:10,620 --> 00:06:13,410
itulah salah satu kekuatan besar React Native.