1
00:00:02,230 --> 00:00:06,820
Dan untuk ini, masuk akal untuk memulai di sini di aplikasi. file js.

2
00:00:06,820 --> 00:00:10,370
Sekarang biarkan terminal terbuka di sini dan proses itu berjalan

3
00:00:10,390 --> 00:00:15,280
tentu saja, sehingga perubahan dalam kode Anda secara otomatis tercermin pada emulator dan sekarang mari

4
00:00:15,340 --> 00:00:18,420
kita lihat bagaimana kita bisa memulai dengan itu.

5
00:00:18,460 --> 00:00:23,590
Saya sudah menyebutkan dalam modul kursus pertama bahwa Bereaksi Asli adalah semua tentang komponen

6
00:00:23,590 --> 00:00:28,870
inti bawaan ini seperti teks dan tampilan. Pandangan akan menjadi div Anda dari pengembangan

7
00:00:28,870 --> 00:00:32,920
web jika Anda seorang pengembang web yang mungkin Anda tahu jika Anda Bereaksi.

8
00:00:32,920 --> 00:00:34,790
Jadi ini adalah komponen wadah yang

9
00:00:34,810 --> 00:00:40,050
bagus, Anda dapat menata seperti yang Anda lihat di sini dan Anda dapat membungkus konten lain dengannya.

10
00:00:40,240 --> 00:00:44,930
Sekarang teks di sisi lain adalah komponen inti untuk menghasilkan teks, itu

11
00:00:44,930 --> 00:00:49,870
tujuannya, bukan di sana untuk menghasilkan gambar tetapi di sana untuk menghasilkan teks.

12
00:00:49,870 --> 00:00:55,540
Sekarang apa yang tidak dapat Anda lakukan dalam Bereaksi Asli dan itu yang penting pertama, Anda tidak bisa

13
00:00:55,540 --> 00:00:57,810
misalnya output teks antara tampilan seperti ini.

14
00:00:57,910 --> 00:01:04,120
Jika kami akan mencoba menyimpan ini tanpa pembungkus teks itu, Anda melihat kami mendapatkan kesalahan. Ngomong-ngomong, layar yang akan Anda lihat dari

15
00:01:04,120 --> 00:01:09,880
waktu ke waktu ketika bekerja dengan React Native, itu memberi Anda kesalahan,

16
00:01:09,880 --> 00:01:15,910
itu menjelaskan apa yang salah. Di sini misalnya adalah pesan kesalahan yang cukup jelas yang memberi tahu kami

17
00:01:15,910 --> 00:01:17,800
bahwa string teks harus dirender dalam komponen teks

18
00:01:17,950 --> 00:01:19,330
dan mengapa itu sangat penting?

19
00:01:19,330 --> 00:01:21,100
Mengapa saya menekankan ini?

20
00:01:21,220 --> 00:01:24,590
Karena itulah perbedaan penting untuk pengembangan web, di sana Anda dapat

21
00:01:24,610 --> 00:01:27,850
meletakkan teks di mana saja. Dalam pengembangan web, Anda

22
00:01:27,970 --> 00:01:35,800
dapat memiliki div dan di antara tag pembuka dan penutup div, Anda dapat memiliki teks apa pun dan ini tidak akan berfungsi pada

23
00:01:35,800 --> 00:01:41,500
React Native, bukan hanya karena kami menggunakan div yang tidak didukung di sana tetapi tentu saja karena

24
00:01:41,650 --> 00:01:49,810
pada Bereaksi Asli, Anda benar-benar hanya dapat menampilkan teks di antara tag teks, jadi Anda perlu menggunakan komponen teks yang disediakan oleh Bereaksi Asli

25
00:01:49,810 --> 00:01:56,530
untuk menampilkan teks dan itu adalah perbedaan penting untuk web di mana Anda dapat membuang teks Anda di mana saja

26
00:01:56,530 --> 00:02:02,560
dan dalam Bereaksi Asli, itu cara lebih penting bahwa Anda menggunakan komponen bawaan yang tepat untuk pekerjaan

27
00:02:02,560 --> 00:02:09,070
yang ingin Anda selesaikan dan untuk gaya, untuk menyiapkan wadah tempat Anda menyusun konten yang berbeda, yang akan menjadi

28
00:02:09,070 --> 00:02:15,070
tampilan, untuk menghasilkan teks, yang bisa berupa teks. Untuk menghasilkan gambar misalnya, Anda

29
00:02:15,070 --> 00:02:20,460
akan memiliki komponen gambar. Jadi begitulah React Native bekerja dan berbicara tentang

30
00:02:20,860 --> 00:02:28,180
gaya, tata letak, pandangan menganggap ini sebagai pekerjaan utama, terutama di sana untuk menerapkan gaya dan tata letak konten yang

