1
00:00:02,620 --> 00:00:08,140
Untuk melihat dan mengedit kode kami, kami memerlukan editor dan saya sarankan menggunakan Visual Studio Code yang merupakan

2
00:00:08,140 --> 00:00:13,480
bebas untuk digunakan, IDE yang sangat kuat yang bagus untuk pengembangan Javascript, yang pada akhirnya kami lakukan

3
00:00:13,480 --> 00:00:14,210
di sini.

4
00:00:14,290 --> 00:00:16,680
Anda bisa mendapatkannya dari kode. Studio visual. com di

5
00:00:16,720 --> 00:00:21,490
sana Anda menemukan versi untuk Mac, Windows dan Linux, cukup unduh satu untuk sistem

6
00:00:21,790 --> 00:00:28,070
operasi Anda dan berjalan melalui installer ini memberi Anda. Setelah Anda menginstalnya, buka Visual Studio Code

7
00:00:28,070 --> 00:00:34,390
dan di sana, buka proyek Anda dengan membuka file dan kemudian hanya memilih proyek

8
00:00:34,390 --> 00:00:40,200
Anda, dalam kasus saya, rn-first-app. Klik buka di sini dan ini sekarang

9
00:00:40,220 --> 00:00:47,080
akan membuka proyek di sini di Visual Studio Code. Sekarang Visual Studio Code saya terlihat seperti itu terlihat di sini karena saya memiliki tema

10
00:00:47,380 --> 00:00:51,950
khusus yang diaktifkan yang dapat Anda ubah di bawah preferensi, tema warna dan di sana saya menggunakan tema plus gelap.

11
00:00:51,970 --> 00:00:54,420
Jadi jika Anda ingin memiliki tampilan

12
00:00:54,670 --> 00:01:00,680
yang sama Anda dapat menggunakan itu dan saya juga menginstal ekstensi khusus yang dapat Anda lakukan di

13
00:01:00,760 --> 00:01:08,230
bawah tampilan ekstensi, di sana saya mendapat tema ikon materi diinstal, yang ini di sini yang benar-benar opsional tetapi Anda dapat

14
00:01:08,230 --> 00:01:09,550
menginstalnya dari di

15
00:01:09,580 --> 00:01:13,480
sana juga dan kemudian kembali untuk melihat explorer untuk melihat file

16
00:01:13,510 --> 00:01:16,060
Anda lagi sehingga Anda mendapatkan ikon file

17
00:01:16,060 --> 00:01:24,290
yang sama seperti yang saya miliki di sini, sekali lagi ini benar-benar opsional dan dengan itu, aplikasi React Native kami dikelola oleh expo.

18
00:01:24,300 --> 00:01:28,920
Sekarang izinkan saya dengan cepat memandu Anda melalui apa yang kami miliki di sini dan kemudian menunjukkan kepada Anda apa yang dapat

19
00:01:29,190 --> 00:01:31,470
Anda ubah dalam kode untuk mengubah sesuatu di aplikasi Anda.

20
00:01:31,470 --> 00:01:34,350
Sekarang kami memiliki beberapa folder dan file

21
00:01:34,380 --> 00:01:37,570
di sini, file. folder expo cukup tahan

22
00:01:37,590 --> 00:01:43,500
beberapa konfigurasi untuk expo, Anda tidak perlu menyentuh ini. Folder aset, yang menampung beberapa gambar dalam kasus ini, seperti

23
00:01:43,500 --> 00:01:49,470
ikon aplikasi Anda dan gambar splash screen dan kami akan menyelami bagaimana Anda dapat menyesuaikan ini di akhir kursus dan kami akan menggunakan

24
00:01:49,470 --> 00:01:55,470
aset lain seperti gambar di umum sepanjang kursus ini tentu saja. Folder modul simpul menampung semua dependensi dari

25
00:01:55,470 --> 00:02:01,120
proyek ini, itu misalnya Bereaksi dan Bereaksi Asli tetapi juga dependensi dependensi dan folder ini

26
00:02:01,120 --> 00:02:05,740
dikelola secara otomatis untuk Anda sehingga Anda tidak perlu menyentuh ini dan

27
00:02:05,790 --> 00:02:11,460
Anda tidak harus menyentuhnya memang . gitignore adalah file yang membantu kami dengan git yang

28
00:02:11,460 --> 00:02:16,920
merupakan sistem manajemen kode sumber atau alat manajemen kode sumber dan Anda tidak perlu menggunakan git, jika Anda

29
00:02:16,920 --> 00:02:22,860
melakukannya, Anda mungkin tahu apa yang gitignore lakukan dan jika Anda tidak tahu apa git adalah, setelah kuliah ini,

