1
00:00:02,380 --> 00:00:08,420
Mari kita mulai dengan dialog konfirmasi di sini di layar edit produk. Kita cukup mengimpor API peringatan dari React

2
00:00:08,450 --> 00:00:16,490
Native yang memungkinkan kita untuk menampilkan peringatan yang bagus dan kemudian menambahkan metode baru di sini mungkin, kita semua bisa

3
00:00:16,490 --> 00:00:22,830
melakukannya sejalan tetapi memiliki kode yang lebih terstruktur di mana saya memiliki handler hapus saya.

4
00:00:23,020 --> 00:00:28,600
Ngomong-ngomong, bagaimana Anda menyebutkan fungsi Anda sepenuhnya terserah Anda, saya hanya suka penamaan pawang ini di sini jika saya tetapkan itu untuk acara

5
00:00:28,600 --> 00:00:35,950
saya, pemancar dalam kode JSX sehingga bisa dikatakan dan di sana kita bisa memanggil waspada. lansiran untuk menampilkan lansiran dengan judul

6
00:00:35,980 --> 00:00:37,690
Anda yakin

7
00:00:37,720 --> 00:00:38,960
pesan,

8
00:00:39,880 --> 00:00:45,670
apakah Anda benar-benar ingin menghapus item ini dan kemudian

9
00:00:45,670 --> 00:00:48,940
array dengan semua tombol yang

10
00:00:48,940 --> 00:00:58,020
ingin kami sajikan di mana tombol nomor satu memiliki teks tidak dan gaya standar.

11
00:00:58,060 --> 00:01:02,800
Hanya ada tiga gaya default atau gaya prakonfigurasi yang dapat Anda pilih dan tidak ada penangan khusus

12
00:01:02,800 --> 00:01:03,930
pada tombol pertama ini.

13
00:01:04,030 --> 00:01:07,180
Tombol kedua memiliki ya, di sana saya

14
00:01:07,190 --> 00:01:10,640
ingin memiliki gaya destruktif untuk menandai ini karena

15
00:01:10,640 --> 00:01:17,900
hei ini akan menghapus sesuatu dan penangan onPress di sini kemudian pada akhirnya memegang fungsi yang

16
00:01:17,900 --> 00:01:20,540
benar-benar akan mengirimkan tindakan penghapusan.

17
00:01:20,610 --> 00:01:28,110
Jadi sekarang ini adalah delete handler yang ingin saya jalankan ketika kita mengklik tombol delete itu dan tentu saja saya salah komponen

18
00:01:28,110 --> 00:01:30,080
yang baru saja saya lihat.

19
00:01:30,210 --> 00:01:31,610
Mari kita potong ini,

20
00:01:31,800 --> 00:01:33,740
ini bukan di dalam layar edit produk,

21
00:01:33,750 --> 00:01:35,440
kita tidak perlu impor peringatan

22
00:01:35,460 --> 00:01:41,310
di sana, ini adalah layar produk pengguna yang saya bicarakan. Di sana kita perlu mengimpor peringatan, di

23
00:01:41,700 --> 00:01:47,380
sana kita harus menambahkan penangan ini dan sekarang penangan penghapusan harus ditugaskan ke tombol

24
00:01:47,400 --> 00:01:53,730
hapus ini di sini, jadi di sini kita bisa menunjuk pada penangan hapus dan fungsi anonim

25
00:01:53,980 --> 00:02:00,790
ini dapat dipotong dari sana dan dapat pindah ke sini dan ganti penangan onPress ini untuk tombol ini

26
00:02:00,790 --> 00:02:07,320
dan sekarang dengan itu, kita harus mendapatkan popup ini, dialog konfirmasi ini sebelum kita benar-benar menghapus sesuatu.

27
00:02:07,330 --> 00:02:09,790
Jadi jika saya klik hapus, sekarang saya bertanya, jika saya

28
00:02:09,790 --> 00:02:10,210
tekan

29
00:02:10,210 --> 00:02:11,640
tidak, tidak ada yang terjadi,

30
00:02:11,650 --> 00:02:16,060
hanya jika saya klik ya kita hapus ini. Kesalahan kecil tentu saja adalah bahwa

