1
00:00:02,190 --> 00:00:08,190
Saya membuat komponen terpisah, A, tentu saja, untuk berlatih membuat komponen Anda sendiri, tetapi B, juga karena

2
00:00:08,220 --> 00:00:14,160
itu adalah filosofi inti dari reaksi untuk membagi aplikasi Anda menjadi bagian-bagian yang lebih kecil.

3
00:00:14,310 --> 00:00:17,120
Tentu saja, terserah Anda seberapa kecil Anda ingin membaginya.

4
00:00:17,670 --> 00:00:22,380
Setiap item daftar, misalnya, juga bisa menjadi komponen lamanya, dan tidak akan ada yang salah dengan itu.

5
00:00:23,040 --> 00:00:26,520
Idenya sederhana adalah memiliki file kode yang kecil dan dapat dikelola.

6
00:00:26,910 --> 00:00:31,140
Dan nanti, setelah kami menambahkan lebih banyak logika ke aplikasi sehingga kami juga dapat berinteraksi dengannya.

7
00:00:31,170 --> 00:00:35,730
Dan kami mengubah sejumlah tujuan, misalnya, dengan mengklik tombol dan sebagainya.

8
00:00:36,390 --> 00:00:41,370
Kami, tentu saja, ingin dapat mengelola banyak logika dalam komponen daftar tujuan dan bukan komponen

9
00:00:41,370 --> 00:00:42,150
yang jelas.

10
00:00:42,390 --> 00:00:49,470
Jadi, benar-benar membaginya menjadi komponen memiliki gagasan untuk memisahkan masalah menjaga file Anda tetap kecil, fokus, dan dapat dikelola, yang,

11
00:00:49,500 --> 00:00:55,830
jika Anda bekerja dalam proyek yang lebih besar, adalah kemenangan besar karena membuatnya lebih mudah untuk mengelola

12
00:00:55,830 --> 00:00:58,930
dan bekerja dalam suatu proyek yang lebih besar.

13
00:01:00,000 --> 00:01:03,420
Sekarang, sejauh ini, semua yang ada di aplikasi kami sudah dikodekan.

14
00:01:04,290 --> 00:01:10,880
Sekarang, yang lebih realistis adalah misalkan daftar sasaran kita dikelola di sini di aplikasi.

15
00:01:10,970 --> 00:01:12,660
Ya, sebagai data.

16
00:01:13,170 --> 00:01:20,160
Dan kami ingin merender daftar Digo item Timal H atau J sebagai item X berdasarkan data itu.

17
00:01:20,640 --> 00:01:27,120
Sekarang saya akan mengaturnya di sini di Abcess hanya karena nanti saya akan menambahkan komponen lain di sini yang membantu kami

18
00:01:27,120 --> 00:01:28,230
membuat tujuan baru.

19
00:01:28,530 --> 00:01:31,590
Tetapi untuk sekarang, mari tambahkan konstanta normal di sini.

20
00:01:31,830 --> 00:01:35,760
Komponen fungsional Tudor karena itu adalah fungsi JavaScript normal.

21
00:01:35,940 --> 00:01:40,140
Tentu saja Anda dapat melakukan lebih dari sekadar mengembalikan konten J dan disk J di sini.

22
00:01:40,520 --> 00:01:43,140
Kami akan memiliki tujuan kursus saya.

23
00:01:43,200 --> 00:01:47,010
Anda dapat menamainya sesuka Anda dan ini akan menjadi array dan melakukan array.

24
00:01:47,340 --> 00:01:52,350
Setiap sasaran dapat berupa objek JavaScript yang dibuat di sini dengan notasi objek literal.

25
00:01:52,560 --> 00:01:58,500
Tentu saja Anda juga bisa membuat fungsi konstruktor atau kelas Anda sendiri dan instantiate itu untuk membuat objek

26
00:01:58,500 --> 00:01:59,220
seperti itu.

27
00:02:00,030 --> 00:02:01,530
Sekarang katakanlah setiap tujuan memiliki ide.

28
00:02:02,650 --> 00:02:06,880
C. G. satu untuk paduan suara, memanggil satu dan kemudian memiliki beberapa teks, katakanlah.

29
00:02:07,210 --> 00:02:10,030
Dan teks di sini hanyalah teks.

30
00:02:10,060 --> 00:02:12,880
Saya telah melakukan hardcode di sini, menyelesaikan kursus.

31
00:02:12,920 --> 00:02:13,960
Jadi saya salin itu.

32
00:02:14,440 --> 00:02:20,560
Dan di sini dan saya akan membaginya di beberapa baris untuk membuatnya lebih mudah dibaca karena saya tidak hanya memiliki