30
00:02:22,860 --> 00:02:29,100
Anda akan menemukan pengantar singkat untuk itu atau beberapa sumber daya yang membantu Anda memulai dengan itu tetapi Anda tidak

31
00:02:29,130 --> 00:02:34,530
perlu menggunakan git untuk bekerja dengan React Native. Watchmenconfig, itu adalah sesuatu yang dapat Anda abaikan karena Anda melihatnya kosong di sini, ini

32
00:02:34,530 --> 00:02:39,750
adalah alat yang digunakan di belakang layar oleh expo pada akhirnya dan aplikasi. file js lalu file yang

33
00:02:39,750 --> 00:02:45,930
menyimpan kode yang bertanggung jawab untuk menampilkan apa yang kita lihat di sini di layar.

34
00:02:46,590 --> 00:02:52,350
Kami akan menyelami ini dalam satu detik, aplikasi. json mengadakan beberapa konfigurasi untuk aplikasi React Native kami yang didukung oleh expo

35
00:02:52,350 --> 00:02:59,140
dan kami akan menyelami ini di sepanjang kursus ini juga untuk saat ini, mari abaikan saja. Konfigurasi Babel mengkonfigurasi bagaimana kode Javascript

36
00:02:59,140 --> 00:03:04,950
dioptimalkan dan dikompilasi, Anda dapat meninggalkan default di sini

37
00:03:04,950 --> 00:03:10,380
juga dan paket. file json mengelola dependensi Anda dan di

38
00:03:10,700 --> 00:03:17,970
sana Anda melihat bahwa Anda menggunakan expo tetapi juga Bereaksi, juga Bereaksi DOM karena expo sebenarnya juga mendukung pembangunan aplikasi Bereaksi untuk web

39
00:03:17,970 --> 00:03:23,910
tetapi juga Bereaksi Pribumi di sini dan Bereaksi Pribumi karena sekali lagi, expo memberi Anda opsi juga membangun aplikasi

40
00:03:23,910 --> 00:03:28,710
web dengan bantuan React Native, itu bukan sesuatu yang akan kita fokuskan dalam kursus ini.

41
00:03:28,710 --> 00:03:30,600
Jadi itulah pengaturan yang kami miliki

42
00:03:30,600 --> 00:03:35,520
di sini, file penting bagi kami saat ini adalah aplikasi. File js karena pada akhirnya bertanggung jawab

43
00:03:35,790 --> 00:03:37,800
untuk mendapatkan sesuatu ke layar.

44
00:03:37,800 --> 00:03:43,350
Sekarang konten file persis yang Anda lihat di sini di aplikasi Anda. File js dapat berubah dari waktu

45
00:03:43,410 --> 00:03:48,390
ke waktu, proyek awal ini yang dihasilkan secara otomatis kadang-kadang diubah.

46
00:03:48,570 --> 00:03:53,520
Itu tentu saja tidak mempengaruhi apa yang saya jelaskan di sini atau kursus ini, itu tidak berarti bahwa

47
00:03:53,520 --> 00:03:55,300
apa pun sudah usang atau

48
00:03:55,350 --> 00:03:57,580
semacamnya, itu hanya proyek awal yang berbeda

49
00:03:57,720 --> 00:04:03,130
dan jika Anda ingin mengikuti dengan persis sama dengan yang saya dapatkan, Anda Saya akan menemukannya terlampir, jadi Anda juga

50
00:04:03,150 --> 00:04:07,320
dapat menggunakannya tetapi tentu saja, Anda juga dapat melanjutkan dengan pemirsa jika terlihat sedikit berbeda

51
00:04:07,320 --> 00:04:09,870
karena seperti yang saya sebutkan, itu hanya proyek awal

52
00:04:09,870 --> 00:04:14,250
yang Anda punya, React Native tentu saja masih bekerja sama dengan Saya menjelaskannya di sini dan

53
00:04:14,250 --> 00:04:19,770
karena itu Anda benar-benar dapat mengikuti dan menambahkan aplikasi Anda. File js persis seperti yang saya tambahkan dan di

54
00:04:19,770 --> 00:04:24,290
sana kita melihat kita mengimpor Bereaksi seperti yang akan kita lakukan di aplikasi web Bereaksi.

55
00:04:24,420 --> 00:04:30,630
Kita perlu mengimpor Bereaksi karena di sini, Anda juga dapat melihat kami menggunakan jsx yang merupakan

56
00:04:30,630 --> 00:04:32,640
sintaksis Javascript khusus ini

57
00:04:32,790 --> 00:04:35,390
yang terlihat seperti HTML tetapi pada akhirnya

58
00:04:35,460 --> 00:04:42,120
hanya Javascript dan jika Anda tidak pernah melihat ini, pasti terjun ke aplikasi Bereaksi atau Bereaksi tutorial

