1
00:00:02,270 --> 00:00:03,610
Untuk menghasilkan tujuan kita sendiri.

2
00:00:03,680 --> 00:00:08,060
Saya akan menambahkan komponen baru di folder komponen dan membuatnya tetap terkendali.

3
00:00:08,150 --> 00:00:11,060
Saya akan benar-benar membuat subfolder baru untuk setiap komponen.

4
00:00:11,420 --> 00:00:17,240
Ini bukan suatu keharusan, tetapi saya pribadi suka melakukan ini karena dengan begitu saya dapat dengan cepat menemukan semua komponen saya.

5
00:00:17,630 --> 00:00:20,820
Tentu saja, Anda sekarang perlu menyesuaikan impor Anda di sini dalam abcess.

6
00:00:21,110 --> 00:00:23,780
Ide saya melakukannya secara otomatis kalau-kalau itu tidak terjadi.

7
00:00:23,990 --> 00:00:28,090
Pastikan Anda menyesuaikan impor daftar sasaran untuk mencerminkannya di U.

8
00:00:28,190 --> 00:00:28,580
Map.

9
00:00:28,940 --> 00:00:29,360
Saya tambahkan.

10
00:00:30,100 --> 00:00:35,720
Dan kemudian itu akan menambahkan komponen tujuan baru di sini di folder komponen juga di sana.

11
00:00:35,780 --> 00:00:38,990
Tambahkan file jazz tujuan baru dan tujuan baru.

12
00:00:39,260 --> 00:00:40,310
Lihat kami jatuh.

13
00:00:40,430 --> 00:00:45,830
Jika Anda ingin menerapkan beberapa gaya sekarang dalam file jazz emas baru, pertama-tama kita perlu mengimpor reaksi

14
00:00:45,830 --> 00:00:46,580
dari reaksi.

15
00:00:46,700 --> 00:00:47,870
Anda selalu perlu melakukan itu.

16
00:00:47,960 --> 00:00:54,770
Kalau tidak, Anda tidak dapat menggunakan J sebagai X dalam file itu karena perlu diingat J sebagai exis diterjemahkan untuk bereaksi membuat

17
00:00:54,800 --> 00:00:55,280
elemen.

18
00:00:56,060 --> 00:00:59,810
Dan kemudian di sini saya memiliki komponen tujuan baru saya di sini.

19
00:01:00,110 --> 00:01:02,730
Kami dapat menerima Propp spot selama kami tidak membutuhkannya.

20
00:01:02,750 --> 00:01:03,620
Kita tidak harus melakukannya.

21
00:01:04,310 --> 00:01:06,650
Dan kemudian saya mengekspor tujuan baru.

22
00:01:07,920 --> 00:01:13,580
Sekarang, di Abcess, saya ingin memberikan tujuan baru, jadi kami akan mengimpor emas baru.

23
00:01:13,920 --> 00:01:18,390
Sekali lagi, nama di sini terserah Anda, tetapi harus dimulai dengan huruf kapital.

24
00:01:19,070 --> 00:01:20,670
Dan saya mengimpor ini dari komponen.

25
00:01:20,820 --> 00:01:21,450
Tujuan baru

26
00:01:21,600 --> 00:01:22,200
Tujuan baru

27
00:01:23,110 --> 00:01:27,640
Dan kemudian di sini kita dapat merender seperti di atas daftar sasaran kita, katakanlah seperti itu.

28
00:01:28,390 --> 00:01:34,930
Tidak, ini tidak akan berfungsi karena tujuan baru belum komponen reaksi yang valid karena ini adalah fungsi saat ini, tetapi

29
00:01:34,930 --> 00:01:39,940
itu bukan fungsi yang berfungsi sebagai komponen reaksi karena tidak melakukan satu hal penting.

30
00:01:40,510 --> 00:01:41,920
Itu tidak kembali ke X-nya.