33
00:02:20,560 --> 00:02:21,790
satu tujuan tetapi gratis.

34
00:02:22,000 --> 00:02:25,480
Jadi idenya adalah C. G. untuk NCG gratis, katakanlah.

35
00:02:25,900 --> 00:02:29,560
Dan sekarang saya hanya akan menyalin semua teks itu di sini.

36
00:02:31,540 --> 00:02:34,010
Ke dalam benda saya di sini di Abcess.

37
00:02:34,780 --> 00:02:36,550
Juga, teks terakhir itu.

38
00:02:37,820 --> 00:02:44,030
Seperti ini, dan di sana saya sekarang juga bisa menyingkirkan ampersand benda itu di sini, kita tidak membutuhkannya di sini.

39
00:02:44,120 --> 00:02:47,480
Kita semua dapat meletakkan teks seperti ini dan bereaksi akan membuatnya dengan benar.

40
00:02:48,410 --> 00:02:50,630
Jadi sekarang kita harus mencakar array Scholes pada ideku.

41
00:02:50,660 --> 00:02:54,050
Sekarang, apakah itu dalam komponen daftar sasaran dari sasaran-sasaran ini?

42
00:02:54,080 --> 00:02:56,660
Data di sini pada akhirnya harus menjadi keluaran.

43
00:02:56,870 --> 00:03:02,080
Jadi itu harus menjadi output secara dinamis dalam komponen ini, dalam komponen daftar tujuan bukannya sulit.

44
00:03:02,450 --> 00:03:03,800
Jadi kita bisa menghapus kode ini di sini.

45
00:03:04,220 --> 00:03:06,050
Tidak, itu membuat kita memiliki dua masalah.

46
00:03:06,350 --> 00:03:10,810
Nomor satu, bagaimana kita bisa mengeluarkan daftar data secara dinamis dalam J sebagai X?

47
00:03:11,270 --> 00:03:13,130
Tetapi lebih penting dari itu saat ini.

48
00:03:13,400 --> 00:03:18,950
Bagaimana kita bisa mendapatkan daftar data yang didefinisikan dalam komponen aplikasi ke dalam komponen Gollust?

49
00:03:19,460 --> 00:03:23,300
Baiklah, mari kita fokus dulu, karena tanpa itu, kita tidak bisa fokus pada masalah lain.

50
00:03:24,170 --> 00:03:31,820
Kita dapat meneruskan data dari komponen ke komponen dengan konsep yang disebut props kependekan dari properti.

51
00:03:32,450 --> 00:03:34,100
Kita dapat mendefinisikan milik kita sendiri.

52
00:03:34,130 --> 00:03:39,800
Anda bisa mengatakan atribut yang merupakan alat peraga ini pada komponen kita sendiri.

53
00:03:40,250 --> 00:03:46,090
Jadi, misalnya, di sini di daftar sasaran, Anda bisa mengatakan kami memiliki barang, atribut, atau sasaran, atribut yang sepenuhnya

54
00:03:46,160 --> 00:03:47,120
terserah Anda.

55
00:03:47,630 --> 00:03:48,710
Saya akan pergi dengan gol di sini.

56
00:03:49,680 --> 00:03:53,340
Dan atribut atau penyangga emas itu adalah istilah yang umum.

57
00:03:53,370 --> 00:03:57,870
Jadi, apakah prop Gold kemudian meneruskan data ini ke komponen itu?

58
00:03:58,380 --> 00:04:02,280
Sekarang, untuk itu, saya tidak menggunakan string di sini, yang ingin saya sampaikan,

59
00:04:02,280 --> 00:04:08,250
tetapi sebaliknya saya ingin meneruskan susunan data D JavaScript saya di sini dan untuk Ayah di sini, sebenarnya kami menggunakan angka

60
00:04:08,250 --> 00:04:12,210
khusus Syntex dan J sebagai X. Kami menggunakan kawat keriting pembukaan dan penutupan tunggal.

61
00:04:12,780 --> 00:04:15,780
Sepertinya kita sedang membuat objek pekerjaan di sini, tapi ternyata tidak.

62
00:04:16,080 --> 00:04:19,420
Jika Anda melakukan ini di dalam J adalah X, yang saya lakukan di sini.

63
00:04:19,500 --> 00:04:29,190
Itu J adalah X maka ini berarti Anda ingin menggabungkan kode J is X Anda dengan beberapa ekspresi JavaScript pada akhirnya.

64
00:04:29,460 --> 00:04:31,370
Dan di sini kita dapat menunjuk pada keterampilan inti.