59
00:04:42,270 --> 00:04:45,720
pertama, saya berharap Anda tahu bagaimana Bereaksi umumnya bekerja.

60
00:04:45,720 --> 00:04:51,270
Kami selalu memiliki impor lain di sini dan itulah impor Bereaksi Asli tempat kami mengimpor stylesheet,

61
00:04:51,360 --> 00:04:53,220
teks, dan tampilan dari sana.

62
00:04:53,220 --> 00:04:59,640
Sekarang ini adalah komponen dan fitur khusus yang saya bicarakan sebelumnya, teks dan tampilan adalah komponen yang

63
00:04:59,640 --> 00:05:06,720
disediakan oleh React Native yang dikompilasi ke widget platform asli dan stylesheet adalah fitur tambahan yang disediakan oleh

64
00:05:06,720 --> 00:05:10,290
React Native yang membantu Anda dalam menata gaya.

65
00:05:10,290 --> 00:05:15,820
Sekarang di sini, kami memiliki komponen Bereaksi normal karena kami juga akan membuatnya dalam aplikasi Bereaksi untuk web.

66
00:05:16,120 --> 00:05:21,960
Kami memiliki komponen fungsional di sini dan dengan bantuan React hooks, kami dapat bekerja dengan komponen

67
00:05:21,960 --> 00:05:28,110
fungsional hanya karena Anda mungkin tahu dan komponen fungsional ini mengembalikan beberapa kode JSX yang dirender ke

68
00:05:28,200 --> 00:05:29,270
layar dan

69
00:05:29,400 --> 00:05:35,550
di sini kami menggunakan widget tampilan atau komponen tampilan yang disediakan oleh React Native dan komponen

70
00:05:36,270 --> 00:05:38,790
teks dan komponen tampilan seperti div,

71
00:05:38,790 --> 00:05:45,720
itu pembungkus yang baik, juga baik untuk menerapkan beberapa gaya untuk beberapa wadah dan mendeteksi kemudian digunakan untuk menghasilkan

72
00:05:45,870 --> 00:05:50,030
beberapa teks yang Anda tempatkan di antara pembukaan dan tag penutup.

73
00:05:50,270 --> 00:05:57,090
Dan di sini, kami memiliki beberapa gaya yang ditentukan, React Native tidak menggunakan CSS tetapi menggunakan sintaks

74
00:05:57,090 --> 00:06:04,890
styling yang didasarkan pada CSS atau mengikuti konvensi penamaan yang serupa, tetapi kami akan menyelami lebih dalam bagaimana cara mendesain

75
00:06:04,890 --> 00:06:08,550
aplikasi React Native Anda sepanjang kursus ini. tentu saja.

76
00:06:08,550 --> 00:06:14,490
Maka dengan itu, mari kita ubah apa yang kita lihat di layar dan mari kita benar-benar menambahkan tombol di sini.

77
00:06:14,490 --> 00:06:20,730
Sekarang hal baiknya adalah, kita dapat mengimpor tombol dari React Native, itu komponen inti lain yang disediakan oleh React Native, sehingga kita dapat

78
00:06:20,730 --> 00:06:26,140
menambahkan impor ini dan kemudian menggunakan tombol di sana. Namun kita tidak menggunakannya dengan tag pembuka

79
00:06:26,140 --> 00:06:27,280
dan penutup

80
00:06:27,280 --> 00:06:33,190
tetapi sebagai elemen penutup sendiri dan kemudian kita dapat menambahkan prop judul di sini untuk mengatur

81
00:06:33,460 --> 00:06:36,620
teks yang kita lihat pada tombol, misalnya mengubah teks.

82
00:06:36,850 --> 00:06:41,010
Sekarang ketika kita mengetuk tombol ini, kita mungkin ingin mengubah teks ini di sini dan

83
00:06:41,200 --> 00:06:45,970
untuk ini, kita perlu mengelola beberapa keadaan di sini karena saya ingin mengubah beberapa data yang akan

84
00:06:46,180 --> 00:06:49,680
menyebabkan komponen ini dirender ulang dan untuk ini, Anda perlu keadaan .

85
00:06:49,900 --> 00:06:56,110
Sekarang sebelum Bereaksi 16. 8 yang didukung di sini, Anda harus mengubahnya menjadi komponen berbasis

86
00:06:56,110 --> 00:07:00,270
kelas untuk menggunakanState, karena Bereaksi 16. 8, kita dapat menggunakan

87
00:07:00,310 --> 00:07:03,710
kait React dan jika Anda tidak tahu apa

88
00:07:03,820 --> 00:07:08,620
itu kait, Anda pasti harus menyelam ke dasar-dasar kait, terpasang Anda menemukan