31
00:01:42,130 --> 00:01:42,930
Jadi mari kita kembali.

32
00:01:42,940 --> 00:01:48,580
Saya J adalah X di sana-sini untuk menjaga segala sesuatunya sederhana, semuanya di forum.

33
00:01:49,180 --> 00:01:51,640
Dan di forum itu saya akan menambahkan kolom input.

34
00:01:53,550 --> 00:01:57,220
Ketikkan teks elemen penutup sendiri di HGL biasa.

35
00:01:57,260 --> 00:01:59,820
Ini tidak harus menutup sendiri dalam J adalah X.

36
00:01:59,850 --> 00:02:01,920
Itu memang harus menutup diri.

37
00:02:02,670 --> 00:02:05,340
Dan kemudian tombol yang bertipe submit.

38
00:02:06,350 --> 00:02:12,590
Di mana saya katakan di Gohl, bentuk yang sangat sederhana, dan jika kita sekarang amankan itu, Anda harus melihatnya di sini.

39
00:02:13,130 --> 00:02:19,700
Sekarang mari kita tambahkan beberapa gaya untuk membuat ini terlihat sedikit lebih cantik untuk daddle dan kelas untuk membentuk emas dasbor

40
00:02:19,700 --> 00:02:20,060
baru.

41
00:02:20,750 --> 00:02:26,780
Dan saya akan mengimpor emas baru lihat sebagai file ke dalam file JavaScript emas baru.

42
00:02:27,470 --> 00:02:32,270
Dan kemudian di sini di kelas emas baru, yang ditambahkan pada formulir all at.

43
00:02:33,860 --> 00:02:38,420
Margin dua REM di semua arah dan baris teks.

44
00:02:43,600 --> 00:02:44,950
Sehingga ini terlihat sedikit lebih bagus.

45
00:02:46,620 --> 00:02:48,550
Dan sekarang kita juga bisa memberi style pada input tombol.

46
00:02:48,580 --> 00:02:50,110
Tetapi saya tidak ingin menghabiskan terlalu banyak waktu untuk itu.

47
00:02:50,200 --> 00:02:52,540
Jadi kita akan membiarkannya seperti ini, saat ini.

48
00:02:52,540 --> 00:02:57,160
Ketika Anda mengklik tombol, omong-omong, halaman ini akan dimuat ulang karena sekarang fungsi

49
00:02:57,160 --> 00:02:58,600
browser default akan muncul.

50
00:02:58,810 --> 00:03:03,460
Yaitu bahwa ketika tombol dari jenis kirim diklik di forum, permintaan dikirim ke server yang disajikan

51
00:03:03,490 --> 00:03:04,720
ke halaman ini.

52
00:03:04,890 --> 00:03:09,940
Bukannya itu perilaku yang kami inginkan di sini, karena di sini saya tidak ingin mengirim permintaan ke server mana

53
00:03:09,940 --> 00:03:12,850
pun karena kami tidak melakukan apa pun di sisi server.

54
00:03:13,240 --> 00:03:18,520
Sebaliknya, saya ingin menangani klik itu dengan JavaScript dan itulah hal pertama yang akan saya lakukan di sini.

55
00:03:18,550 --> 00:03:22,360
Mari kita lihat bagaimana kita bisa menangani acara, karena sejauh ini kita belum melakukan itu.

56
00:03:23,290 --> 00:03:27,730
Saya ingin menangani acara ajukan forum ini di sini dan bereaksi membuatnya sesederhana itu.

57
00:03:28,150 --> 00:03:34,300
Kami dapat menambahkan pendengar acara ke elemen apa pun, tidak hanya ke forum, tetapi ke elemen apa pun dengan menambahkan

58
00:03:34,630 --> 00:03:35,590
huruf kecil aktif.

59
00:03:35,770 --> 00:03:36,880
Dan kemudian nama acara tersebut.

60
00:03:37,030 --> 00:03:39,520
Tidak, tidak setiap acara didukung pada setiap elemen.