31
00:02:16,060 --> 00:02:17,920
data barang yang kita butuhkan

32
00:02:20,570 --> 00:02:21,790
harus tersedia.

33
00:02:21,830 --> 00:02:24,920
Jadi di sini kita meneruskan ID yang ingin kita hapus,

34
00:02:24,920 --> 00:02:30,180
jadi sebenarnya untuk penangan hapus, kita memerlukan ID dari produk yang kita lamar penangan ini sehingga di

35
00:02:30,410 --> 00:02:35,360
sini saya memiliki ID yang tersedia dan itu berarti bahwa ketika penangan penghapusan dipanggil di

36
00:02:35,360 --> 00:02:37,980
bawah sana, kita harus memastikan mendapat ID.

37
00:02:38,510 --> 00:02:40,150
Jadi ada dua cara untuk melakukan itu, fungsi anonim

38
00:02:40,400 --> 00:02:46,100
di mana kami menjalankan delete handler secara manual dan meneruskan itemData. barang. id atau alternatif

39
00:02:46,100 --> 00:02:55,000
untuk itu, melewati delete handler seperti ini tetapi gunakan bind untuk mengatur ulang argumen apa pun yang

40
00:02:55,000 --> 00:03:01,150
akan didapat fungsi ini. Bind selalu membutuhkan nilai untuk kata kunci ini di dalam fungsi yang akan dijalankannya. Di sana kita hanya bisa

41
00:03:01,150 --> 00:03:04,170
meneruskan ini, itu tidak masalah tetapi argumen kedua

42
00:03:04,360 --> 00:03:08,290
sekarang adalah argumen pertama yang akan dihapus oleh handler, jadi di

43
00:03:08,620 --> 00:03:15,640
sini kita melewati itemData. barang. Indo. Sekarang dengan itu, kami

44
00:03:15,640 --> 00:03:22,530
memastikan bahwa kami benar-benar dapat menekan ya dan itu akan berhasil, jika sekarang kami kembali ke admin, klik hapus, tekan ya,

45
00:03:22,600 --> 00:03:27,700
ini sekarang benar-benar berfungsi dan jika kami menekan tidak, tidak ada yang terjadi, ya hapus.

46
00:03:27,700 --> 00:03:29,020
Jadi itu yang

47
00:03:29,230 --> 00:03:34,450
pertama dan untuk memastikan bahwa kita menavigasi kembali, jika kita menyimpan ini, sekarang kita perlu pergi

48
00:03:34,750 --> 00:03:41,680
ke layar edit produk dan ada di dalam penangan kirim kita, tidak peduli apakah kita mengirim pembaruan atau membuat tindakan produk,

49
00:03:41,680 --> 00:03:51,870
di akhirnya saya ingin juga memanggil alat peraga navigasi kembali untuk kembali ke layar sebelumnya. Dan jika kita sekarang menyimpan ini dan kita pergi ke layar

50
00:03:53,430 --> 00:03:58,920
admin dan saya lakukan untuk sekarang mengirimkan produk kosong, saya tentu saja mendapat

51
00:04:01,990 --> 00:04:07,750
peringatan tetapi ini umumnya berfungsi, ini kembali dan jika saya mengedit produk, ini

52
00:04:07,750 --> 00:04:08,890
juga berfungsi.

53
00:04:08,950 --> 00:04:13,470
Jadi sekarang dengan ini, kita sudah selesai dengan semua manajemen input itu, hal yang

54
00:04:13,510 --> 00:04:18,920
tersisa yang sekarang ingin saya lakukan sebelum saya benar-benar menyelesaikan semua ini adalah untuk sekarang saya

55
00:04:18,920 --> 00:04:20,850
ingin mengoptimalkan item produk sedikit

56
00:04:21,040 --> 00:04:26,800
lebih dan cara kita menggunakan kembali kartu kami lihat di sini dengan bayangan dan sebagainya karena kami menggunakannya

57
00:04:27,040 --> 00:04:28,270
dalam banyak komponen

58
00:04:28,270 --> 00:04:33,940
dan jika Anda menemukan diri Anda menggunakan sesuatu dalam banyak komponen, Anda mungkin selalu ingin memikirkan apakah

59
00:04:33,940 --> 00:04:35,920
Anda dapat mengoptimalkan ini sedikit lebih

