1 00:00:02,290 --> 00:00:08,230 Sekarang dengan wadah input yang ditentukan dan dengan beberapa gaya baru yang dicakup oleh itu, kita dapat 2 00:00:08,270 --> 00:00:12,580 melakukan sesuatu yang saya sebutkan bahwa itu akan selalu menjadi ide yang 3 00:00:12,640 --> 00:00:16,380 baik, kita dapat membagi aplikasi kita menjadi beberapa komponen. 4 00:00:16,600 --> 00:00:17,800 Tampilan ini di sini, 5 00:00:17,800 --> 00:00:24,100 tampilan wadah masukan ini, tampilan kartu ini mungkin adalah sesuatu yang ingin kita gunakan di bagian lain aplikasi 6 00:00:24,100 --> 00:00:24,890 juga. 7 00:00:25,060 --> 00:00:28,450 Kami mungkin memiliki item berbeda yang ingin kami sajikan 8 00:00:28,450 --> 00:00:32,680 dalam kartu seperti itu, pertimbangkan Anda membangun toko online tempat Anda memiliki 9 00:00:32,680 --> 00:00:39,160 setiap produk dalam kartu tersebut di layar ikhtisar. Sekarang untuk menghindari pengulangan definisi gaya ini berulang-ulang, 10 00:00:39,160 --> 00:00:45,130 kita dapat mengalihdayakannya menjadi komponen yang terpisah, komponen yang tidak benar-benar memiliki banyak logika di 11 00:00:45,160 --> 00:00:46,950 dalamnya tetapi yang 12 00:00:47,080 --> 00:00:53,050 mengontrol gaya kontennya, komponen presentasi murni karenanya. Secara teknis itu masih merupakan komponen Bereaksi biasa dan karenanya saya akan membuat file 13 00:00:53,050 --> 00:00:58,450 baru di sini di folder komponen dan beri nama kartu itu. Nama terserah Anda, tetapi ini adalah tampilan kartu yang 14 00:00:58,450 --> 00:00:59,400 khas sehingga 15 00:00:59,410 --> 00:01:01,510 terdengar seperti nama yang pas bagi saya. 16 00:01:02,220 --> 00:01:11,290 Sekarang di sini seperti biasa, impor Bereaksi dari Bereaksi dan kemudian juga mengimpor pandangan dari Bereaksi Asli di sini dan kemudian membuat 17 00:01:11,290 --> 00:01:20,830 komponen kartu, komponen fungsional seperti ini yang pada akhirnya Anda ekspor sebagai default dan jelas karena ini semua tentang presentasi di sini, kami Anda 18 00:01:21,310 --> 00:01:22,900 akan memerlukan stylesheet 19 00:01:22,900 --> 00:01:28,630 untuk membuat objek gaya karena itu akan menjadi hal inti dari komponen ini, itu 20 00:01:28,630 --> 00:01:31,120 harus ada di sana untuk membungkus 21 00:01:31,120 --> 00:01:36,200 dirinya sendiri di sekitar konten apa pun dan hanya menerapkan beberapa gaya umum. 22 00:01:37,270 --> 00:01:42,600 Jadi sekarang, saya akan ke layar mulai permainan dan saya akan mengambil semua gaya di sini dari wadah 23 00:01:42,700 --> 00:01:49,180 input, menyalinnya dari sana dan menambahkannya ke kartu sebagai gantinya. Di sini saya akan menambahkan properti kartu baru 24 00:01:49,180 --> 00:01:49,790 dan 25 00:01:51,220 --> 00:01:54,880 menggunakan gaya saya di sini dan di dalam komponen kartu, 26 00:01:55,020 --> 00:01:59,670 saya akan memiliki markup yang sangat sederhana sehingga, kode jsx sangat sederhana. 27 00:01:59,670 --> 00:02:05,900 Itu hanya pandangan yang saya kembalikan di sini yang harus dibungkus alat peraga anak-anak, alat peraga anak-anak 28 00:02:05,910 --> 00:02:11,880 adalah alat peraga khusus dalam Bereaksi yang pada dasarnya adalah konten yang Anda berikan di antara 29 00:02:11,880 --> 00:02:18,570 tag pembuka dan penutup dari komponen khusus Anda. Jadi itu dapat membungkus dirinya sendiri di sekitar konten apa pun 30 00:02:18,570 --> 00:02:25,400 karena satu-satunya tujuan komponen kartu ini adalah menerapkan beberapa gaya pada wadah di sekitarnya dan kami melakukan ini dengan menambahkan kartu gaya di sini. 31 00:02:25,510 --> 00:02:32,610 Sekarang hanya ada satu hal, ada gaya tertentu di sini yang mungkin tidak boleh diatur dari 32 00:02:32,610 --> 00:02:33,790 dalam kartu, 33 00:02:33,810 --> 00:02:41,580 tidak setiap kartu mungkin memiliki lebar ini atau lebar maks dan tidak setiap kartu harus memusatkan isinya. 34 00:02:41,580 --> 00:02:47,220 Oleh karena itu saya akan memotong tiga item ini dari sana dan hanya memiliki bayangan dan bantalan yang 35 00:02:47,220 --> 00:02:50,890 dipasang di sini dan saya ingin membuat ini sedikit lebih fleksibel. 36 00:02:50,970 --> 00:02:57,780 Selain gaya kartu, alangkah baiknya jika kita juga bisa menetapkan gaya kita sendiri 37 00:02:57,780 --> 00:03:07,440 dari luar dan bahkan mungkin menimpa beberapa gaya kartu. Kita dapat melakukan ini dengan mengirimkan objek baru ke prop gaya dan 38 00:03:07,530 --> 00:03:13,730 mendistribusikan semua properti, semua pasangan nilai kunci dari gaya kartu kita di sini ke objek baru ini. 39 00:03:13,800 --> 00:03:20,400 Ini adalah operator penyebaran, fitur Javascript modern yang menarik semua pasangan nilai kunci dari suatu objek 40 00:03:20,460 --> 00:03:23,910 dan menambahkannya ke objek sekitarnya yang baru. 41 00:03:24,150 --> 00:03:28,170 Jadi kami menyalin semua gaya yang ditentukan di sana ke objek baru ini 42 00:03:28,170 --> 00:03:34,170 dan saya melakukan ini sehingga saya juga bisa menambahkan pasangan nilai kunci lain di sini atau pasangan pasangan nilai kunci 43 00:03:34,170 --> 00:03:41,370 di mana saya mengambil semua gaya yang ditentukan dalam gaya alat peraga, jadi pada prop gaya yang saya berikan ke komponen kustom saya sendiri, 44 00:03:41,370 --> 00:03:42,090 saya 45 00:03:42,090 --> 00:03:48,060 mengambil semua pasangan nilai kunci yang didefinisikan di sana dan menggabungkan mereka ke dalam objek ini dan karena saya melakukan 46 00:03:48,240 --> 00:03:53,760 ini kedua, ini akan menimpa pasangan nilai kunci yang diatur dalam kartu gaya, sehingga kita dapat mengesampingkan gaya 47 00:03:53,760 --> 00:03:56,700 apa pun yang diatur di sana dari luar ketika 48 00:03:56,700 --> 00:04:02,100 kita menggunakan komponen kita dan ketika kita menambahkan gaya tambahan di luar komponen, itu juga akan menggabungkan 49 00:04:02,140 --> 00:04:08,160 itu dan mempertimbangkannya dan dengan itu kita juga dapat menetapkan gaya kita sendiri dari luar dari komponen kartu ketika kita 50 00:04:08,160 --> 00:04:12,730 menggunakan komponen kartu dan menggunakan komponen kartu adalah sesuatu yang masuk akal sebagai langkah selanjutnya. 51 00:04:12,750 --> 00:04:20,040 Jadi mari kita pergi ke layar mulai permainan ini dan impor kartu dari folder komponen dan di 52 00:04:20,040 --> 00:04:28,220 sana dari folder kartu dan ganti tampilan wadah masukan kami di sini dengan kartu, seperti ini, seperti ini, dengan membuka 53 00:04:28,220 --> 00:04:29,920 dan menutup tag. 54 00:04:29,930 --> 00:04:35,420 Sekarang lagi, saya ingin mengatur gaya saya sendiri, saya ingin mengatur lebar saya sendiri, lebar maks 55 00:04:35,510 --> 00:04:39,040 dan menyelaraskan item, jadi saya akan menyimpan wadah input 56 00:04:39,320 --> 00:04:46,030 di stylesheet di sana, tetapi sekarang singkirkan semua gaya lain di sana, semua gaya yang sekarang diatur dalam kartu 57 00:04:46,100 --> 00:04:46,650 sehingga 58 00:04:46,790 --> 00:04:54,920 kita hanya menjaga lebar dan penyelarasan di sini dan kemudian menambahkan ini di sini ke kartu pada alat peraga gaya yang diterima atau 59 00:04:54,980 --> 00:05:01,280 yang memiliki efek karena dalam komponen kartu, itu alat peraga gaya yang Saya bergabung dengan style saya yang 60 00:05:01,280 --> 00:05:10,250 lain, jadi untuk prop gaya itu, saya akan menunjuk ke wadah input style. Sekarang dengan itu jika kita menyimpan itu, 61 00:05:10,250 --> 00:05:12,330 saya mendapatkan kesalahan, 62 00:05:12,350 --> 00:05:17,350 objek bukan fungsi di dekat React Native stylesheet. 63 00:05:17,420 --> 00:05:24,250 Begitu juga dalam kartu. File js saat menunjuk di sini, ada yang salah, bahkan memberi saya 64 00:05:24,260 --> 00:05:30,890 nomor baris, itu baris 10, itulah yang dimaksud angka ini dan ya, masalah saya di sini adalah saya menggunakan stylesheet seperti ini, 65 00:05:30,920 --> 00:05:31,640 itu salah, 66 00:05:31,640 --> 00:05:35,760 alih-alih kita harus memanggil Stylesheet . buat untuk menentukan gaya kita sendiri, jadi 67 00:05:35,780 --> 00:05:37,010 itu sintaks yang tepat. 68 00:05:37,010 --> 00:05:42,240 Jadi ini adalah kesalahan sintaksis, bukan kesalahan sintaksis secara teknis tapi saya menggunakan objek stylesheet salah. 69 00:05:42,410 --> 00:05:46,430 Jadi itu adalah kesalahan dari pihak saya, pesan kesalahan membantu kami dengan itu dan sekarang kami 70 00:05:46,430 --> 00:05:52,420 memiliki tampilan yang sama seperti sebelumnya, tetapi kami memiliki kartu yang dapat digunakan kembali yang sekarang dapat kita gunakan di tempat di mana kita 71 00:05:52,430 --> 00:05:55,280 ingin memiliki tampilan persis seperti ini dengan bayangan dan begitu seterusnya.