Jadi kita sudah melihat pada serangkaian dasar-dasar yang Anda butuhkan untuk membangun aplikasi React Native, untuk bekerja dengan blok
bangunan inti ini meskipun tentu saja
banyak hal yang masih belum jelas, kami belum benar-benar melihat lebih
dekat pada gaya dan tata letak dan sebagainya, tetapi satu hal yang harus kita
lakukan sekarang adalah juga mengeksplorasi bagaimana Anda dapat membangun komponen Anda sendiri karena sejauh ini, kami selalu
bekerja di aplikasi. File js dan Anda
tentu tidak akan membangun aplikasi yang lebih besar dalam
satu file saja, file itu akan menjadi
super besar dan jika Anda memiliki komponen khusus yang ingin Anda ulangi, saat ini kami harus menyalin dan
menempelkan kode kami.
Jadi mari kita buat komponen baru dan oleh karena itu di sini dalam proyek ini, saya akan menambahkan folder baru
bernama komponen, nama terserah Anda tetapi karena saya berencana menyimpan beberapa komponen di sana, nama itu masuk
akal bagi saya dan di sana, saya ingin membuat komponen untuk item daftar dan juga satu untuk area input kami.
Jadi mari kita buat dua file baru di sana dan saya akan memiliki konvensi penamaan untuk
file di mana saya mulai dengan huruf kapital dan saya akan memiliki GoalItem saya. js, ini file Javascript dan
GoalInput saya. file js. Sekarang keduanya akan memegang komponen Bereaksi normal, jadi
mari kita mulai dengan item sasaran dan oleh karena itu impor Bereaksi dari Bereaksi, sama seperti Anda perlu melakukannya dalam proyek Bereaksi untuk web.
Lalu di sini, saya akan membuat komponen fungsional saya, item tujuan yang mendapat alat peraga dan yang kemudian harus
mengembalikan beberapa JSX di sini dan saya akan mengekspor ini sebagai default, seperti ini.
Sekarang jsx yang ingin saya render di sana harus menggunakan komponen Bereaksi Asli atau komponen kustom lain yang kemudian menggunakan komponen
Bereaksi Asli dan di sini saya akan pergi dengan
konten ini yang saya miliki di sini. Jadi saya akan memotongnya dari aplikasi. File js dan kembalikan di
sini.
Sekarang untuk menggunakan ini di sini, kita harus mengimpor tampilan dan teks,
jadi dua komponen ini, dari React Native.
Jadi mari kita impor tampilan dan teks dari React-Native di sini.
Selain itu, saya menyiapkan beberapa gaya dan saya ingin menggunakan stylesheet,
jadi saya akan mengimpor ini di sini juga dan kemudian mengatur style saya konstan yang bisa Anda namai berbeda tentu saja dengan stylesheet
buat dan saya akan kembali ke aplikasi. File js dan ambil gaya item daftar saya di sini, potong dari sana dan pergi ke
item tujuan dan tambahkan di sini ke objek ini saya lolos ke stylesheet. membuat.
Sekarang ini harus bekerja tetapi tentu saja apa yang saya hasilkan di sini tidak lagi pada data barang, sebagai
gantinya mari kita berharap bahwa kita hanya mendapatkan ini sebagai alat peraga, jadi baik alat peraga anak-anak sehingga dapat dilewati antara tag pembuka
dan penutup dari kami komponen khusus atau mungkin alat peraga. judul, apa pun yang Anda inginkan, nama
prop pilihan Anda saat itu. Sekarang kita dapat menggunakan komponen khusus
kita, item tujuan dengan kembali ke aplikasi. file js dan di sini saya akan menambahkan impor ke item sasaran
dengan huruf kapital G, sehingga Bereaksi mengenalinya sebagai komponen khusus. / components / GoalItem, Anda dapat menghilangkan. js dan sekarang kita dapat
menggunakan item sasaran di sini dalam item render sebagai komponen khusus, dalam hal ini komponen penutupan sendiri karena karena saya
menggunakan judul properti dan bukan properti anak-anak, saya tidak mengharapkan apa pun
antara pembukaan dan penutupan tag komponen khusus saya. Saya mengharapkan prop judul, jadi mari kita atur ini di sini dengan
judul dan kemudian di sini, kita dapat menunjuk pada data item, kemudian mendapatkan akses pada item yang merupakan
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,
ya itu terlihat bagus, sekarang dengan komponen khusus kami. Sekarang, inilah praktik yang baik bagi Anda untuk juga memasukkan
input dan tombol teks atau seluruh tampilan ini di sini ke dalam komponen input tujuan kami dan tentu saja untuk
itu, Anda juga perlu menghubungkan komunikasi antara aplikasi. File js dan komponen input sasaran untuk
diinformasikan ketika pengguna menekan tombol ini di komponen input tujuan dan kemudian menambahkan data di sini di
app. file js.
Ini adalah bagaimana Anda akan melakukannya dalam proyek React untuk web juga, jadi jika Anda memiliki pengalaman dengan
itu, seharusnya tidak ada masalah, kalau tidak kita akan melakukannya bersama di kuliah berikutnya tetapi jika Anda tahu bagaimana melakukannya, pasti
coba Anda sendiri dulu sekarang.