1
00:00:02,250 --> 00:00:03,310
Apakah kamu berhasil?

2
00:00:03,350 --> 00:00:04,710
Mari lakukan bersama.

3
00:00:04,710 --> 00:00:11,390
Mari kita membuat komponen baru di sini di input tujuan dengan mengimpor Bereaksi dari React dan kemudian di

4
00:00:11,500 --> 00:00:14,040
sini, saya akan memberi nama input

5
00:00:14,040 --> 00:00:20,610
tujuan ini dan saya hanya suka sintaks konstan ini di sini, Anda bisa menggunakan input tujuan fungsi

6
00:00:20,610 --> 00:00:28,120
untuk membuat komponen fungsional Anda, itu akan baik-baik saja terlalu. Lalu di sini, saya akan mengekspor input sasaran default dan sekarang

7
00:00:28,120 --> 00:00:31,030
di sini, kita perlu mengembalikan sesuatu dan ada sesuatu

8
00:00:31,030 --> 00:00:33,700
pada akhirnya dengan input teks dan tombol.

9
00:00:34,090 --> 00:00:42,650
Jadi, izinkan saya ambil seluruh tampilan itu, kembalikan di sini di antara tanda kurung sehingga ini ditulis dalam beberapa baris dan diformat

10
00:00:42,650 --> 00:00:50,110
dengan baik dan tentu saja, kita sekarang perlu mengimpor lagi barang dari Bereaksi Asli karena kami menggunakan beberapa komponen

11
00:00:50,110 --> 00:00:55,840
dari Bereaksi Asli , kami menggunakan komponen view, kami menggunakan komponen input teks, kami

12
00:00:55,840 --> 00:01:00,460
menggunakan komponen tombol dan saya juga ingin menggunakan komponen stylesheet untuk

13
00:01:00,460 --> 00:01:02,270
mengatur objek stylesheet saya.

14
00:01:02,470 --> 00:01:10,510
Jadi untuk itu, mari kita tambahkan gaya di sini dengan Stylesheet. membuat, meneruskan objek ke Stylesheet itu. buat metode dan tentu

15
00:01:11,140 --> 00:01:16,840
saja ambil gaya dari aplikasi. File js, yang akan menjadi wadah input dan input,

16
00:01:16,840 --> 00:01:21,540
jadi potong keduanya sehingga hanya layar yang tersisa di sini dan kembali dalam input tujuan, saya akan

17
00:01:21,730 --> 00:01:28,510
menambahkan keduanya di sini ke stylesheet saya sehingga ini akan berfungsi lagi. Apa yang tidak berfungsi saat ini adalah ketika

18
00:01:28,510 --> 00:01:37,840
kita mengetuk tombol, kita menambahkan ini karena di sini, kita tidak memiliki status dalam input tujuan dan ketika saya mengetuk tombol, saya sebenarnya

19
00:01:37,870 --> 00:01:42,790
ingin melakukan sesuatu di app. js.

20
00:01:42,910 --> 00:01:49,480
Jadi pertama-tama, kita perlu memecah negara. Sasaran yang dimasukkan tidak boleh dikelola dalam aplikasi. js tetapi harus dikelola

21
00:01:49,480 --> 00:01:54,040
dalam input tujuan karena di situlah kami memiliki input teks

22
00:01:54,040 --> 00:02:01,360
pada akhirnya yang mana pengguna memasukkan tujuan. Jadi mari kita tambahkan import useState di sini di input tujuan dan kemudian

23
00:02:01,360 --> 00:02:08,950
tambahkan logika manajemen negara kita di sini dengan target yang dimasukkan dan setel tujuan yang kita dapatkan dari useState yang kita inisialisasi dengan string kosong, mari kita

24
00:02:08,950 --> 00:02:14,650
tambahkan di sini untuk input tujuan dan dari aplikasi. File js, saya juga akan mengambil input handler

25
00:02:14,650 --> 00:02:18,780
tujuan, memotongnya dari sana dan menambahkannya ke input tujuan di sini,

26
00:02:18,820 --> 00:02:24,910
jadi fungsi ini dalam fungsi yang kita sambungkan ke onChangeText dan sekarang dengan itu, mengambil input pengguna