61
00:03:39,730 --> 00:03:42,820
Tapi di sini Anda punya HD default-nya, semua elemen tersedia.

62
00:03:43,000 --> 00:03:48,400
Jadi misalnya, dalam elemen forum Anda harus mengirimkan acara pada, kirim pada tombol.

63
00:03:48,400 --> 00:03:49,840
Anda juga memiliki klik.

64
00:03:50,080 --> 00:03:54,190
Tapi karena itu adalah tombol di forum, lebih baik untuk menangani ada di forum itu sendiri.

65
00:03:55,240 --> 00:04:00,160
Sekarang, apa yang Anda berikan sebagai nilai ke Enns up Mido sebagai nilai?

66
00:04:00,190 --> 00:04:06,010
Anda harus melewati fungsi yang harus dipicu saat acara ini terjadi.

67
00:04:06,100 --> 00:04:08,020
Jadi penunjuk ke fungsi.

68
00:04:08,740 --> 00:04:12,940
Anda bisa melakukannya tahun ini dengan kurung kurawal dan kemudian fungsi garis anonim.

69
00:04:13,510 --> 00:04:14,920
Tetapi saya tidak terlalu menyukainya.

70
00:04:14,940 --> 00:04:16,870
Sebagai gantinya, saya akan membuat fungsi baru di sini.

71
00:04:17,170 --> 00:04:20,470
Dan dalam JavaScript Anda dapat membuat fungsi dan fungsi.

72
00:04:20,770 --> 00:04:25,780
Jadi alih-alih fungsi tujuan yang baru, yang masih ada, pada akhirnya saya dapat membuat fungsi baru.

73
00:04:26,380 --> 00:04:27,670
Saya akan membuat.

74
00:04:28,680 --> 00:04:32,040
At handler note, penamaan terserah Anda.

75
00:04:32,070 --> 00:04:38,130
Tapi saya suka namanya memiliki Handler di akhir nama funk saya.

76
00:04:38,400 --> 00:04:41,640
Jika itu adalah fungsi yang dipicu pada beberapa peristiwa.

77
00:04:43,270 --> 00:04:48,160
Jadi ini adalah fungsi dalam hal ini, saya akan kembali menggunakan fungsi panah, yang tidak harus

78
00:04:48,160 --> 00:04:54,430
dilakukan, tetapi saya hanya akan menggunakan fungsi panah di sini dan Enns up Mitt sekarang dapat menunjuk ke AD Gohl Handler.

79
00:04:54,940 --> 00:04:57,550
Jangan jalankan di sini, jadi jangan tambahkan tanda kurung.

80
00:04:57,790 --> 00:05:04,330
Sebagai gantinya, Anda hanya ingin menunjukkan fungsi sehingga browser dan bereaksi dalam upaya yang sama dapat

81
00:05:04,330 --> 00:05:06,010
melakukan disfungsi untuk Anda.

82
00:05:06,220 --> 00:05:07,810
Kapan ajukan acara terjadi?

83
00:05:08,950 --> 00:05:16,390
Sekarang fungsi ini akan mendapatkan objek acara, parameter acara dilewatkan secara otomatis dengan bereaksi dan kemudian misalnya kita dapat memanggil

84
00:05:16,390 --> 00:05:23,410
pencegahan default, yang mencegah default browser mengirim permintaan ke beberapa back end, yang seharusnya tidak dilakukan di sini

85
00:05:23,440 --> 00:05:28,060
karena kita Saya tidak menangani ini di sisi server di sini.

86
00:05:28,930 --> 00:05:31,990
Server kami hanya melayani file HMO indeks tunggal itu.

87
00:05:31,990 --> 00:05:35,140
Itu tidak memiliki logika untuk menangani pengiriman apa pun.

88
00:05:35,740 --> 00:05:39,650
Sebaliknya, saya ingin menanganinya di sini di JavaScript di ujung depan.

