Saya membuat komponen terpisah, A, tentu saja, untuk berlatih membuat komponen Anda sendiri, tetapi B, juga karena
itu adalah filosofi inti dari reaksi untuk membagi aplikasi Anda menjadi bagian-bagian yang lebih kecil.
Tentu saja, terserah Anda seberapa kecil Anda ingin membaginya.
Setiap item daftar, misalnya, juga bisa menjadi komponen lamanya, dan tidak akan ada yang salah dengan itu.
Idenya sederhana adalah memiliki file kode yang kecil dan dapat dikelola.
Dan nanti, setelah kami menambahkan lebih banyak logika ke aplikasi sehingga kami juga dapat berinteraksi dengannya.
Dan kami mengubah sejumlah tujuan, misalnya, dengan mengklik tombol dan sebagainya.
Kami, tentu saja, ingin dapat mengelola banyak logika dalam komponen daftar tujuan dan bukan komponen
yang jelas.
Jadi, benar-benar membaginya menjadi komponen memiliki gagasan untuk memisahkan masalah menjaga file Anda tetap kecil, fokus, dan dapat dikelola, yang,
jika Anda bekerja dalam proyek yang lebih besar, adalah kemenangan besar karena membuatnya lebih mudah untuk mengelola
dan bekerja dalam suatu proyek yang lebih besar.
Sekarang, sejauh ini, semua yang ada di aplikasi kami sudah dikodekan.
Sekarang, yang lebih realistis adalah misalkan daftar sasaran kita dikelola di sini di aplikasi.
Ya, sebagai data.
Dan kami ingin merender daftar Digo item Timal H atau J sebagai item X berdasarkan data itu.
Sekarang saya akan mengaturnya di sini di Abcess hanya karena nanti saya akan menambahkan komponen lain di sini yang membantu kami
membuat tujuan baru.
Tetapi untuk sekarang, mari tambahkan konstanta normal di sini.
Komponen fungsional Tudor karena itu adalah fungsi JavaScript normal.
Tentu saja Anda dapat melakukan lebih dari sekadar mengembalikan konten J dan disk J di sini.
Kami akan memiliki tujuan kursus saya.
Anda dapat menamainya sesuka Anda dan ini akan menjadi array dan melakukan array.
Setiap sasaran dapat berupa objek JavaScript yang dibuat di sini dengan notasi objek literal.
Tentu saja Anda juga bisa membuat fungsi konstruktor atau kelas Anda sendiri dan instantiate itu untuk membuat objek
seperti itu.
Sekarang katakanlah setiap tujuan memiliki ide.
C. G. satu untuk paduan suara, memanggil satu dan kemudian memiliki beberapa teks, katakanlah.
Dan teks di sini hanyalah teks.
Saya telah melakukan hardcode di sini, menyelesaikan kursus.
Jadi saya salin itu.
Dan di sini dan saya akan membaginya di beberapa baris untuk membuatnya lebih mudah dibaca karena saya tidak hanya memiliki
satu tujuan tetapi gratis.
Jadi idenya adalah C. G. untuk NCG gratis, katakanlah.
Dan sekarang saya hanya akan menyalin semua teks itu di sini.
Ke dalam benda saya di sini di Abcess.
Juga, teks terakhir itu.
Seperti ini, dan di sana saya sekarang juga bisa menyingkirkan ampersand benda itu di sini, kita tidak membutuhkannya di sini.
Kita semua dapat meletakkan teks seperti ini dan bereaksi akan membuatnya dengan benar.
Jadi sekarang kita harus mencakar array Scholes pada ideku.
Sekarang, apakah itu dalam komponen daftar sasaran dari sasaran-sasaran ini?
Data di sini pada akhirnya harus menjadi keluaran.
Jadi itu harus menjadi output secara dinamis dalam komponen ini, dalam komponen daftar tujuan bukannya sulit.
Jadi kita bisa menghapus kode ini di sini.
Tidak, itu membuat kita memiliki dua masalah.
Nomor satu, bagaimana kita bisa mengeluarkan daftar data secara dinamis dalam J sebagai X?
Tetapi lebih penting dari itu saat ini.
Bagaimana kita bisa mendapatkan daftar data yang didefinisikan dalam komponen aplikasi ke dalam komponen Gollust?
Baiklah, mari kita fokus dulu, karena tanpa itu, kita tidak bisa fokus pada masalah lain.
Kita dapat meneruskan data dari komponen ke komponen dengan konsep yang disebut props kependekan dari properti.
Kita dapat mendefinisikan milik kita sendiri.
Anda bisa mengatakan atribut yang merupakan alat peraga ini pada komponen kita sendiri.
Jadi, misalnya, di sini di daftar sasaran, Anda bisa mengatakan kami memiliki barang, atribut, atau sasaran, atribut yang sepenuhnya
terserah Anda.
Saya akan pergi dengan gol di sini.
Dan atribut atau penyangga emas itu adalah istilah yang umum.
Jadi, apakah prop Gold kemudian meneruskan data ini ke komponen itu?
Sekarang, untuk itu, saya tidak menggunakan string di sini, yang ingin saya sampaikan,
tetapi sebaliknya saya ingin meneruskan susunan data D JavaScript saya di sini dan untuk Ayah di sini, sebenarnya kami menggunakan angka
khusus Syntex dan J sebagai X. Kami menggunakan kawat keriting pembukaan dan penutupan tunggal.
Sepertinya kita sedang membuat objek pekerjaan di sini, tapi ternyata tidak.
Jika Anda melakukan ini di dalam J adalah X, yang saya lakukan di sini.
Itu J adalah X maka ini berarti Anda ingin menggabungkan kode J is X Anda dengan beberapa ekspresi JavaScript pada akhirnya.
Dan di sini kita dapat menunjuk pada keterampilan inti.
Itu adalah ekspresi JavaScript yang valid.
Kami hanya menunjuk pada sebuah konstanta.
Dan apa artinya Disneyland sudah mati.
Bereaksi akan berlalu.
Tujuan kursus di sini.
Nilai yang disimpan dalam konstanta ini dalam kasus ini, array ini ke tempat J ini adalah X.
Dalam hal ini, ke prop ini, karena itu.
Jadi sasaran akan menjadi penyangga yang menyimpan referensi ke array ini sekarang.
Sekarang di dalam daftar sasaran, kita sekarang dapat menerima prop emas itu.
Jadi mari kita pergi ke daftar sasaran dan melihat bagaimana itu bekerja di daftar sasaran.
Kami memiliki fungsi, bukan?
Komponen fungsional.
Sekarang, fungsi ini sekarang tidak mendapatkan parameter apa pun.
Kita bisa mengubahnya.
Kami dapat menerima parameter alat peraga di sini.
Setiap fungsi yang digunakan sebagai komponen reaksi, yang berarti mengembalikan J adalah X juga menerima alat peraga.
Apakah objek ini melewati komponen fungsional reaksi Anda secara otomatis dengan bereaksi?
Dan itu adalah objek yang menggabungkan semua alat peraga yang Anda berikan ke komponen.
Jadi dalam kasus kami, tujuan adalah untuk menyangga tunggal yang kami miliki.
Jadi di sini kita akan memiliki objek yang memiliki properti dengan nama tujuan yang memiliki nilai masa lalu untuk
prop itu.
Jadi dengan kata lain, di sini, saya dapat menghibur kunci, menopang tujuan awal, tujuan dot, karena saya dinamai oleh tujuan Propp
di sini.
Jika Anda memilih nama yang berbeda di sini, yang tidak apa-apa, Anda harus menggunakan nama yang berbeda di sini.
Sekarang, jika kita menyimpan itu, kita tidak akan melihat tujuan kita lagi saat ini.
Tetapi jika kita membuka alat pengembang, kita melihat Arae ini dikunci di sini.
Dan log Ayah berasal dari daftar sasaran, baris enam, seperti yang Anda lihat, yang tentu saja, log
ini di sini dan di sana kita melihat data sasaran kami, yang berarti, ya, ia tiba dengan sukses di dalam komponen Gollust.
Konsep alat peraga adalah konsep super penting dalam reaksi, karena inilah yang memungkinkan Anda untuk
melewatkan data dari Komponen A, komponen aplikasi ke komponen B, komponen daftar tujuan.
Pada kasus ini.
Sekarang mari kita lihat bagaimana kita dapat menampilkan daftar data secara dinamis dalam J sebagai X, karena di sini kita mendapatkan daftar
tujuan, serangkaian tujuan, dan kami ingin menampilkan ini sebagai item daftar di sini dalam daftar kami yang tidak
berurutan.