1 00:00:02,380 --> 00:00:08,210 Jadi kita sudah melihat pada serangkaian dasar-dasar yang Anda butuhkan untuk membangun aplikasi React Native, untuk bekerja dengan blok 2 00:00:08,210 --> 00:00:10,050 bangunan inti ini meskipun tentu saja 3 00:00:10,190 --> 00:00:13,460 banyak hal yang masih belum jelas, kami belum benar-benar melihat lebih 4 00:00:13,460 --> 00:00:17,660 dekat pada gaya dan tata letak dan sebagainya, tetapi satu hal yang harus kita 5 00:00:17,780 --> 00:00:22,820 lakukan sekarang adalah juga mengeksplorasi bagaimana Anda dapat membangun komponen Anda sendiri karena sejauh ini, kami selalu 6 00:00:23,030 --> 00:00:25,780 bekerja di aplikasi. File js dan Anda 7 00:00:26,000 --> 00:00:28,820 tentu tidak akan membangun aplikasi yang lebih besar dalam 8 00:00:28,820 --> 00:00:31,360 satu file saja, file itu akan menjadi 9 00:00:31,430 --> 00:00:37,190 super besar dan jika Anda memiliki komponen khusus yang ingin Anda ulangi, saat ini kami harus menyalin dan 10 00:00:37,190 --> 00:00:38,420 menempelkan kode kami. 11 00:00:38,660 --> 00:00:44,060 Jadi mari kita buat komponen baru dan oleh karena itu di sini dalam proyek ini, saya akan menambahkan folder baru 12 00:00:44,060 --> 00:00:49,020 bernama komponen, nama terserah Anda tetapi karena saya berencana menyimpan beberapa komponen di sana, nama itu masuk 13 00:00:49,710 --> 00:00:55,250 akal bagi saya dan di sana, saya ingin membuat komponen untuk item daftar dan juga satu untuk area input kami. 14 00:00:55,340 --> 00:01:00,320 Jadi mari kita buat dua file baru di sana dan saya akan memiliki konvensi penamaan untuk 15 00:01:00,320 --> 00:01:09,440 file di mana saya mulai dengan huruf kapital dan saya akan memiliki GoalItem saya. js, ini file Javascript dan 16 00:01:09,440 --> 00:01:16,100 GoalInput saya. file js. Sekarang keduanya akan memegang komponen Bereaksi normal, jadi 17 00:01:16,100 --> 00:01:21,830 mari kita mulai dengan item sasaran dan oleh karena itu impor Bereaksi dari Bereaksi, sama seperti Anda perlu melakukannya dalam proyek Bereaksi untuk web. 18 00:01:21,830 --> 00:01:29,570 Lalu di sini, saya akan membuat komponen fungsional saya, item tujuan yang mendapat alat peraga dan yang kemudian harus 19 00:01:29,570 --> 00:01:36,000 mengembalikan beberapa JSX di sini dan saya akan mengekspor ini sebagai default, seperti ini. 20 00:01:36,090 --> 00:01:42,030 Sekarang jsx yang ingin saya render di sana harus menggunakan komponen Bereaksi Asli atau komponen kustom lain yang kemudian menggunakan komponen 21 00:01:42,060 --> 00:01:44,570 Bereaksi Asli dan di sini saya akan pergi dengan 22 00:01:44,730 --> 00:01:51,180 konten ini yang saya miliki di sini. Jadi saya akan memotongnya dari aplikasi. File js dan kembalikan di 23 00:01:51,180 --> 00:01:51,790 sini. 24 00:01:52,450 --> 00:01:57,100 Sekarang untuk menggunakan ini di sini, kita harus mengimpor tampilan dan teks, 25 00:01:57,100 --> 00:01:59,970 jadi dua komponen ini, dari React Native. 26 00:01:59,980 --> 00:02:05,760 Jadi mari kita impor tampilan dan teks dari React-Native di sini. 27 00:02:05,790 --> 00:02:10,410 Selain itu, saya menyiapkan beberapa gaya dan saya ingin menggunakan stylesheet, 28 00:02:10,410 --> 00:02:20,110 jadi saya akan mengimpor ini di sini juga dan kemudian mengatur style saya konstan yang bisa Anda namai berbeda tentu saja dengan stylesheet 29 00:02:20,380 --> 00:02:26,990 buat dan saya akan kembali ke aplikasi. File js dan ambil gaya item daftar saya di sini, potong dari sana dan pergi ke 30 00:02:26,990 --> 00:02:32,960 item tujuan dan tambahkan di sini ke objek ini saya lolos ke stylesheet. membuat. 31 00:02:33,020 --> 00:02:39,140 Sekarang ini harus bekerja tetapi tentu saja apa yang saya hasilkan di sini tidak lagi pada data barang, sebagai 32 00:02:39,500 --> 00:02:46,550 gantinya mari kita berharap bahwa kita hanya mendapatkan ini sebagai alat peraga, jadi baik alat peraga anak-anak sehingga dapat dilewati antara tag pembuka 33 00:02:46,550 --> 00:02:53,210 dan penutup dari kami komponen khusus atau mungkin alat peraga. judul, apa pun yang Anda inginkan, nama 34 00:02:53,210 --> 00:02:59,770 prop pilihan Anda saat itu. Sekarang kita dapat menggunakan komponen khusus 35 00:02:59,770 --> 00:03:06,580 kita, item tujuan dengan kembali ke aplikasi. file js dan di sini saya akan menambahkan impor ke item sasaran 36 00:03:06,580 --> 00:03:15,370 dengan huruf kapital G, sehingga Bereaksi mengenalinya sebagai komponen khusus. / components / GoalItem, Anda dapat menghilangkan. js dan sekarang kita dapat 37 00:03:15,370 --> 00:03:24,550 menggunakan item sasaran di sini dalam item render sebagai komponen khusus, dalam hal ini komponen penutupan sendiri karena karena saya 38 00:03:24,610 --> 00:03:30,220 menggunakan judul properti dan bukan properti anak-anak, saya tidak mengharapkan apa pun 39 00:03:30,220 --> 00:03:37,660 antara pembukaan dan penutupan tag komponen khusus saya. Saya mengharapkan prop judul, jadi mari kita atur ini di sini dengan 40 00:03:37,660 --> 00:03:43,360 judul dan kemudian di sini, kita dapat menunjuk pada data item, kemudian mendapatkan akses pada item yang merupakan 41 00:03:44,480 --> 00:03:53,210 objek di mana kita memiliki kunci nilai dan dengan itu, kita masih harus melihat sama seperti sebelumnya jika kita memasukkan beberapa tujuan di sini, pelajari semua tentang rn, 42 00:03:54,870 --> 00:04:01,230 ya itu terlihat bagus, sekarang dengan komponen khusus kami. Sekarang, inilah praktik yang baik bagi Anda untuk juga memasukkan 43 00:04:01,260 --> 00:04:07,320 input dan tombol teks atau seluruh tampilan ini di sini ke dalam komponen input tujuan kami dan tentu saja untuk 44 00:04:07,320 --> 00:04:12,810 itu, Anda juga perlu menghubungkan komunikasi antara aplikasi. File js dan komponen input sasaran untuk 45 00:04:13,170 --> 00:04:18,930 diinformasikan ketika pengguna menekan tombol ini di komponen input tujuan dan kemudian menambahkan data di sini di 46 00:04:18,930 --> 00:04:19,730 app. file js. 47 00:04:20,280 --> 00:04:25,260 Ini adalah bagaimana Anda akan melakukannya dalam proyek React untuk web juga, jadi jika Anda memiliki pengalaman dengan 48 00:04:25,260 --> 00:04:30,860 itu, seharusnya tidak ada masalah, kalau tidak kita akan melakukannya bersama di kuliah berikutnya tetapi jika Anda tahu bagaimana melakukannya, pasti 49 00:04:30,860 --> 00:04:32,250 coba Anda sendiri dulu sekarang.