1 00:00:02,110 --> 00:00:07,000 Jadi di layar tempat baru, saya ingin dapat menambahkan tempat dan untuk itu, saya pertama-tama 2 00:00:07,030 --> 00:00:12,190 akan menambahkan komponen input teks yang tentu saja tidak ada hubungannya dengan fitur perangkat asli tetapi kami 3 00:00:12,190 --> 00:00:19,330 juga membutuhkannya karena di di sana, kita sekarang dapat menambahkan input teks yang memungkinkan pengguna untuk memasukkan judul dan karena itu, saya juga 4 00:00:19,330 --> 00:00:24,350 akan menambahkan komponen teks di sini di mana saya mengatakan judul, yang seharusnya bertindak sebagai label 5 00:00:24,370 --> 00:00:25,360 untuk input teks 6 00:00:25,360 --> 00:00:32,450 ini di sini dan secara keseluruhan, saya juga ingin tampilan gulir di sini untuk membungkus semua konten saya karena saya tidak tahu perangkat 7 00:00:32,520 --> 00:00:37,540 mana yang akan digunakan pengguna tetapi kami akan menambahkan lebih dari sekedar judul, kami juga akan 8 00:00:37,540 --> 00:00:43,120 menambahkan pemilih gambar dan pemilih tempat di seluruh modul ini dan karenanya dapat menggulir halaman ini sangat penting. 9 00:00:43,180 --> 00:00:48,820 Jadi sekarang kita memiliki label judul dan input teks miliknya yang untuk saat ini tidak akan melakukan apa 10 00:00:48,820 --> 00:00:52,450 pun tetapi yang akan segera memungkinkan pengguna untuk memasukkan judul. 11 00:00:52,540 --> 00:00:55,840 Saya juga ingin memastikan bahwa tentu saja formulir ini dapat dikirimkan, jadi 12 00:00:56,170 --> 00:01:02,500 yang juga ingin saya lakukan adalah saya ingin menambahkan komponen tombol di sini dan setelah input teks di sini, saya akan memiliki tombol saya di 13 00:01:02,500 --> 00:01:10,450 mana saya katakan simpan tempat untuk contoh, tambahkan warna di sini dan atur ini ke Colors. utama dan untuk itu, Anda perlu memastikan Anda mengimpor warna 14 00:01:10,540 --> 00:01:15,730 konstan di sini dan onPress nantinya akan mengirimkan formulir ini, untuk saat 15 00:01:15,820 --> 00:01:19,750 ini saya tidak melakukan apa pun di sini. 16 00:01:19,750 --> 00:01:25,030 Input teks tentu saja juga dapat dikonfigurasi, meskipun sebagian besar konfigurasi dasar baik-baik saja di sini, saya 17 00:01:25,030 --> 00:01:29,920 tidak perlu mengubah jenis keyboard dan sebagainya, tetapi beberapa gaya akan bagus dan itu sebenarnya 18 00:01:29,920 --> 00:01:31,360 berlaku untuk seluruh halaman. 19 00:01:31,360 --> 00:01:37,330 Jadi untuk tampilan ini di sini, misalnya, saya ingin menambahkan gaya formulir di sini, jadi pengidentifikasi gaya formulir sehingga 20 00:01:37,330 --> 00:01:41,140 saya bisa menata keseluruhan bentuk. Untuk judul di 21 00:01:41,140 --> 00:01:50,980 sini, saya akan menambahkan gaya label dan untuk input teks, saya juga ingin menambahkan gaya saya sendiri dan saya akan menggunakan 22 00:01:51,100 --> 00:01:55,210 input teks pengidentifikasi di sini. Dengan itu mari kita pergi ke 23 00:01:55,210 --> 00:02:00,180 stylesheet dan pastikan kita menambahkan beberapa style di sini. Untuk keseluruhan bentuk, saya akan 24 00:02:00,220 --> 00:02:05,350 menambahkan margin di semua arah 30 sehingga tidak duduk langsung di tepi layar. 25 00:02:06,160 --> 00:02:07,480 Untuk label, 26 00:02:07,780 --> 00:02:15,640 saya ingin mengatur ukuran font katakanlah 18 dan juga menambahkan margin ke bagian bawah 15 sehingga kami memiliki beberapa 27 00:02:15,640 --> 00:02:20,530 jarak antara label dan input teks dan pada input teks itu sendiri, 28 00:02:20,860 --> 00:02:27,670 baik untuk menjadi dapat melihatnya, saya akan menambahkan batas bawah dan mengatur warnanya ke abu-abu terang 29 00:02:27,670 --> 00:02:36,460 ini di sini dengan kode hex #ccc dan lebar bawah perbatasan di sini dari 1 dan kemudian juga memiliki margin di 30 00:02:36,490 --> 00:02:43,060 bagian bawahnya, sehingga untuk konten di bawahnya, tombol sekarang dari 15 dan apa yang juga akan 31 00:02:43,060 --> 00:02:48,300 saya tambahkan di sini adalah sedikit padding vertikal, hanya empat dan sedikit 32 00:02:48,670 --> 00:02:52,100 padding horizontal, hanya dua. Jika saya menyimpannya, mari kita lihat. 33 00:02:52,150 --> 00:02:57,310 Jika saya pergi ke layar tempat baru, ini adalah apa yang saya miliki dan ini tidak terlihat terlalu 34 00:02:57,400 --> 00:03:03,360 buruk, juga di Android, ini adalah sesuatu yang dapat kami kerjakan, saya kira dan ini adalah sesuatu yang dapat kami bangun. 35 00:03:03,460 --> 00:03:05,970 Sekarang tentu saja, input ini tidak melakukan 36 00:03:05,980 --> 00:03:13,390 apa-apa, saya tentu saja ingin menangkap apa yang dimasukkan pengguna dan untuk menjaga ini tetap sederhana, di sini saya tidak akan 37 00:03:13,390 --> 00:03:15,770 menambahkan validasi super kompleks atau semacamnya, 38 00:03:15,790 --> 00:03:22,030 alih-alih saya hanya akan menangkap nilainya dan hanya itu. Anda tentu saja dapat menambahkan validasi, Anda dapat menambahkan reducer 39 00:03:22,330 --> 00:03:23,360 seperti yang 40 00:03:23,370 --> 00:03:28,680 kami lakukan di modul input pengguna di mana Anda belajar bagaimana Anda dapat mengelola formulir yang 41 00:03:28,690 --> 00:03:36,490 lebih kompleks dengan segala cara, di sini sekali lagi saya akan membuat ini sangat sederhana dan karena itu, saya hanya akan mengimpor status penggunaan 42 00:03:36,490 --> 00:03:40,660 hook dari Bereaksi di sini sehingga saya bisa menangkap nilai saya di sini. 43 00:03:40,660 --> 00:03:49,360 Jadi di sini, saya akan memiliki nilai judul dan mengatur fungsi nilai judul dan menggunakan status penggunaan untuk menginisialisasi ini ke string kosong 44 00:03:49,350 --> 00:03:53,140 dan kemudian saya akan menambahkan fungsi di sini, pengendali perubahan 45 00:03:53,230 --> 00:03:59,800 judul, yang menerima teks yang dimasukkan pengguna dan di mana l Maka saya hanya akan mengatur nilai judul 46 00:03:59,800 --> 00:04:08,750 saya untuk teks itu dan di sini tentu saja, Anda dapat menambahkan validasi tetapi sekali lagi untuk menjaga ini tetap sederhana, saya tidak akan 47 00:04:08,750 --> 00:04:09,470 melakukannya. 48 00:04:09,470 --> 00:04:15,380 Penangan perubahan judul yang sekarang harus terikat pada prop teks perubahan di sini, pada input teks, jadi di sana 49 00:04:15,380 --> 00:04:16,040 saya akan 50 00:04:16,040 --> 00:04:22,190 menunjuk pada penangan perubahan judul dan saya akan mengikat nilai input itu tentu saja ke nilai judul saya karena di situlah 51 00:04:22,190 --> 00:04:25,070 saya menyimpan input pengguna dan dengan itu kami memiliki 52 00:04:25,190 --> 00:04:33,050 input pengguna yang berfungsi penuh di sini di mana saya juga menangkap nilainya. Sekarang dengan itu, kami bisa mendapatkan judul, 53 00:04:33,050 --> 00:04:35,530 kami juga memiliki tempat 54 00:04:35,570 --> 00:04:37,640 yang aman. 55 00:04:37,640 --> 00:04:40,110 Setiap kali kita menekan tombol ini, saya 56 00:04:40,190 --> 00:04:46,370 ingin menyimpannya sehingga saya akan memiliki tempat penangan simpanan saya yang merupakan fungsi yang ingin saya ikat ke 57 00:04:46,370 --> 00:04:47,680 tombol simpan tempat 58 00:04:47,720 --> 00:04:54,050 ini, jadi di sini alih-alih memiliki fungsi anonim kosong ini, saya akan arahkan ke save place handler pada tombol 59 00:04:54,050 --> 00:04:58,920 save place ini dan di sana, saya sekarang ingin memastikan tempat ini bisa diselamatkan 60 00:04:59,030 --> 00:05:01,540 dan untuk ini, saya akan menggunakan Redux lagi. 61 00:05:01,910 --> 00:05:10,880 Jadi saya akan menginstal Redux dengan menginstal npm --simpan redux dan juga Bereaksi Redux dan saya juga akan menginstal Redux 62 00:05:10,880 --> 00:05:13,660 Thunk sehingga kita dapat menggunakannya juga. 63 00:05:13,670 --> 00:05:19,170 Untuk saat ini saya tidak memerlukannya karena saya tidak berbicara dengan server tetapi kemudian setelah kami menambahkan 64 00:05:19,170 --> 00:05:24,230 fitur perangkat asli, Anda akan melihat bahwa di sana kami juga mendapatkan beberapa fitur yang tidak 65 00:05:24,230 --> 00:05:29,750 sinkron dan di mana kami mungkin ingin menunggu penyelesaiannya sebelum kami benar-benar mengirim tindakan yang persis di 66 00:05:29,750 --> 00:05:34,470 mana Redux Thunk dapat membantu kami. Jadi oleh karena itu dengan tiga paket yang diinstal ini, kita sekarang dapat mengatur Redux.