60
00:04:35,980 --> 00:04:39,370
banyak dan memang di sini , kami memiliki potensi pengoptimalan.

61
00:04:39,490 --> 00:04:42,600
Jadi bagaimana kita bisa mengoptimalkan ini?

62
00:04:42,720 --> 00:04:48,720
Yah kita bisa membuat komponen terpisah di sini di folder UI kita dari folder

63
00:04:49,080 --> 00:04:55,800
komponen yang kita namakan keranjang. js, tempat kami hanya menyimpan tampilan keranjang ini. Komponen kereta bisa

64
00:04:55,800 --> 00:05:05,140
menjadi komponen yang sangat sederhana pada akhirnya. Kami mengimpor Bereaksi dari Bereaksi di sini karena kami perlu membuat komponen dan

65
00:05:05,260 --> 00:05:13,990
kami mengimpor pandangan dari Bereaksi Asli, seperti itu dan sekarang di sini, kami membuat komponen kereta kami di mana kami mendapatkan alat peraga kami,

66
00:05:14,030 --> 00:05:21,000
mengembalikan beberapa jsx dan mengekspor komponen ini di akhirnya, meskipun kita juga perlu mengatur beberapa gaya karena itulah ide inti

67
00:05:21,000 --> 00:05:23,390
di balik komponen ini, ini semua

68
00:05:23,400 --> 00:05:30,370
tentang memberi kita beberapa gaya yang telah dikonfigurasikan sebelumnya. Jadi saya juga akan menambahkan style saya konstan dengan

69
00:05:30,680 --> 00:05:31,750
Stylesheet. buat

70
00:05:31,770 --> 00:05:36,710
di sana dan sekarang, apa kode jsx saya ingin kembali ke sini?

71
00:05:36,760 --> 00:05:41,920
Nah itu tampilan, tampilan yang benar-benar akan membungkus apa pun yang kami lewati di sana,

72
00:05:41,950 --> 00:05:46,870
jadi di antara tag komponen saya, jadi hanya alat peraga anak-anak di sana tapi

73
00:05:46,930 --> 00:05:53,690
sekarang tampilan itu bisa mendapatkan beberapa style default di sini yang akan saya beri nama keranjang dan yang seharusnya menjadi

74
00:05:53,690 --> 00:05:56,090
gaya yang saya salin di sekitar.

75
00:05:56,110 --> 00:06:01,780
Jadi di sini gaya troli saya dalam komponen troli ini persis seperti yang saya miliki di sini,

76
00:06:01,780 --> 00:06:02,880
item produknya, ini

77
00:06:02,900 --> 00:06:09,540
bayangan di sini, ketinggian, radius batas, dan warna latar belakang. Anda dapat memotong semua itu dan memindahkannya ke troli di

78
00:06:09,540 --> 00:06:10,260
sini.

79
00:06:11,580 --> 00:06:16,890
Sekarang untuk masih dapat mengkonfigurasi ini sedikit, saya akan benar-benar meningkatkan ini

80
00:06:16,890 --> 00:06:27,540
dan mengatur gaya ke objek tempat saya menggabungkan nilai keranjang gaya saya dan nilai apa pun yang saya dapatkan di prop gaya di sini, seperti ini.

81
00:06:27,540 --> 00:06:32,970
Jadi sekarang kita bahkan dapat menetapkan prop gaya ketika kita menggunakan keranjang kita

82
00:06:32,970 --> 00:06:39,240
dan meneruskan gaya kita sendiri yang akan digabung bersama dengan gaya kartu default ini karena ini

83
00:06:39,300 --> 00:06:50,780
sekarang memungkinkan saya untuk menggunakan kereta di sini di item produk misalnya dengan mengimpor keranjang dari , dan sekarang naik satu tingkat ke folder UI, ke dalam file keranjang

84
00:06:51,000 --> 00:06:52,460
dan ganti tampilan

85
00:06:52,500 --> 00:06:54,830
ini di sini, tampilan luar

86
00:06:54,860 --> 00:07:01,410
ini dengan kartu dan tentu saja karena itu juga ganti tag penutup dan masih meneruskan spesifikasi produk