31
00:02:28,450 --> 00:02:31,070
Anda miliki di sana dan berbicara

32
00:02:31,180 --> 00:02:34,050
tentang itu, mari kita mulai dengan tata letak.

33
00:02:34,360 --> 00:02:39,580
Katakanlah di aplikasi kita, kita ingin memiliki dua area utama di layar ini. Di bagian atas, saya ingin mengizinkan pengguna

34
00:02:39,580 --> 00:02:45,850
untuk memasukkan beberapa teks dan di sebelah kanannya, saya ingin memiliki tombol untuk mengonfirmasi pilihan ini dan

35
00:02:45,850 --> 00:02:46,720
di

36
00:02:46,720 --> 00:02:47,640
bawahnya, jadi

37
00:02:47,650 --> 00:02:53,110
itu bagian pertama, area input dan di bawahnya, kita punya bagian kedua dan itulah daftar

38
00:02:53,110 --> 00:02:54,530
tujuan yang dimasukkan pengguna.

39
00:02:54,550 --> 00:03:00,640
Jadi karena itu di sini di aplikasi. js, kita dapat memulai dengan memiliki tampilan pembungkusan karena

40
00:03:00,640 --> 00:03:06,280
sama seperti dalam React normal, Anda harus memiliki satu komponen induk dan yang biasanya akan menjadi tampilan

41
00:03:06,280 --> 00:03:10,590
di React Native karena itu memberi Anda sebagian besar opsi tata letak dan

42
00:03:10,780 --> 00:03:17,910
gaya dan di dalam tampilan itu, kami dapat memiliki tampilan lain untuk area input di mana kami kemudian menambahkan input kami dan

43
00:03:17,970 --> 00:03:23,860
di bawahnya, pandangan lain untuk memiliki daftar tujuan kami dan saya akan menyingkirkan teks itu dan itu cukup

44
00:03:23,860 --> 00:03:31,350
normal di Bereaksi Asli bahwa Anda memiliki cukup banyak pandangan bersarang satu sama lain, sehingga Anda dapat membangun tata letak yang Anda inginkan.

45
00:03:31,380 --> 00:03:38,150
Sekarang mari kita singkirkan wadah ini di sana dengan cara dan juga tugas gaya ini dan mari kita mulai

46
00:03:38,150 --> 00:03:40,230
dengan semua itu dari awal.

47
00:03:40,250 --> 00:03:46,100
Takeaway penting saat ini adalah setiap komponen yang disediakan oleh React Native memiliki pekerjaan sendiri, tidak ada

48
00:03:46,100 --> 00:03:51,560
banyak komponen tetapi yang ada memiliki peran yang jelas dan Anda kemudian membangun UI Anda dengan

49
00:03:51,560 --> 00:03:56,510
bersarang komponen-komponen ini satu sama lain tergantung pada apa Anda ingin mencapai, misalnya jika

50
00:03:56,510 --> 00:04:01,550
Anda ingin membangun tata letak, Anda mulai dengan membuat beberapa tampilan dan kemudian setelah Anda

51
00:04:01,910 --> 00:04:07,040
berada di bagian di mana Anda ingin menampilkan konten, Anda akan mulai menambahkan teks dan

52
00:04:07,250 --> 00:04:14,960
sebagainya dan kami Akan melakukan semua itu selama kuliah berikutnya. Anda juga dapat selalu pergi ke Bereaksi dokumen asli resmi dan di sana jika Anda mengklik

53
00:04:14,960 --> 00:04:21,740
Panduan, Komponen dan API, Anda akan mendapatkan gambaran umum atas blok bangunan inti ini. Anda akan menemukan tampilan di sini, teks, gambar, input teks

54
00:04:21,740 --> 00:04:27,320
yang sudah saya sebutkan sebelumnya dan beberapa komponen inti lainnya dan Anda akan melihat hampir semua dari

55
00:04:27,350 --> 00:04:32,720
mereka atau sebagian besar dari mereka sepanjang kursus ini dan ini adalah tempat yang bagus untuk menyelam

56
00:04:32,720 --> 00:04:37,370
lebih dalam dan belajar lebih banyak tentang mereka dan karena Anda sudah dapat mengetahui

57
00:04:37,370 --> 00:04:44,360
apakah Anda akan meninggalkan platform spesifik di sana yang lebih terfokus pada niche, maka tidak ada banyak komponen inti, hanya sekitar

58
00:04:44,390 --> 00:04:51,110
10 komponen inti dan itulah cara React Native bekerja. Meskipun demikian, Anda dapat membangun aplikasi apa pun yang Anda

59
00:04:51,110 --> 00:04:53,690
inginkan seperti yang akan Anda lihat.