27
00:02:24,910 --> 00:02:26,490
harus bekerja lagi.

28
00:02:26,740 --> 00:02:32,660
Sekarang untuk tombol, ketika kita menekan ini, saya ingin memicu fungsi di aplikasi. js, saya ingin memicu add handler tujuan dan fungsi itu harus tetap

29
00:02:32,680 --> 00:02:38,360
di sini karena saya perlu mengelola daftar di sini karena aplikasi. File js adalah satu-satunya komponen yang

30
00:02:38,560 --> 00:02:44,350
akan memiliki akses ke input tujuan dan FlatList tempat kami menampilkan tujuan dan berbicara tentang

31
00:02:44,350 --> 00:02:52,950
itu, kami sudah dapat mengimpor input tujuan di sana di app. js dari input tujuan komponen dan menambahkan

32
00:02:52,950 --> 00:03:02,010
input sasaran sebagai komponen di sini di atas FlatList tetapi sekali lagi, sekarang kita harus dapat

33
00:03:02,010 --> 00:03:06,790
mengetahui kapan tombol ditekan dalam komponen ini dan di

34
00:03:06,790 --> 00:03:14,740
Bereaksi, Anda melakukannya dengan melewati fungsi yang anak komponen harus dieksekusi akhirnya sebagai penyangga

35
00:03:14,740 --> 00:03:16,150
komponen anak.

36
00:03:16,150 --> 00:03:20,850
Jadi di sini, kita bisa menambahkan diAddGoal, nama itu sepenuhnya terserah Anda, itu

37
00:03:20,860 --> 00:03:22,230
adalah prop yang

38
00:03:22,840 --> 00:03:25,990
Anda definisikan dan poin ini di add goal handler.

39
00:03:26,030 --> 00:03:32,980
Ini saja tidak akan melakukan apa pun kecuali onAddGoal sekarang akan diterima sebagai prop di dalam input tujuan dan itu akan

40
00:03:32,980 --> 00:03:37,520
menunjuk pada suatu fungsi, yang berarti kita dapat menjalankannya sebagai fungsi di sana.

41
00:03:37,540 --> 00:03:41,550
Jadi dalam input tujuan, di sana di media, saya bisa

42
00:03:41,950 --> 00:03:45,990
langsung menunjuk ke prop. diAddGoal, bukan?

43
00:03:46,000 --> 00:03:51,370
Karena onAddGoal adalah nama prop yang saya setting di sini di app. File js, yang diterima di dalam input

44
00:03:51,370 --> 00:03:57,430
tujuan pada objek props yang kita dapatkan di setiap komponen fungsional dan onAddGoal menunjuk pada suatu fungsi,

45
00:03:57,430 --> 00:04:00,200
sehingga kita dapat meneruskannya ke onPress sehingga onPress

46
00:04:00,330 --> 00:04:05,630
atau React Native karena itu tahu bahwa ia harus memanggil fungsi ini ketika kami menekan

47
00:04:05,630 --> 00:04:06,470
tombol,

48
00:04:06,550 --> 00:04:09,430
itulah cara Anda melakukan ini di Bereaksi Asli.

49
00:04:09,430 --> 00:04:17,150
Masih kami akan mengalami masalah karena dalam add handler tujuan, saya mengacu pada sasaran yang dimasukkan dan yang sebelumnya dikelola di sini

50
00:04:17,170 --> 00:04:19,670
tetapi tidak lagi, kami mengelola sasaran yang

51
00:04:19,750 --> 00:04:25,540
dimasukkan yang merupakan input teks yang dimasukkan oleh pengguna dalam sasaran masukan sekarang dan bukan di

52
00:04:25,550 --> 00:04:26,340
aplikasi. js.

53
00:04:26,950 --> 00:04:32,620
Jadi tambahkan handler tujuan seharusnya sekarang menerima argumen yang merupakan judul tujuan atau apa pun yang Anda ingin

54
00:04:32,620 --> 00:04:33,160
beri

55
00:04:33,190 --> 00:04:37,530
nama, nama ini terserah Anda dan itulah yang kami simpan sebagai nilai di sini.