87
00:07:01,410 --> 00:07:08,360
saya di sini, jadi ini tinggi dan margin .

88
00:07:08,360 --> 00:07:11,570
Ini akan digabung dengan tampilan kartu lainnya dan segala sesuatu antara kartu

89
00:07:11,570 --> 00:07:15,030
pembuka dan penutup kartu hanya akan berfungsi, saya meneruskannya ke kartu saya di

90
00:07:15,020 --> 00:07:18,820
sini dengan bantuan alat peraga anak-anak. Sekarang sama untuk item

91
00:07:18,830 --> 00:07:25,280
pesanan, di sana kita hanya perlu mengimpor kartu dari dan sekarang masuk ke folder UI, untuk kartu

92
00:07:26,240 --> 00:07:29,690
di sini dan kemudian menggunakan kartu, bukan tampilan itu,

93
00:07:29,700 --> 00:07:34,570
tampilan luar di sini, ganti dengan kartu dan singkirkan gaya kartu ini di

94
00:07:34,590 --> 00:07:39,330
sini, hal-hal bayangan, ketinggian, radius batas, dan warna latar belakang dan hanya

95
00:07:39,330 --> 00:07:45,640
menyimpan gaya khusus yang ingin Anda gabungkan. Dan sekarang hal terakhir, tempat terakhir di mana kita bisa menggunakan ini

96
00:07:45,660 --> 00:07:49,440
adalah layar keranjang, di sana saya juga memiliki ringkasan saya yang menggunakan gaya kartu ini.

97
00:07:49,770 --> 00:07:56,870
Nah sekali lagi, kita dapat mengimpor komponen kartu dari folder komponen,

98
00:07:56,920 --> 00:08:04,930
folder UI di sana-sini, dari kereta. File js dan sekarang menggunakan komponen kartu alih-alih melihat di tempat

99
00:08:05,320 --> 00:08:07,290
kami menginginkan gaya kartu

100
00:08:07,300 --> 00:08:11,380
ini, jadi di sini yang akan menjadi tampilan yang memiliki gaya

101
00:08:11,380 --> 00:08:16,590
ringkasan, saya akan mengganti ini dengan kartu. Dan pada gaya ringkasan, kami menyimpan

102
00:08:16,650 --> 00:08:22,170
semua yang spesifik untuk layar ini atau komponen ini, tetapi kami dapat menyingkirkan warna

103
00:08:22,170 --> 00:08:27,260
bayangan, radius bayangan, ketinggian, warna latar belakang radius perbatasan, yang semuanya dapat dihapus.

104
00:08:27,290 --> 00:08:32,480
Sekarang mari kita simpan itu dan Anda akan melihat bahwa tentu saja aplikasi masih

105
00:08:32,480 --> 00:08:33,800
bekerja dan terlihat

106
00:08:34,630 --> 00:08:41,320
dengan cara yang sama seperti sebelumnya jika saya menambahkan ini ke keranjang misalnya dan saya memesan ini dan

107
00:08:41,320 --> 00:08:48,760
saya melihat pesanan saya, ini semua terlihat cara itu dilakukan sebelumnya tetapi sekarang melakukannya dengan sedikit kode yang lebih optimal

108
00:08:48,760 --> 00:08:53,610
di mana kita benar-benar menggunakan kembali gaya kita dan memiliki komponen presentasi terpisah

109
00:08:53,650 --> 00:08:59,170
untuk mereka sehingga komponen lain kita bisa sedikit lebih ramping dan kita tidak mengulangi diri

110
00:08:59,170 --> 00:09:05,710
kita sebagai sering ketika mengatur tampilan kereta itu. Keuntungan lain adalah kita tidak bisa salah ketik, jika kita menetapkan

111
00:09:05,710 --> 00:09:11,220
radius shadow ke 8 dalam satu komponen dan 10 di lain komponen, maka aplikasi kita mungkin terlihat sedikit tidak konsisten.

112
00:09:11,260 --> 00:09:17,830
Kami menghindari ini dengan memiliki beberapa komponen penataan gaya terpusat yang mengatur gaya inti ini yang kemudian kami gunakan dalam komponen

113
00:09:17,830 --> 00:09:20,410
lain seperti yang kami lakukan di sini.