1 00:00:02,240 --> 00:00:08,750 Jadi itu banyak pengantar React Native dan expo tapi saya merasa penting bahwa Anda memahami apa 2 00:00:08,750 --> 00:00:11,540 yang Anda kerjakan sebelum Anda mulai. 3 00:00:11,540 --> 00:00:18,470 Sekarang dengan itu, sekarang saatnya untuk memulai dan untuk ini, kunjungi pameran. io. Di sana Anda dapat mengklik 4 00:00:18,470 --> 00:00:22,020 memulai dan Anda akan menemukan langkah-langkah awal di sini. 5 00:00:22,190 --> 00:00:24,290 Sekarang Anda tidak benar-benar membutuhkan langkah pertama 6 00:00:24,290 --> 00:00:30,920 itu, kita bisa langsung masuk ke langkah nomor dua yaitu Anda membutuhkan NodeJS. Sekarang Anda perlu NodeJS yang merupakan runtime Javascript yang memungkinkan Anda 7 00:00:30,920 --> 00:00:36,800 misalnya untuk membangun aplikasi sisi server dengan Javascript. Anda tidak perlu itu karena kami akan 8 00:00:36,800 --> 00:00:39,980 menulis kode NodeJS apa pun dalam kursus ini, 9 00:00:39,980 --> 00:00:41,020 ini bukan 10 00:00:41,030 --> 00:00:42,550 kursus Node, jangan 11 00:00:42,590 --> 00:00:50,750 khawatir, Anda tidak perlu tahu NodeJS tetapi ini adalah paket yang memungkinkan kami untuk menjalankan Javascript di mesin kami dan misalnya, 12 00:00:50,750 --> 00:00:54,680 klien expo di belakang layar juga berjalan di Javascript, sama 13 00:00:54,680 --> 00:00:57,410 sekali tidak terkait dengan React Native, itu 14 00:00:57,410 --> 00:01:00,100 hanya agar alat ini berfungsi dengan benar. 15 00:01:00,230 --> 00:01:05,050 Juga untuk perintah ini untuk menginstal alat, npm, itu adalah Node Package 16 00:01:05,150 --> 00:01:08,320 Manager dan itu juga tersedia oleh NodeJS. 17 00:01:08,330 --> 00:01:14,300 Jadi langkah pertama adalah Anda mengunjungi nodejs. org dan di sana, unduh 18 00:01:14,300 --> 00:01:20,300 versi terbaru, dalam kasus saya 12. 6 dari sana untuk memulai dan apa pun versi terbaru 19 00:01:20,300 --> 00:01:22,840 Anda ketika Anda melihatnya, cukup unduh versi itu, 20 00:01:22,880 --> 00:01:28,080 instal, itu memberi Anda installer yang normal, Anda hanya dapat berjalan dengan mengklik semua langkah di sana, tidak 21 00:01:28,100 --> 00:01:29,420 ada yang terlalu mewah. 22 00:01:29,420 --> 00:01:32,220 Ini tersedia untuk MacOS dan Windows dan Linux. 23 00:01:32,270 --> 00:01:38,330 Jadi cukup unduh di sini, telusuri installer dan setelah diinstal, Anda dapat melanjutkan ke langkah ketiga 24 00:01:38,330 --> 00:01:39,760 ini di sini. 25 00:01:39,830 --> 00:01:46,130 Jadi dengan NodeJS terinstal, mari salin perintah itu di sini dan kemudian buka terminal normal Anda atau di 26 00:01:46,130 --> 00:01:49,770 Windows, prompt perintah Anda dan rekatkan perintah itu di sini. 27 00:01:49,790 --> 00:01:54,530 Sekarang di Mac dan Linux, Anda mungkin perlu menambahkan sudo di depan ini, pada 28 00:01:54,530 --> 00:01:57,820 Windows ini tidak diperlukan, untuk mendapatkan izin yang tepat. 29 00:01:57,830 --> 00:01:59,090 Jadi di sini saya 30 00:01:59,120 --> 00:02:03,630 akan memasukkannya, maka Anda mungkin akan diminta kata sandi Anda, cukup masukkan jika 31 00:02:03,740 --> 00:02:09,290 Anda dan sekarang ini akan menginstal CLI pameran yang merupakan alat ini yang membantu kami membuat 32 00:02:09,290 --> 00:02:15,080 dan mengelola proyek Bereaksi Asli dengan bantuan pameran global pada mesin Anda, sehingga Anda dapat menggunakannya dari mana 33 00:02:15,230 --> 00:02:16,280 saja di 34 00:02:16,280 --> 00:02:19,190 mesin Anda, jadi dari mana saja di terminal Anda. 35 00:02:19,280 --> 00:02:21,540 Jadi mari kita tunggu sampai instalasi ini selesai, 36 00:02:21,560 --> 00:02:26,180 Anda dapat mengabaikan peringatan yang mungkin ada di antara Anda dan saya akan kembali setelah 37 00:02:26,180 --> 00:02:27,470 instalasi ini selesai. 38 00:02:27,560 --> 00:02:33,170 Anda juga dapat mengabaikan kesalahan di antara tersebut di sini, selama keseluruhannya tidak macet 39 00:02:33,170 --> 00:02:35,990 karena kesalahan tetapi berakhir dengan pesan seperti 40 00:02:35,990 --> 00:02:38,030 ini pada akhirnya, Anda berhasil. 41 00:02:38,030 --> 00:02:43,760 Jadi dengan ini, kami memasang Expo CLI, langkah selanjutnya adalah membuat proyek kami, jadi langkah nomor empat 42 00:02:43,760 --> 00:02:44,510 di sini. 43 00:02:44,510 --> 00:02:46,280 Kami melakukan ini dengan menjalankan expo 44 00:02:46,340 --> 00:02:52,250 init dan kemudian setiap nama proyek pilihan Anda dan untuk itu, pertama-tama pastikan bahwa Anda menggunakan perintah cd untuk menavigasi ke folder 45 00:02:52,310 --> 00:02:58,890 di sini di mesin Anda di mana Anda ingin membuat proyek itu. Jadi saya melakukannya di sini, saya berada di folder itu 46 00:02:58,890 --> 00:03:04,440 dan sekarang saya dapat menjalankan expo init dan saya akan memberi nama rn-first-app ini karena ini adalah 47 00:03:04,440 --> 00:03:09,870 aplikasi React Native pertama kami di sini. Cukup tekan enter, nama itu tentu saja terserah Anda 48 00:03:09,870 --> 00:03:11,250 yang Anda miliki di 49 00:03:11,250 --> 00:03:16,530 sini dan ini sekarang akan membuat folder baru di tempat Anda menjalankan perintah ini dan mengatur aplikasi 50 00:03:16,800 --> 00:03:18,810 Bereaksi Asli di sana menggunakan expo. 51 00:03:18,900 --> 00:03:22,290 Sekarang Anda mungkin ditanya templat mana yang ingin Anda gunakan dan di 52 00:03:22,350 --> 00:03:25,480 sana Anda dapat pergi dengan templat kosong untuk saat ini. 53 00:03:25,560 --> 00:03:32,700 Pastikan Anda tidak memilih minimal karena itu akan menjadi pengaturan tanpa lingkungan expo dengan semua fitur 54 00:03:32,700 --> 00:03:34,060 kenyamanan, jadi 55 00:03:34,080 --> 00:03:36,570 pasti pergi dengan kosong di sini. 56 00:03:36,570 --> 00:03:42,570 Sekarang selanjutnya, Anda mungkin akan diminta untuk memasukkan nama untuk aplikasi Anda dan saya hanya akan memasukkan rn-first-app di 57 00:03:42,570 --> 00:03:43,050 sini, 58 00:03:43,080 --> 00:03:47,770 itu pada akhirnya nama yang ditampilkan di pengalih tugas aplikasi Anda di layar beranda dan 59 00:03:47,770 --> 00:03:48,540 begitu seterusnya. 60 00:03:48,570 --> 00:03:52,130 Anda dapat meninggalkan siput seperti itu dan cukup tekan enter lagi, sekarang 61 00:03:52,140 --> 00:03:58,650 saya juga Anda menggunakan benang pada mesin saya yang merupakan alternatif untuk npm, Anda mungkin tidak ditanya apakah Anda ingin menggunakan benang 62 00:03:58,650 --> 00:04:00,780 yang benar-benar baik-baik saja, saya akan 63 00:04:00,780 --> 00:04:03,210 juga memilih tidak ada di sini untuk menggunakan 64 00:04:03,390 --> 00:04:08,550 npm dan oleh karena itu sekarang, ini akan melanjutkan, membuat folder proyek ini, menginstal semua dependensi yang 65 00:04:08,550 --> 00:04:14,970 diperlukan di sana seperti Bereaksi dan Bereaksi Asli dan memberi kami proyek Bereaksi Asli yang dapat kita gunakan untuk membangun aplikasi 66 00:04:14,970 --> 00:04:15,330 asli. 67 00:04:15,570 --> 00:04:17,960 Jadi mari kita tunggu ini selesai sekarang. 68 00:04:17,970 --> 00:04:23,610 Sekarang setelah selesai, Anda melihat instruksi selanjutnya di sini. Anda dapat menavigasi ke folder yang baru dibuat 69 00:04:23,610 --> 00:04:31,230 dengan perintah cd dan kemudian di sana, cukup jalankan mulai npm. Mulai NPM sekarang akan memulai alat 70 00:04:31,230 --> 00:04:38,410 pengembangan expo, alat dev pameran dan tab baru akan terbuka di browser Anda. 71 00:04:38,570 --> 00:04:43,420 Inilah tab yang terbuka, jika ada masalah di sini, Anda dapat mengabaikannya untuk 72 00:04:43,550 --> 00:04:49,070 saat ini, ini di sini adalah alat pengembangan expo atau alat pengembangan expo seperti namanya. 73 00:04:49,280 --> 00:04:55,610 Ini adalah jendela yang memungkinkan Anda untuk menjalankan aplikasi pada perangkat yang terhubung berbeda atau menambahkan simulator dan memungkinkan Anda untuk secara 74 00:04:55,760 --> 00:05:00,740 umum mengelola bagian-bagian dari aplikasi Anda, Anda melihat beberapa output dari aplikasi Anda di sini, beberapa peringatan yang 75 00:05:00,740 --> 00:05:02,650 mungkin Anda dapatkan dan ini sangat 76 00:05:02,750 --> 00:05:09,200 nyaman jendela untuk mengelola aplikasi Anda dan untuk menjalankan aplikasi Anda. Sekarang juga pastikan bahwa di sini 77 00:05:09,210 --> 00:05:15,780 di terminal tempat Anda menjalankan start npm, Anda akan membiarkan proses itu berjalan. 78 00:05:15,810 --> 00:05:21,000 Anda mungkin melihat bahwa itu tidak selesai, Anda tidak melihat lagi garis input tempat Anda dapat memasukkan perintah, 79 00:05:21,630 --> 00:05:27,630 sebaliknya di sini, Anda tidak dapat mengetik atau Anda dapat menekan beberapa pintasan yang Anda lihat di sini tetapi Anda tidak bisa 80 00:05:27,630 --> 00:05:28,500 mengetik perintah baru. 81 00:05:28,500 --> 00:05:33,960 Anda selalu dapat keluar dari proses ini dengan menekan kontrol dan c secara bersamaan, tetapi Anda harus membiarkan 82 00:05:33,960 --> 00:05:37,640 proses ini tetap berjalan selama Anda mengerjakan proyek Anda dan jika 83 00:05:37,740 --> 00:05:42,660 Anda selesai pada hari itu, Anda dapat berhenti dan mulai lagi pada hari berikutnya karena proses 84 00:05:42,660 --> 00:05:47,850 ini juga akan melihat kode Anda dan setiap kali Anda mengubah sesuatu dalam kode Anda dan Anda 85 00:05:47,850 --> 00:05:52,530 menyimpan perubahan itu, itu akan secara otomatis menyimpan ini dan menerbitkannya ke perangkat Anda yang terhubung. 86 00:05:52,560 --> 00:05:58,680 Tetapi berbicara tentang itu, mari kita hubungkan perangkat dan untuk itu, cara termudah untuk memulai adalah dengan 87 00:05:58,680 --> 00:06:01,940 menggunakan iPhone atau ponsel Android yang Anda miliki. 88 00:06:01,950 --> 00:06:08,290 Jadi dalam kasus saya, ini adalah iPhone di sini dan di sini telepon saya yang asli dan saya di App Store, sekarang di Jerman karena saya memiliki 89 00:06:08,290 --> 00:06:12,730 telepon Jerman tetapi ini adalah App Store yang normal. Sekarang di sana, Anda 90 00:06:12,730 --> 00:06:19,900 dapat pergi ke area pencarian dan mencari pameran. Sekarang setelah Anda melakukannya, Anda harus menemukan klien pameran itu di sini 91 00:06:20,020 --> 00:06:26,680 dan Anda dapat mengunduhnya ke perangkat Anda, gratis untuk digunakan. Cukup instal ke perangkat Anda dan tunggu instalasi ini selesai 92 00:06:26,680 --> 00:06:28,430 dan setelah ini selesai, 93 00:06:28,450 --> 00:06:30,690 Anda dapat membuka ini dan sekarang 94 00:06:30,700 --> 00:06:37,030 dengan aplikasi expo diinstal, Anda tidak perlu mendaftar di sini, alih-alih di Android Anda harus dapat untuk memindai kode 95 00:06:37,370 --> 00:06:42,880 batang itu langsung dari dalam aplikasi pameran Anda. Di iOS, cukup buka aplikasi kamera dan kemudian 96 00:06:42,880 --> 00:06:49,230 Anda juga dapat pergi ke alat dev di sini dan Anda akan melihat kode batang itu di 97 00:06:49,230 --> 00:06:58,190 sini, cukup pegang kamera Anda di atas itu di iOS atau pemindai aplikasi pameran di sini di Android dan Anda akan diminta apakah Anda 98 00:06:58,190 --> 00:07:03,510 ingin membuka aplikasi dalam pameran itu. Cukup tekan buka di sana dan sekarang 99 00:07:03,800 --> 00:07:07,730 ini akan membuka aplikasi Anda di sini di klien pameran yang Anda 100 00:07:07,760 --> 00:07:14,810 pasang, lagi tanpa mendaftar, hanya dengan memegang kamera iPhone Anda di atas kode batang itu atau di Android dengan melakukannya dari 101 00:07:14,810 --> 00:07:19,350 langsung di dalam aplikasi pameran di mana Anda akan memiliki opsi itu untuk melakukannya. 102 00:07:19,370 --> 00:07:24,050 Jadi sekarang ini akan membangun bundel Javascript seperti yang Anda lihat di sini di bagian bawah 103 00:07:24,050 --> 00:07:30,260 atau dengan kata lain, ini sekarang akan mengambil aplikasi Anda dan mengkompilasinya pada dasarnya dan menyiapkannya lalu memuatnya di sini melalui 104 00:07:30,320 --> 00:07:36,920 server pameran ke dalam aplikasi Anda dan Anda cukup menekan mendapatkannya di sini di layar pertama dan kemudian ini adalah aplikasi React 105 00:07:36,920 --> 00:07:38,130 Native awal Anda. 106 00:07:38,270 --> 00:07:43,220 Dan sekarang mari kita benar-benar melihat kode untuk ini dan melihat bagaimana kita dapat mengubah sesuatu dalam kode untuk melihat sesuatu 107 00:07:43,220 --> 00:07:45,110 yang berbeda di sini di layar ini.