1 00:00:02,430 --> 00:00:05,640 Jadi mari kita mulai bekerja pada aplikasi ini lalu dan untuk 2 00:00:05,760 --> 00:00:08,270 ini, saya memiliki aplikasi baru di sini, 3 00:00:08,280 --> 00:00:12,390 Anda akan menemukannya terlampir jika Anda ingin membangun pada aplikasi awal yang sama ini. 4 00:00:12,420 --> 00:00:19,020 Aplikasi sederhana ini memberi kita ini di sini, aplikasi yang sangat jelek di mana kita memiliki beberapa teks yang tumpang 5 00:00:19,020 --> 00:00:21,440 tindih oleh bilah status, oleh takik. 6 00:00:21,450 --> 00:00:26,800 Sekarang kita bisa memperbaikinya dengan tampilan area simpan seperti yang Anda pelajari sebelumnya tetapi kami tidak perlu melakukannya 7 00:00:26,820 --> 00:00:33,210 karena kami tidak akan menyimpan konten ini lagi dan kami akan menggunakan perpustakaan pihak ketiga yang memungkinkan kami untuk dengan mudah 8 00:00:33,210 --> 00:00:36,530 menavigasi antara layar yang berbeda dan mendapatkan animasi yang bagus di 9 00:00:36,690 --> 00:00:38,310 sepanjang jalan, sehingga kita tidak 10 00:00:38,310 --> 00:00:44,610 perlu berhati-hati tentang hal itu dan perpustakaan pihak ketiga ini juga akan mengelola takik pada perangkat dan memberi kita area penyimpanan 11 00:00:44,610 --> 00:00:45,880 di luar kotak. 12 00:00:45,900 --> 00:00:52,230 Sekarang sebelum kita menambahkan perpustakaan pihak ketiga, mari kita mulai menulis beberapa kode karena kita hanya 13 00:00:52,230 --> 00:00:56,020 dapat menavigasi antar layar jika kita memiliki banyak layar. 14 00:00:56,040 --> 00:01:01,950 Jadi untuk itu, saya akan membuat folder layar baru di sini dan saya juga 15 00:01:01,950 --> 00:01:07,830 sudah membuat folder komponen, perbedaannya adalah di folder layar, kita memiliki komponen Bereaksi 16 00:01:07,860 --> 00:01:15,420 ini yang kemudian kita gunakan sebagai layar penuh yang saya kira dan di folder komponen sebagai gantinya, kita 17 00:01:15,420 --> 00:01:16,430 akan memiliki 18 00:01:16,440 --> 00:01:23,280 komponen yang kita gunakan di layar kita, jadi misalnya ketika kita memiliki kategori kisi makanan, kategori 19 00:01:23,280 --> 00:01:30,200 makanan, maka item kisi kita akan menjadi komponen, seluruh kisi, seluruh kategori makanan Namun layar akan 20 00:01:30,450 --> 00:01:37,530 menjadi layar dan saya kira ini masuk akal. Sekarang sebagai sketsa, sebagaimana ditata, dalam aplikasi ini kita akan memerlukan beberapa layar dan saya akan membuat 21 00:01:37,530 --> 00:01:43,860 semua file dan kita akan mengisinya dengan kehidupan di seluruh modul ini tentu saja. Kita akan membutuhkan layar kategori dan saya akan 22 00:01:43,890 --> 00:01:49,440 memberi nama layar kategori file untuk membuatnya benar-benar jelas apa yang ada di 23 00:01:49,440 --> 00:01:50,200 dalamnya. 24 00:01:50,250 --> 00:01:57,270 Ini adalah layar tempat kita dapat memilih kategori seperti Italia, Jerman, Amerika, jadi di mana kita dapat memilih kategori 25 00:01:57,270 --> 00:02:04,170 makanan, jadi kita akan menambahkan konten yang mencerminkan ini, kita akan menambahkan kotak seperti itu di layar ini, 26 00:02:04,230 --> 00:02:06,420 di layar ini komponen nanti. 27 00:02:06,420 --> 00:02:14,100 Sekarang setelah kami memilih kategori, kita akan melihat daftar makanan yang sesuai dengan kategori ini dan saya akan memberi nama layar 28 00:02:14,100 --> 00:02:20,190 ini yang kemudian akan kita lihat, yang akan kita navigasikan ke, layar makanan kategori karena ini adalah 29 00:02:20,190 --> 00:02:23,390 layar yang memuat makanan untuk kategori yang dipilih. 30 00:02:23,460 --> 00:02:28,240 Jadi itu adalah layar lain yang kita butuhkan dan layar lain yang dapat kita gunakan untuk navigasi. 31 00:02:28,320 --> 00:02:35,100 Sekarang kita juga akan membutuhkan layar favorit yang merupakan layar yang menampung semua resep favorit kita, makanan favorit 32 00:02:35,100 --> 00:02:42,300 kita dan kita juga akan membutuhkan MealDetailScreen, itulah layar yang kita lihat jika kita mengetuk satu kali makan di dalam 33 00:02:42,300 --> 00:02:48,390 kategori yang dipilih atau di layar favorit. Ini kemudian menunjukkan kepada kita bahan-bahan dan 34 00:02:48,390 --> 00:02:51,120 langkah-langkah rinci untuk makanan ini. 35 00:02:51,120 --> 00:02:58,020 Sekarang dan terakhir tetapi tidak kalah pentingnya, kita akan membutuhkan layar filter dan layar filter ini adalah layar yang 36 00:02:58,020 --> 00:03:05,700 memungkinkan kita untuk mengatur filter, seperti makanan vegan sehingga kita hanya melihat resep yang vegan atau vegetarian atau glutenFree atau lactoseFree, ini 37 00:03:05,790 --> 00:03:08,110 akan menjadi empat kategori yang akan 38 00:03:08,130 --> 00:03:14,950 saya miliki di aplikasi ini, jadi ini adalah layar. Sekarang kita akan menambahkan komponen seperti yang kita 39 00:03:15,040 --> 00:03:18,410 butuhkan dan tidak menambahkan semua file di 40 00:03:18,430 --> 00:03:25,390 muka dan dengan itu, kita memiliki pengaturan dasar yang kita butuhkan di sini, meskipun tentu saja 41 00:03:25,720 --> 00:03:31,330 semua layar kita benar-benar kosong. Sekarang kita akan mengisinya dengan lebih banyak langkah demi langkah, 42 00:03:31,330 --> 00:03:34,160 tetapi setidaknya saya ingin membuat komponen dasar di setiap layar ini. 43 00:03:34,390 --> 00:03:40,000 Jadi saya akan mulai di layar kategori dan tentu saja, kita perlu mengimpor Bereaksi dari Bereaksi di sana 44 00:03:40,000 --> 00:03:46,750 karena kita akan membangun komponen Bereaksi dan kita juga akan mengimpor sesuatu dari Bereaksi Asli karena jelas, kita akan membangun komponen Bereaksi 45 00:03:47,050 --> 00:03:52,600 di sini yang menggunakan beberapa komponen Bereaksi Asli. Lebih tepatnya, saya akan mulai sederhana di sini 46 00:03:52,630 --> 00:03:58,110 dan mengimpor tampilan dan teks dari Bereaksi Asli dan kemudian membuat komponen saya, layar kategori dalam hal 47 00:03:58,120 --> 00:04:04,630 ini yang mengambil alat peraga atau yang mungkin menerima alat peraga setidaknya karena itu komponen Bereaksi normal setelah semua dan 48 00:04:04,630 --> 00:04:11,530 di mana saya akan mengekspor ini sebagai komponen default saya. Saya juga akan menambahkan stylesheet karena kemungkinan 49 00:04:11,530 --> 00:04:16,870 kita akan membutuhkan ini dan jika tidak, kita masih bisa menghapusnya nanti. 50 00:04:16,870 --> 00:04:19,150 Jadi saya akan mengatur gaya 51 00:04:19,150 --> 00:04:22,060 saya di sini dengan stylesheet buat, seperti ini. 52 00:04:22,330 --> 00:04:26,440 Jadi itu komponen Bereaksi yang sangat dasar, tidak membuat apa 53 00:04:26,440 --> 00:04:32,730 pun, jadi di dalam fungsi komponen di sini, kita harus mengembalikan sesuatu dan bahwa ada beberapa 54 00:04:32,770 --> 00:04:39,920 kode jsx di mana saya ingin membuat tampilan dan di sana, teks dan di sini saya katakan layar kategori. 55 00:04:40,240 --> 00:04:49,270 Sekarang saya juga akan memberikan tampilan gaya di mana saya mengatakan gaya. layar, dengan tata letak layar yang sangat mendasar atau gaya layar di sini 56 00:04:49,270 --> 00:04:56,260 di mana saya mengatur flex ke satu dan kemudian membenarkan konten untuk memusatkan dan menyelaraskan item ke pusat dan ketika 57 00:04:56,260 --> 00:04:58,980 Anda belajar, ini akan melakukan satu hal, 58 00:04:59,080 --> 00:05:04,850 itu akan memusatkan konten di layar, jadi ini akan menempatkan teks ini di tengah layar pada akhirnya. 59 00:05:04,960 --> 00:05:09,880 Ini adalah komponen dasar dan saya akan menyalin konten itu ke semua layar lain dan 60 00:05:09,910 --> 00:05:14,920 tentu saja, ini bukan konten akhir yang akan kita miliki di sana, hanya beberapa konten tiruan 61 00:05:14,920 --> 00:05:19,210 sehingga kita dapat mulai menavigasi antara beberapa layar ini dan melihat sesuatu . 62 00:05:19,210 --> 00:05:25,900 Jadi di sini, kita memiliki layar makanan kategori, itu komponen ini di sini dan oleh karena itu apa yang kita 63 00:05:25,900 --> 00:05:37,880 perlu ekspor di sini dan di sini, karena itu saya akan mengatakan layar makanan kategori seperti ini. Sekarang saya juga akan menambahkan ini ke layar favorit dan mengganti nama ini 64 00:05:37,880 --> 00:05:41,650 ke layar favorit dan tentu saja karena itu 65 00:05:41,690 --> 00:05:43,700 ekspor layar favorit di 66 00:05:43,700 --> 00:05:45,000 sini 67 00:05:45,110 --> 00:05:48,720 dan kemudian di sini, saya dapat mengatakan layar 68 00:05:48,740 --> 00:05:53,060 favorit, salin ke layar filter dan lakukan hal yang 69 00:05:53,080 --> 00:05:55,920 sama di sana, itu layar filter, 70 00:05:55,940 --> 00:06:02,240 saya menamainya dan saya mengekspor ini dan juga mengatakan layar filter di sini dalam 71 00:06:02,390 --> 00:06:06,110 teks kita dan yang terakhir, ini adalah MealDetailScreen. 72 00:06:06,110 --> 00:06:09,000 Jadi di sini kita memiliki 73 00:06:09,740 --> 00:06:15,140 MealDetailScreen, saya juga akan menamainya MealDetailScreen di sini dan mengekspor MealDetailScreen. 74 00:06:15,140 --> 00:06:19,930 Jadi dengan itu, kami menyiapkan semuanya di layar ini, sekarang kami hampir 75 00:06:20,060 --> 00:06:23,390 selesai dengan semua persiapan, saya hanya ingin menambahkan 76 00:06:23,450 --> 00:06:29,240 beberapa font khusus untuk aplikasi ini dan setelah itu, kami akan langsung menambahkan beberapa navigasi.