56
00:04:37,540 --> 00:04:47,700
Sekarang kita harus memastikan bahwa kita meneruskan argumen ini ketika pada add goal dieksekusi di input goal.

57
00:04:48,870 --> 00:04:55,350
Jadi itu terjadi di sini pada pers dan di sana kita hanya menunjuk ini untuk juga mengatur

58
00:04:55,350 --> 00:04:58,410
argumen yang akhirnya harus diteruskan, kita mendapatkan

59
00:04:58,410 --> 00:05:02,620
dua opsi, opsi pertama adalah kita mengatur fungsi panah anonim di sini.

60
00:05:02,640 --> 00:05:08,250
Sekarang fungsi panah ini akan dieksekusi pada akhirnya dan karena itu sekarang kita dapat menambahkan

61
00:05:08,250 --> 00:05:09,930
tanda kurung di sini

62
00:05:09,960 --> 00:05:16,050
karena ini sekarang tidak akan dieksekusi ketika ini diberikan terlebih dahulu, sebaliknya fungsi panah ini akan

63
00:05:16,050 --> 00:05:17,730
didaftarkan sebagai fungsi yang

64
00:05:17,730 --> 00:05:25,230
akan dieksekusi untuk onPress dan sekarang di sini diAddGoal, kita dapat meneruskan tujuan yang dimasukkan misalnya, yang akan berfungsi atau

65
00:05:25,290 --> 00:05:30,690
sebagai alternatif, kita tidak menggunakan pendekatan fungsi panah anonim ini dan karenanya kita tidak

66
00:05:30,690 --> 00:05:38,790
dapat menambahkan tanda kurung di sini tetapi kemudian kita dapat menggunakan fitur Javascript lain, pada fungsi yang dapat kita panggil untuk

67
00:05:39,120 --> 00:05:43,560
pra-konfigurasi beberapa argumen yang akhirnya harus diteruskan ketika fungsi ini dijalankan.

68
00:05:43,560 --> 00:05:47,190
Argumen pertama selalu untuk apa kata kunci ini harus merujuk.

69
00:05:47,190 --> 00:05:52,680
Ini tidak masalah bagi kami di sini, jadi kami hanya bisa menulis ini tetapi argumen kedua

70
00:05:52,680 --> 00:05:58,440
di sini atau semua argumen lainnya sesudahnya sebenarnya akan menjadi argumen yang diterima oleh fungsi ini ketika dipanggil

71
00:05:58,440 --> 00:06:00,270
dan dipanggil pada tombol tekan.

72
00:06:00,270 --> 00:06:06,210
Jadi ini sekarang adalah argumen yang diteruskan ke fungsi onAddGoal yang pada akhirnya hanyalah fungsi add goal

73
00:06:06,210 --> 00:06:10,600
handler kita dan di sana, kita perlu judul gol, jadi kita perlu

74
00:06:10,620 --> 00:06:12,080
meneruskan ini, jadi

75
00:06:12,120 --> 00:06:17,740
oleh karena itu di sini, sekarang saya dapat mengatur enter Tujuan sebagai argumen yang akan diteruskan

76
00:06:17,940 --> 00:06:20,760
dan itu normal sintaksis Javascript vanilla di sini.

77
00:06:21,850 --> 00:06:24,740
Dan sekarang dengan ini, semakin diterjemahkan, itu terlihat bagus dan

78
00:06:24,740 --> 00:06:25,920
jika saya masuk

79
00:06:26,090 --> 00:06:31,340
belajar React Native, masih mendapatkan hasil di sini. Sehingga semua berfungsi tetapi sekarang kami membagi

80
00:06:31,340 --> 00:06:36,770
aplikasi ini menjadi beberapa komponen yang biasanya Anda lakukan di Bereaksi aplikasi dan Bereaksi aplikasi asli

81
00:06:36,770 --> 00:06:42,740
seperti yang Anda lakukan di Bereaksi untuk aplikasi web karena itu membuat komponen Anda lebih ramping, lebih

82
00:06:42,800 --> 00:06:46,550
fokus dan kode Anda lebih terorganisir dan lebih mudah dimengerti.