1 00:00:02,340 --> 00:00:06,210 Jadi ada banyak pembicaraan, banyak hal yang dilakukan, sekarang saatnya untuk 2 00:00:06,210 --> 00:00:10,680 membuat tombol ini berfungsi dan mari kita tambahkan tujuan di sini, benar dan 3 00:00:10,680 --> 00:00:11,780 untuk itu 4 00:00:11,850 --> 00:00:17,040 kita perlu mencari tahu apa yang dimasukkan pengguna dan setelahnya, tentu saja dengarkan satu ketukan pada 5 00:00:17,040 --> 00:00:23,850 tombol dan kemudian tambahkan sasaran yang dimasukkan ke serangkaian sasaran yang harus kita kelola di suatu tempat, yang kemudian dapat kita 6 00:00:23,850 --> 00:00:26,850 tampilkan di sana dalam tampilan bawah ini, benar, itulah 7 00:00:26,850 --> 00:00:29,630 yang perlu kita lakukan. Sekarang dalam kursus 8 00:00:29,670 --> 00:00:35,600 ini, saya akan menggunakan komponen fungsional hanya dengan fitur React hooks yang relatif baru, jadi jika 9 00:00:35,640 --> 00:00:41,550 Anda belum tahu React hooks, pasti mempelajarinya terlebih dahulu, misalnya dalam React Complete Guide saya, 10 00:00:41,550 --> 00:00:42,120 saya 11 00:00:42,120 --> 00:00:47,250 membahas secara menyeluruh mereka tetapi terpasang Anda juga menemukan beberapa sumber daya lain 12 00:00:47,250 --> 00:00:54,000 yang membantu Anda memulai dengan React hooks karena kita akan memerlukan React hooks untuk misalnya mendapatkan input pengguna. 13 00:00:54,000 --> 00:01:00,280 Kami menggunakan hook useState untuk apa yang kami impor dari Bereaksi, bukan dari Bereaksi Pribumi 14 00:01:00,300 --> 00:01:02,070 tetapi dari Bereaksi, ini 15 00:01:02,220 --> 00:01:10,620 adalah fitur React inti dan kemudian di sini dalam komponen fungsional ini, dalam komponen aplikasi ini, kami bisa mendapatkan tujuan 16 00:01:10,620 --> 00:01:19,110 yang dimasukkan dan juga mendapatkan set memasukkan fungsi sasaran untuk memperbarui keadaan dengan bantuan useState dan secara default, kami memiliki keadaan 17 00:01:19,110 --> 00:01:24,840 awal yang merupakan string kosong karena pengguna belum memasukkan apa pun di awal. 18 00:01:24,870 --> 00:01:27,330 Sekarang kita dapat mengikat ini ke 19 00:01:27,330 --> 00:01:33,870 input teks, itu berarti ketika pengguna mengetik karakter, kita ingin memperbarui keadaan kita dan menyimpan teks yang dimasukkan 20 00:01:33,870 --> 00:01:39,240 dalam keadaan di sini yang kemudian dapat kita akses melalui tujuan yang dimasukkan dan 21 00:01:39,240 --> 00:01:46,680 kita akan melewati tujuan yang dimasukkan kembali ke input teks. Itu pengikatan dua arah ini, yang disebut komponen terkontrol yang juga Anda 22 00:01:46,680 --> 00:01:50,380 ketahui dari Bereaksi untuk web dengan elemen input HTML normal. 23 00:01:50,430 --> 00:01:57,340 Jadi di sini kita dapat mendengarkan onChangeText, sebuah prop yang disediakan oleh input teks yang mengambil fungsi yang 24 00:01:57,430 --> 00:01:59,930 akan dijalankan untuk setiap penekanan tombol. 25 00:01:59,970 --> 00:02:04,660 Sekarang kita dapat menyediakan fungsi inline di sini, tetapi kita juga dapat mengatur fungsi 26 00:02:04,660 --> 00:02:09,850 terpisah untuk memiliki sedikit kode pembersih dan Anda dapat memiliki fungsi dalam suatu fungsi dan kita 27 00:02:09,850 --> 00:02:17,770 perlu memilikinya di sini, sehingga kita dapat menggunakan status kita atau atur fungsi tujuan yang dimasukkan di sini, hanya dengan menambahkan fungsi baru di 28 00:02:18,990 --> 00:02:26,400 sini, pengarah input tujuan dapat berupa nama, nama terserah Anda sekalipun. Dalam fungsi itu, kita akan mendapatkan teks yang dimasukkan 29 00:02:26,580 --> 00:02:34,170 secara otomatis, yang akan diteruskan oleh Bereaksi atau oleh Bereaksi Asli di sini dan kemudian kita dapat memanggil setel tujuan yang dimasukkan 30 00:02:34,200 --> 00:02:40,770 dan meneruskan teks yang dimasukkan sebagai nilai karena teks yang dimasukkan di sini akan menjadi string karena kami 31 00:02:41,100 --> 00:02:48,630 menghubungkan handler input tujuan ke onChangeText hanya dengan menunjuk di sini. Nah, itu penting, jangan tambahkan tanda kurung di sana 32 00:02:48,900 --> 00:02:54,300 karena ini akan menjalankan fungsi ini ketika kode ini diuraikan, jadi ketika 33 00:02:54,330 --> 00:02:59,880 UI diberikan untuk pertama kalinya. Anda tidak ingin mengeksekusi ini segera, Anda 34 00:02:59,880 --> 00:03:05,940 ingin mengeksekusinya pada setiap keystroke dan oleh karena itu, Anda hanya mengambil nama fungsi, Anda meneruskan 35 00:03:05,940 --> 00:03:12,210 nama fungsi tersebut ke onChangeText dan yang secara efektif memberitahu React Native, hei itulah fungsi yang harus 36 00:03:12,210 --> 00:03:19,260 saya jalankan untuk setiap keystroke, jadi jangan tambahkan tanda kurung di sini sehingga ini dapat berjalan pada setiap keystroke. 37 00:03:20,010 --> 00:03:25,170 Sekarang alih-alih sintaks fungsi ini, Anda juga bisa menggunakan sintaks berbeda yang akan saya 38 00:03:25,170 --> 00:03:31,080 gunakan sepanjang kursus, di mana Anda membuat konstanta dengan nama itu di sini dan kemudian nilai 39 00:03:31,080 --> 00:03:38,190 konstanta itu setelah tanda sama dengan hanyalah sebuah fungsi menggunakan sintaks fungsi panah, jadi ini di sini adalah daftar 40 00:03:38,180 --> 00:03:44,490 argumen Anda dan ini adalah fungsi tubuh. Itu sintaks Javascript normal, didukung oleh kode Javascript 41 00:03:44,490 --> 00:03:49,470 React Native dapat dijalankan dan oleh karena ini sintaks yang akan saya gunakan, Anda 42 00:03:49,470 --> 00:03:56,820 menghubungkannya ke onChangeText persis dengan cara yang sama seperti sebelumnya. Oke, jadi sekarang kita memiliki fungsi ini terhubung, kita memperbarui 43 00:03:57,090 --> 00:04:01,050 keadaan kita dengan apa pun yang dimasukkan pengguna pada setiap penekanan 44 00:04:01,050 --> 00:04:07,800 tombol, sekarang kita juga harus meneruskan teks itu kembali ke input teks, sehingga itu ditampilkan di sana dengan benar hanya 45 00:04:07,800 --> 00:04:14,190 dengan mengikat properti nilai ke memasukkan tujuan, jadi ke negara kita yang akan berubah dengan setiap penekanan tombol. 46 00:04:14,870 --> 00:04:20,400 Dan dengan itu, kami mendapatkan akses ke input pengguna karena sekarang akan 47 00:04:20,400 --> 00:04:27,010 selalu disimpan dalam tujuan yang dimasukkan. Sekarang ketika pengguna menekan tombol, kami ingin menggunakan tujuan yang 48 00:04:27,040 --> 00:04:33,730 dimasukkan, jadi untuk itu saya akan menambahkan fungsi lain di sini, tambahkan penangan tujuan dan itu hanya konvensi penamaan yang saya gunakan 49 00:04:33,940 --> 00:04:39,310 untuk fungsi-fungsi ini di sini, Anda dapat memberi nama mereka apa saja Anda ingin, apa pun yang Anda 50 00:04:39,310 --> 00:04:45,820 gunakan dari aplikasi Bereaksi Anda, pada akhirnya nama fungsi harus cukup menggambarkan apa yang akan terjadi dan bahwa di sini akan 51 00:04:45,820 --> 00:04:52,920 menangani pers pada tombol itu yang pada akhirnya akan menambah tujuan. Di sini fungsi tidak akan mengambil argumen apa pun tetapi di badan 52 00:04:52,920 --> 00:04:58,150 fungsi, saya ingin menambahkan tujuan yang dimasukkan ke daftar tujuan dan kami belum memiliki daftar, jadi untuk 53 00:04:58,230 --> 00:05:04,830 saat ini yang saya lakukan di sini adalah log konsol, yang didukung di React Asli, memasukkan sasaran sehingga setidaknya kita melihat bahwa 54 00:05:04,830 --> 00:05:10,710 ini disimpan dengan benar dan bahwa fungsi ini dijalankan. Untuk mengeksekusi ini, kita perlu menghubungkannya 55 00:05:10,710 --> 00:05:16,680 ke tombol, di sana kita dapat menambahkan prop onPress dan menunjuk pada add 56 00:05:16,680 --> 00:05:24,160 goal handler, lagi tanpa tanda kurung sehingga ini tidak dieksekusi segera tetapi hanya ketika terjadi pers. 57 00:05:24,540 --> 00:05:33,720 Dan sekarang mari kita simpan semua itu dan mari kita kembali dan mari kita mungkin masuk belajar React Native dan yang baik adalah Anda dapat menggunakan keyboard asli 58 00:05:33,720 --> 00:05:41,560 Anda di sini dan tekan add dan Anda akan melihat di sini di terminal Anda log ini, Anda juga akan melihat ini Ngomong-ngomong 59 00:05:41,560 --> 00:05:48,130 di alat pameran Anda di sini di tab browser. Di sana, Jika Anda mengklik salah satu 60 00:05:48,150 --> 00:05:52,670 perangkat yang terhubung, di mana Anda cukup mengklik tombol dalam kasus saya, 61 00:05:52,670 --> 00:05:57,730 perangkat Android, maka di bagian bawah Anda juga akan melihat Belajar Bereaksi Asli. 62 00:05:57,730 --> 00:06:05,350 Dan tentu saja itu juga berfungsi di iOS, pelajari semua tentang React Native, jika kita masukkan ini di sini dan klik add, maka 63 00:06:05,350 --> 00:06:12,840 kita juga melihat bahwa sedang login di sini dan juga melihat bahwa di alat expo dev, jika kita mengklik iPhone di paling 64 00:06:12,840 --> 00:06:16,810 bawah, kita melihat log ini. Oke jadi kita mendapatkan 65 00:06:16,910 --> 00:06:21,530 input pengguna, kita menyimpannya, kita konsol logging itu, tentu saja kita 66 00:06:21,530 --> 00:06:27,530 tidak ingin konsol login, kami ingin output di bawah input kami di sini, kami 67 00:06:27,530 --> 00:06:35,000 ingin daftar sasaran kami di bawah bidang masukan ini. Jadi untuk itu, kita memerlukan pandangan kedua di sini yang seharusnya menampilkan daftar barang kita. 68 00:06:35,030 --> 00:06:40,250 Jadi di sini antara tag pembuka dan penutup, saya ingin menampilkan semua elemen yang 69 00:06:40,280 --> 00:06:45,740 kami tambahkan, semua sasaran yang kami tambahkan. Untuk itu kita pertama-tama perlu mengelola tujuan kita 70 00:06:46,400 --> 00:06:51,780 dan kita dapat mengatur keadaan lain untuk itu yang awalnya adalah array kosong, maka saya melewati 71 00:06:51,860 --> 00:06:58,010 array kosong sebagai nilai untuk menggunakanState dan di sana kita memiliki tujuan kursus dan tujuan kursus yang ditetapkan fungsi. 72 00:06:58,010 --> 00:07:03,070 Sekarang nama-nama ini selalu terserah Anda, tetapi mereka harus menggambarkan apa yang ada di negara Anda dan bagaimana 73 00:07:03,070 --> 00:07:04,230 Anda dapat memperbaruinya. 74 00:07:04,240 --> 00:07:10,330 Jadi sekarang di sini ketika kita menambahkan tujuan, saya ingin memperbarui tujuan kursus saya untuk menambahkan 75 00:07:10,330 --> 00:07:20,840 tujuan baru dan untuk itu, saya dapat memanggil tujuan kursus yang ditetapkan dan sekarang menetapkan tujuan kursus ke array baru di mana saya mengambil tujuan kursus lama saya dan 76 00:07:20,840 --> 00:07:21,740 menambahkan baru. 77 00:07:21,740 --> 00:07:25,100 Sekarang ini adalah sintaks yang mungkin tidak Anda ketahui, itulah 78 00:07:25,100 --> 00:07:30,470 yang disebut operator sebar, ini adalah fitur Javascript yang mengambil array yang ada dan tujuan kursus 79 00:07:30,470 --> 00:07:38,030 adalah sebuah array, ini adalah snapshot keadaan kita sebelum pembaruan dan mengeluarkan semua elemen dari itu array dan kemudian menambahkannya di sini ke 80 00:07:38,030 --> 00:07:43,280 array baru yang mengapa saya memiliki tanda kurung siku, tanpa tanda kurung siku ini tidak akan 81 00:07:43,280 --> 00:07:43,840 berfungsi 82 00:07:43,850 --> 00:07:49,310 tetapi sekarang kita membuat array baru dan kita menambahkan semua elemen dari array lama dan sekarang kita 83 00:07:49,310 --> 00:07:51,100 bisa juga tambahkan elemen baru. 84 00:07:51,110 --> 00:07:53,370 Jadi di sini, saya menambahkan koma untuk 85 00:07:53,390 --> 00:08:00,310 menambahkan elemen tambahan setelah semua elemen yang saya tarik di sini dan elemen yang saya tambahkan di sini adalah tujuan yang dimasukkan tentu saja. 86 00:08:00,320 --> 00:08:04,680 Jadi sekarang kita memperbarui daftar tujuan kita dengan daftar tujuan lama, 87 00:08:04,730 --> 00:08:10,250 awalnya daftar kosong tetapi kemudian ini akan tumbuh seiring waktu karena kita kemudian juga 88 00:08:10,250 --> 00:08:17,380 menambahkan tujuan baru ketika kita menekan tombol itu. Sekarang catatan kecil, ketika bekerja dengan menetapkan tujuan kursus, 89 00:08:17,380 --> 00:08:21,410 tujuan kursus di sini adalah keadaan kami sebelumnya dan cara React 90 00:08:21,460 --> 00:08:28,210 memperbarui keadaan, ini harus selalu menjadi snapshot keadaan terbaru Anda tetapi tidak dijamin 100%, untuk mendapatkan jaminan 100% 91 00:08:28,360 --> 00:08:32,750 , ketika Anda memperbarui negara Anda berdasarkan negara lama, Anda dapat menggunakan 92 00:08:32,920 --> 00:08:39,250 bentuk fungsi dari fungsi set ini di mana Anda tidak melewati nilai negara baru Anda di sini 93 00:08:39,250 --> 00:08:39,950 tetapi 94 00:08:40,060 --> 00:08:46,870 sebaliknya Anda meneruskannya dalam suatu fungsi, biasanya fungsi anonim di mana Anda dapatkan status saat ini atau sasaran 95 00:08:46,990 --> 00:08:53,850 saat ini, jadi potret keadaan saat ini dan kemudian Anda mengembalikan nilai yang diperbarui, jadi di sini saya 96 00:08:53,860 --> 00:09:01,240 mengembalikan array saya yang diperbarui dengan sintaks fungsi panah sebaris di mana jika Anda hanya memiliki satu ekspresi, Anda dapat 97 00:09:01,240 --> 00:09:06,640 menghilangkan kurung kurawal dan kembalikan pernyataan dan cukup masukkan nilai yang ingin Anda kembalikan 98 00:09:06,640 --> 00:09:08,650 dan itu akan dikembalikan dan 99 00:09:08,680 --> 00:09:13,310 itu semua Javascript normal di sini, tidak ada yang spesifik Bereaksi asli. 100 00:09:13,450 --> 00:09:21,070 Jadi di sini, saya kemudian mengambil sasaran saya saat ini dan kemudian menambahkan sasaran yang saya masukkan. Sintaks ini sedikit lebih baik, sintaks lainnya akan 101 00:09:21,070 --> 00:09:26,170 bekerja dengan baik tetapi ini dijamin akan selalu berhasil karena React 102 00:09:26,200 --> 00:09:33,520 Native akan selalu melanjutkan dan memberi Anda jaminan, snapshot keadaan terbaru sebelum menerapkan perubahan status Anda 103 00:09:33,550 --> 00:09:35,050 di sini. 104 00:09:35,260 --> 00:09:42,410 Nah, itu bagus, sekarang kita akan memiliki daftar, serangkaian tujuan yang dikelola di sini. Bagaimana kita bisa menampilkan ini?