89
00:07:08,620 --> 00:07:14,800
sumber daya yang membantu Anda memulai dengan itu. Kait diimpor dari Bereaksi dan di sini, kita memerlukan kait useState

90
00:07:14,800 --> 00:07:17,290
yang memungkinkan kita mengelola status dalam komponen fungsional.

91
00:07:17,290 --> 00:07:26,230
Dengan itu, kita dapat menggunakan hook itu dengan memanggil useState di sini dan memberikannya nilai default yang bisa berupa teks ini di sini, mari kita potong

92
00:07:26,230 --> 00:07:27,910
dari sana dan tambahkan

93
00:07:27,910 --> 00:07:34,420
di sini sebagai string dan kemudian di sini kita dapat menggunakan array destrrukturisasi untuk mendapatkan output kita. teks dan

94
00:07:34,420 --> 00:07:41,040
dapatkan fungsi untuk mengubah atau mengatur ulang atau mengganti teks keluaran ini dan begitulah cara useState hook bekerja, itu

95
00:07:41,110 --> 00:07:43,800
memberi Anda sebuah array dengan tepat dua

96
00:07:43,840 --> 00:07:49,620
elemen, di mana elemen pertama adalah snapshot keadaan Anda saat ini, jadi baik keadaan awal kita

97
00:07:49,660 --> 00:07:55,510
atau sesudahnya untuk siklus re-render berikutnya, apa pun yang kita atur status kita dan yang kedua adalah

98
00:07:55,510 --> 00:07:56,120
fungsi

99
00:07:56,220 --> 00:08:01,300
yang memungkinkan Anda untuk mengatur negara Anda ke nilai baru dan memanggil fungsi itu

100
00:08:01,530 --> 00:08:07,150
akan merender ulang seluruh komponen dan teks keluaran kemudian akan merujuk ke yang terbaru negara baru.

101
00:08:07,180 --> 00:08:13,670
Jadi di sini di antara teks, saya ingin menampilkan teks keluaran dan setelah menekan tombol ini,

102
00:08:13,680 --> 00:08:15,400
saya ingin mengubah ini.

103
00:08:15,400 --> 00:08:21,250
Jadi pada tombol, kita dapat mendaftar onPress yang pada dasarnya setara dengan onClick yang

104
00:08:21,310 --> 00:08:22,640
akan kita miliki

105
00:08:22,660 --> 00:08:29,020
di web, ini onPress dan kemudian kita perlu mengikat ini ke suatu fungsi, misalnya ke fungsi

106
00:08:29,020 --> 00:08:36,740
inline anonim di sini dengan sintaks ini tempat kita memanggil set output text dan kita atur ini ke text berubah.

107
00:08:36,820 --> 00:08:42,340
Jadi ini akan memanggil fungsi ini di sini, menimpa keadaan kita, karena itu render kembali komponen

108
00:08:42,340 --> 00:08:48,100
ini, ini akan diperbarui dalam siklus render berikutnya dan karena itu karena kita menampilkan teks keluaran di

109
00:08:48,100 --> 00:08:51,520
sana, ini akan berubah. Jika sekarang kita menyimpan

110
00:08:51,520 --> 00:08:58,840
semua itu, yang paling keren adalah aplikasi Anda yang seharusnya masih dibuka di ponsel Anda secara otomatis dimuat

111
00:08:58,850 --> 00:08:59,390
ulang,

112
00:08:59,390 --> 00:09:00,830
Anda tidak perlu

113
00:09:00,920 --> 00:09:08,090
memulai ulang, Anda tidak perlu memindai kode ini lagi, cukup dengan mengubah kode dan menyimpan file ini,

114
00:09:08,150 --> 00:09:15,320
itu harus secara otomatis memuat ulang di sini. Dan sekarang jika sekarang kita ketuk ubah teks di sini, Anda

115
00:09:15,320 --> 00:09:19,020
melihat teks berubah dan itulah aplikasi React Native pertama Anda melakukan tugasnya

116
00:09:19,040 --> 00:09:24,590
didukung oleh expo tapi sekali lagi Anda dapat membangun dan menerbitkan ini sebagai aplikasi mandiri dan kami akan

117
00:09:24,740 --> 00:09:30,110
melakukannya pada akhir kursus dan karenanya ini adalah cara yang menakjubkan untuk memulai dan Bereaksi pengembangan asli bisa

118
00:09:30,110 --> 00:09:30,850
semudah itu.

119
00:09:31,150 --> 00:09:36,510
Sekarang dengan itu, mari selesaikan modul pertama ini sebelum kita menyelam lebih dalam ke React Native

120
00:09:36,590 --> 00:09:40,130
dan menulis React Native code dari modul course kedua.