1 00:00:02,160 --> 00:00:08,820 Sekarang untuk menampilkan daftar sasaran kami, di sini dalam tampilan, saya ingin hanya menampilkan beberapa komponen teks untuk saat ini di mana 2 00:00:08,820 --> 00:00:16,290 saya cukup mencetak tujuan saya dan untuk itu, kita dapat memasukkan ekspresi dinamis di sini dengan kurung kurawal buka dan tutup tunggal dan sekarang 3 00:00:16,290 --> 00:00:17,910 kita mengacu pada tujuan 4 00:00:18,390 --> 00:00:25,860 kursus, yang merupakan variabel ini kita dapatkan di sini dengan array destructing. Sasaran kursus adalah serangkaian sasaran kami dan sekarang sama 5 00:00:25,860 --> 00:00:27,890 seperti React normal yang 6 00:00:28,110 --> 00:00:34,620 merupakan diferensiasi yang saya tidak terlalu suka karena kami menggunakan React normal di sini pada akhirnya, 7 00:00:34,800 --> 00:00:36,350 jadi seperti yang 8 00:00:36,750 --> 00:00:43,590 Anda tahu dari React untuk proyek web, Anda sekarang dapat memetakan larik data ini menjadi larik komponen 9 00:00:43,590 --> 00:00:50,280 dengan metode peta yang merupakan metode Javascript normal. Metode peta mengambil fungsi yang mengeksekusi pada setiap item 10 00:00:50,280 --> 00:00:52,230 dalam array, jadi di sini 11 00:00:52,230 --> 00:00:53,180 kita mendapatkan 12 00:00:53,190 --> 00:01:00,810 tujuan kita dan kemudian harus mengembalikan komponen baru di sini. Sekali lagi saya akan menggunakan sintaks fungsi panah inline di 13 00:01:00,810 --> 00:01:07,230 mana alih-alih memiliki kurung kurawal dan kemudian mengembalikan sesuatu, saya menghilangkan kurung kurawal dan saya menghilangkan pernyataan 14 00:01:07,230 --> 00:01:11,340 kembali, ini sintaksis Javascript yang valid, ini juga akan mengembalikan apa 15 00:01:11,370 --> 00:01:13,980 pun yang saya masukkan di sini. 16 00:01:14,160 --> 00:01:17,740 Apa yang ingin saya kembalikan adalah komponen teks, jadi komponen 17 00:01:17,880 --> 00:01:26,430 teks ini kami impor dari React Native dan dengan ini, kami sekarang dapat menampilkan sasaran kami di sini karena sasaran dalam sasaran tentu saja akan menjadi 18 00:01:26,430 --> 00:01:32,280 teks karena apa yang kami tambahkan ke sasaran kursus adalah tujuan yang dimasukkan dan tujuan yang dimasukkan adalah 19 00:01:32,280 --> 00:01:36,100 apa yang kita dapatkan dari input teks dan itu hanya teks. 20 00:01:36,570 --> 00:01:42,210 Jadi di sini, kami sekarang hanya mengeluarkan beberapa teks dan saya memetakan semua tujuan kursus saya menjadi 21 00:01:42,390 --> 00:01:49,630 komponen teks yang akan ditampilkan dalam tampilan ini di sini. Dan dengan itu jika kita menyimpan ini, kita seharusnya 22 00:01:49,720 --> 00:01:51,130 sudah dapat 23 00:01:51,220 --> 00:01:59,260 mulai menambahkan beberapa tujuan, jadi belajar React Native adalah satu hal yang bisa saya masukkan di sini, tekan add 24 00:01:59,260 --> 00:02:00,950 dan ini dia, pelajari 25 00:02:01,050 --> 00:02:06,300 secara nyata dan kita dapatkan ini juga dan jika Anda juga ingin 26 00:02:06,300 --> 00:02:11,610 membuat beberapa pancake, Anda dapat melakukannya juga dan tentu saja, ini juga berfungsi 27 00:02:11,980 --> 00:02:18,480 di iOS, belajar React Native secara nyata dan tentu saja, saya masih ingin membuat beberapa pancake. 28 00:02:18,550 --> 00:02:23,960 Jadi ini berfungsi dan ini adalah bagaimana kita dapat menampilkan daftar sederhana, daftar item yang sangat sepele di sini. 29 00:02:23,980 --> 00:02:29,830 Sekarang tentu saja, barang-barang ini terlihat agak membosankan, jadi mungkin kita bisa menerapkan beberapa gaya di sana untuk 30 00:02:29,830 --> 00:02:33,120 membuatnya terlihat lebih baik. Sebelum kita melakukan itu, 31 00:02:33,340 --> 00:02:36,680 harap dicatat bahwa kita memiliki kesalahan di terminal kami. 32 00:02:36,730 --> 00:02:41,350 Sekarang aplikasi kami jelas bekerja tetapi kesalahan yang kami dapatkan di sini adalah bahwa setiap anak dalam 33 00:02:41,350 --> 00:02:46,190 daftar harus memiliki kunci prop yang unik dan itu adalah aturan Bereaksi normal, tidak ada Bereaksi spesifik Native. 34 00:02:46,300 --> 00:02:52,930 Memang, Anda harus selalu, ketika memetakan ini ke daftar widget, tetapkan kunci di sini sehingga React dapat memperbarui daftar 35 00:02:52,930 --> 00:02:58,750 ini secara efisien di belakang layar jika perlu. Anda melakukan ini dengan menambahkan prop kunci di sini dan 36 00:02:59,110 --> 00:03:01,730 kemudian kunci tersebut harus berupa pengidentifikasi unik, untuk sekarang 37 00:03:01,780 --> 00:03:05,890 mari kita pergi dengan tujuan itu sendiri yang tidak sepenuhnya unik, Anda dapat memasukkan tujuan 38 00:03:05,890 --> 00:03:09,970 yang sama dengan teks yang sama dua kali yang akan memberi Anda kesalahan tetapi 39 00:03:10,240 --> 00:03:12,650 untuk sekarang mari kita asumsikan Anda tidak 40 00:03:12,670 --> 00:03:17,720 melakukan itu, karena itu kami dapat menggunakan sasaran sebagai kunci dan jika kami melakukannya, kami menyingkirkan peringatan itu. 41 00:03:17,720 --> 00:03:21,850 Jika sekarang saya belajar Bereaksi Asli, saya dapat menambahkan ini tanpa kesalahan. 42 00:03:21,850 --> 00:03:27,610 Sekali lagi jika saya menambahkan teks yang sama dua kali, maka secara teknis saya bahkan tidak mendapatkan kesalahan di sini tapi 43 00:03:27,610 --> 00:03:28,040 ini 44 00:03:28,040 --> 00:03:32,170 akan salah, ini dia, ini kesalahan karena saya punya dua anak dengan kunci yang sama. 45 00:03:32,200 --> 00:03:35,650 Jadi, untuk saat ini kami hanya akan berasumsi bahwa Anda 46 00:03:35,770 --> 00:03:40,580 tidak melakukan itu, itu adalah aturan kunci normal yang Anda miliki dalam React yang normal juga. 47 00:03:40,780 --> 00:03:46,210 Jadi anggap saja Anda tidak memasukkan tujuan yang sama dua kali dan mari kita lanjutkan merancang item-item ini 48 00:03:46,210 --> 00:03:48,910 karena saat ini, mereka tidak terlihat terlalu menarik.