89
00:05:39,910 --> 00:05:46,780
Dalam aplikasi REACT saya dan untuk saat ini saya akan mengabaikan apa yang dimasukkan pengguna di sini dan

90
00:05:46,900 --> 00:05:49,210
saya hanya akan membuat tujuan dummy.

91
00:05:49,560 --> 00:05:57,010
Dan saya ingin meneruskan tujuan bodoh itu ke aplikasi G. S. dan menambahkannya ke Scholes inti saya di sini sehingga kemudian disajikan

92
00:05:57,010 --> 00:05:57,670
di sini.

93
00:05:58,270 --> 00:05:59,510
Sekarang, langkah demi langkah.

94
00:06:00,410 --> 00:06:02,690
Kita bisa menciptakan tujuan Dharmik baru, tentu saja.

95
00:06:03,780 --> 00:06:05,130
Dalam artikel itu, Hanover.

96
00:06:06,780 --> 00:06:14,020
Dengan menambahkan konstanta sasaran baru di sini, yang merupakan objek JavaScript, ide di sini bisa berupa angka acak.

97
00:06:14,060 --> 00:06:15,270
Dengan ngengat acak.

98
00:06:15,600 --> 00:06:20,430
Ini, tentu saja, tidak benar-benar unik. D. , tapi cukup baik dan saya akan mengubahnya menjadi string.

99
00:06:21,360 --> 00:06:23,370
Cukup bagus untuk aplikasi demo kami di sini.

100
00:06:23,370 --> 00:06:23,730
Maksudku.

101
00:06:24,180 --> 00:06:27,800
Dan kemudian teks di sini nanti akan menjadi pengguna teks yang dimasukkan di sini.

102
00:06:28,110 --> 00:06:30,090
Untuk saat ini, hanya beberapa teks tiruan.

103
00:06:30,300 --> 00:06:31,290
Tujuan baru saya

104
00:06:32,540 --> 00:06:34,040
Jadi sekarang kita memiliki tujuan baru di sini.

105
00:06:34,400 --> 00:06:39,980
Dan, tentu saja, kita dapat menghibur di terkunci untuk melihat bahwa semuanya sampai pada titik ini bekerja.

106
00:06:40,430 --> 00:06:41,480
Jadi jika kita simpan itu.

107
00:06:42,470 --> 00:06:43,610
Kami melihat formulir kami di sini.

108
00:06:44,030 --> 00:06:46,610
Dan jika Anda mengklik add goal, halaman tidak akan dimuat ulang.

109
00:06:46,940 --> 00:06:48,770
Tetapi sebaliknya kita melihat tujuan cap di sini.

110
00:06:49,120 --> 00:06:50,840
Tentu saja dapat menciptakan banyak tujuan.

111
00:06:51,080 --> 00:06:53,660
Tetapi saat ini, mereka tidak ditambahkan ke daftar ini.

112
00:06:54,560 --> 00:07:01,100
Untuk menambahkan ke dalam daftar, sekarang kita perlu mengeluarkan sasaran itu dari komponen sasaran baru ke komponen aplikasi.

113
00:07:01,550 --> 00:07:05,120
Sekarang, sebelum kita belajar, kita dapat melewati putaran alat peraga kita.

114
00:07:05,270 --> 00:07:08,180
Tapi itu dari aplikasi ke daftar sasaran.

115
00:07:08,510 --> 00:07:12,530
Jadi untuk komponen level yang lebih rendah, komponen yang termasuk aplikasi.

116
00:07:13,010 --> 00:07:14,510
Sekarang ke arah lain.

117
00:07:14,810 --> 00:07:18,500
Kami ingin meneruskan data dari sasaran baru ke komponen induk.

118
00:07:18,590 --> 00:07:21,110
Jadi komponen yang termasuk komponen tujuan baru.

119
00:07:21,560 --> 00:07:22,400
Bagaimana cara kerjanya?