65
00:04:31,410 --> 00:04:32,970
Itu adalah ekspresi JavaScript yang valid.

66
00:04:33,060 --> 00:04:34,590
Kami hanya menunjuk pada sebuah konstanta.

67
00:04:34,990 --> 00:04:36,450
Dan apa artinya Disneyland sudah mati.

68
00:04:36,870 --> 00:04:38,640
Bereaksi akan berlalu.

69
00:04:38,670 --> 00:04:39,870
Tujuan kursus di sini.

70
00:04:40,170 --> 00:04:44,700
Nilai yang disimpan dalam konstanta ini dalam kasus ini, array ini ke tempat J ini adalah X.

71
00:04:44,880 --> 00:04:47,390
Dalam hal ini, ke prop ini, karena itu.

72
00:04:47,940 --> 00:04:53,140
Jadi sasaran akan menjadi penyangga yang menyimpan referensi ke array ini sekarang.

73
00:04:54,120 --> 00:04:58,370
Sekarang di dalam daftar sasaran, kita sekarang dapat menerima prop emas itu.

74
00:04:58,770 --> 00:05:02,340
Jadi mari kita pergi ke daftar sasaran dan melihat bagaimana itu bekerja di daftar sasaran.

75
00:05:02,370 --> 00:05:03,360
Kami memiliki fungsi, bukan?

76
00:05:03,600 --> 00:05:04,830
Komponen fungsional.

77
00:05:05,610 --> 00:05:08,670
Sekarang, fungsi ini sekarang tidak mendapatkan parameter apa pun.

78
00:05:09,090 --> 00:05:09,930
Kita bisa mengubahnya.

79
00:05:10,170 --> 00:05:12,240
Kami dapat menerima parameter alat peraga di sini.

80
00:05:12,900 --> 00:05:20,820
Setiap fungsi yang digunakan sebagai komponen reaksi, yang berarti mengembalikan J adalah X juga menerima alat peraga.

81
00:05:22,620 --> 00:05:28,160
Apakah objek ini melewati komponen fungsional reaksi Anda secara otomatis dengan bereaksi?

82
00:05:28,580 --> 00:05:34,070
Dan itu adalah objek yang menggabungkan semua alat peraga yang Anda berikan ke komponen.

83
00:05:34,190 --> 00:05:37,070
Jadi dalam kasus kami, tujuan adalah untuk menyangga tunggal yang kami miliki.

84
00:05:37,400 --> 00:05:44,420
Jadi di sini kita akan memiliki objek yang memiliki properti dengan nama tujuan yang memiliki nilai masa lalu untuk

85
00:05:44,420 --> 00:05:45,170
prop itu.

86
00:05:46,270 --> 00:05:53,110
Jadi dengan kata lain, di sini, saya dapat menghibur kunci, menopang tujuan awal, tujuan dot, karena saya dinamai oleh tujuan Propp

87
00:05:53,110 --> 00:05:54,130
di sini.

88
00:05:54,430 --> 00:05:59,680
Jika Anda memilih nama yang berbeda di sini, yang tidak apa-apa, Anda harus menggunakan nama yang berbeda di sini.

89
00:06:00,580 --> 00:06:03,640
Sekarang, jika kita menyimpan itu, kita tidak akan melihat tujuan kita lagi saat ini.

90
00:06:04,090 --> 00:06:08,140
Tetapi jika kita membuka alat pengembang, kita melihat Arae ini dikunci di sini.

91
00:06:08,230 --> 00:06:13,870
Dan log Ayah berasal dari daftar sasaran, baris enam, seperti yang Anda lihat, yang tentu saja, log

92
00:06:13,870 --> 00:06:20,860
ini di sini dan di sana kita melihat data sasaran kami, yang berarti, ya, ia tiba dengan sukses di dalam komponen Gollust.

93
00:06:21,670 --> 00:06:28,420
Konsep alat peraga adalah konsep super penting dalam reaksi, karena inilah yang memungkinkan Anda untuk

94
00:06:28,420 --> 00:06:34,510
melewatkan data dari Komponen A, komponen aplikasi ke komponen B, komponen daftar tujuan.

95
00:06:34,540 --> 00:06:35,230
Pada kasus ini.

96
00:06:35,830 --> 00:06:42,790
Sekarang mari kita lihat bagaimana kita dapat menampilkan daftar data secara dinamis dalam J sebagai X, karena di sini kita mendapatkan daftar

97
00:06:42,790 --> 00:06:48,940
tujuan, serangkaian tujuan, dan kami ingin menampilkan ini sebagai item daftar di sini dalam daftar kami yang tidak

98
00:06:48,940 --> 00:06:49,360
berurutan.