1
00:00:02,420 --> 00:00:08,930
Sekarang dengan semua itu dalam modul ini, Anda belajar banyak tentang cara membangun aplikasi nyata dengan React Native.

2
00:00:08,930 --> 00:00:11,780
Anda belajar banyak tentang komponen bawaan, Anda

3
00:00:11,780 --> 00:00:16,370
belajar banyak tentang penataan gaya dan cara menata segala sesuatunya seperti yang

4
00:00:16,370 --> 00:00:17,300
Anda inginkan

5
00:00:17,300 --> 00:00:24,290
dan cara menata benda dengan cara yang Anda inginkan, juga bagaimana penataan berbeda antara beberapa komponen, misalnya bahwa

6
00:00:24,320 --> 00:00:26,320
untuk komponen teks, penataan memang

7
00:00:26,390 --> 00:00:31,970
menurun hingga batas tertentu, sehingga gaya diwarisi dalam gaya bersarang di sana, sesuatu yang

8
00:00:31,970 --> 00:00:39,770
kami manfaatkan dalam permainan di atas layar di sini tetapi pada semua komponen lain seperti tampilan, gaya yang Anda terapkan

9
00:00:39,770 --> 00:00:45,880
padanya benar-benar hanya berlaku untuk pandangan itu dan tidak mengalir, tidak dibagikan dengan pandangan anak bersarang.

10
00:00:45,890 --> 00:00:52,010
Anda juga belajar bagaimana Anda dapat berbagi stylings umum, misalnya dengan komponen khusus, seperti teks tubuh kami

11
00:00:52,010 --> 00:00:58,100
yang menetapkan keluarga font umum sehingga kami dapat menggunakan teks tubuh alih-alih teks bawaan jika kami

12
00:00:58,130 --> 00:01:00,480
ingin teks dengan keluarga font itu.

13
00:01:00,590 --> 00:01:04,190
Tentu saja itu adalah konsep yang dapat Anda gunakan untuk gaya berbagi apa

14
00:01:04,310 --> 00:01:09,980
pun yang Anda inginkan, seperti kami juga melakukannya untuk jenis kartu, di mana kami memiliki pandangan prestyled untuk memberi kami tampilan

15
00:01:10,010 --> 00:01:12,140
kartu yang bagus ini dengan sedikit bayangan.

16
00:01:12,140 --> 00:01:17,450
Anda juga mempelajari cara mengatur beberapa tema dengan konstanta yang dapat Anda impor ke file yang berbeda,

17
00:01:17,870 --> 00:01:23,990
baik untuk warna di sini atau juga jika Anda membutuhkannya, untuk gaya teks atau gaya lain yang ingin Anda bagikan

18
00:01:23,990 --> 00:01:29,630
di seluruh komponen sehingga Anda tidak perlu t harus menulis ulang setiap saat, terutama berguna untuk kasus-kasus di mana

19
00:01:29,630 --> 00:01:33,120
Anda tidak ingin atau di mana Anda tidak dapat membuat komponen terpisah

20
00:01:33,260 --> 00:01:36,070
seperti yang kami lakukan untuk font family misalnya.

21
00:01:36,250 --> 00:01:40,820
Jadi jika itu tidak mungkin, yang mana dalam kasus warna akan sulit

22
00:01:40,820 --> 00:01:47,690
karena kita membutuhkan warna di semua jenis tempat, maka gaya bersama atau konstanta bersama adalah cara yang bagus

23
00:01:47,690 --> 00:01:53,420
dan secara umum, saya harap Anda merasakan bagaimana Anda buat antarmuka pengguna dengan komponen bawaan

24
00:01:53,450 --> 00:01:58,820
dan dengan komponen kustom Anda sendiri yang kemudian membangun komponen bawaan dan bagaimana Anda

25
00:01:58,820 --> 00:02:02,120
dapat membangun aplikasi React Native yang bagus.

26
00:02:02,140 --> 00:02:07,390
Kami telah melihat beberapa komponen inti dan oleh karena itu saya juga ingin memberikan ringkasan singkat mengenai apa yang

27
00:02:07,390 --> 00:02:09,710
Anda pelajari tentang komponen-komponen ini di sini.

28
00:02:09,760 --> 00:02:15,080
Mungkin komponen yang paling penting adalah tampilan, yang merupakan wadah yang Anda bungkus komponen

29
00:02:15,100 --> 00:02:21,180
lain untuk kemudian meletakkan komponen-komponen itu atau menambahkan gaya wadah tertentu, seperti bayangan, batas, warna latar

30
00:02:21,190 --> 00:02:24,760
belakang, hal-hal seperti itu. Yang tak kalah

31
00:02:24,760 --> 00:02:29,870
penting adalah komponen teks yang Anda gunakan untuk menghasilkan teks.

32
00:02:29,950 --> 00:02:36,130
Anda juga dapat menyarang teks ke dalam teks di mana beberapa gaya bahkan dibagikan dan Anda secara umum dapat

33
00:02:36,130 --> 00:02:41,980
mengontrol bagaimana teks harus menjadi output, jika itu harus membungkus dirinya sendiri yang merupakan default atau jika

34
00:02:41,980 --> 00:02:43,070
hanya akan menghasilkan

35
00:02:43,210 --> 00:02:49,450
satu atau dua baris dan di situlah komponen teks benar-benar membantu Anda menampilkan informasi yang berharga kepada pengguna Anda.

36
00:02:49,450 --> 00:02:53,860
Sekarang kadang-kadang Anda tidak hanya ingin menampilkan informasi tetapi juga mengambil informasi dan

37
00:02:53,860 --> 00:02:55,930
untuk ini, input teks dapat membantu.

38
00:02:55,930 --> 00:03:00,760
Sekarang kita akan menyelam lebih dalam untuk mengambil input pengguna nanti dalam kursus, tetapi Anda sudah mendapatkan pandangan pertama tentang bagaimana

39
00:03:00,760 --> 00:03:05,290
Anda bisa mendesainnya dan bagaimana Anda dapat mengkonfigurasinya dan bagaimana Anda dapat memastikan Anda mendapatkan input yang tepat dan Anda

40
00:03:05,320 --> 00:03:11,210
memvalidasi input dan Anda benar-benar hanya bekerja dengan input yang Anda butuhkan. Sekarang berbicara tentang input pengguna, tombol tentu saja

41
00:03:11,210 --> 00:03:14,230
juga merupakan komponen penting, baik itu tombol bawaan

42
00:03:14,330 --> 00:03:19,070
atau tombol Anda sendiri yang dapat Anda bangun dengan komponen yang dapat disentuh yang

43
00:03:19,130 --> 00:03:20,960
juga sangat penting dan dalam

44
00:03:20,960 --> 00:03:26,660
kasus di mana Anda perlu menampilkan daftar data, Anda belajar tentang FlatList dan tentang tampilan gulir di

45
00:03:26,750 --> 00:03:32,270
mana perbedaan utamanya adalah bahwa FlatList dioptimalkan untuk daftar yang sangat panjang atau daftar di mana

46
00:03:32,270 --> 00:03:35,790
Anda tidak benar-benar tahu berapa lama mereka tetapi mereka berpotensi

47
00:03:35,930 --> 00:03:42,470
sangat panjang, sedangkan tampilan gulir sangat bagus untuk setiap konten yang dapat digulir lainnya yang tidak terlalu panjang, di

48
00:03:42,470 --> 00:03:48,410
mana Anda tentu akan melampaui batas layar tetapi itu tidak akan menjadi terlalu banyak konten tambahan karena

49
00:03:48,410 --> 00:03:54,110
jika semua konten tambahan itu dirender tanpa digunakan, tanpa terlihat oleh pengguna, maka Anda membuang-buang kinerja

50
00:03:54,110 --> 00:03:54,860
dan

51
00:03:54,920 --> 00:03:56,710
di situlah FlatList masuk karena

52
00:03:56,780 --> 00:03:59,980
itu hanya membuat apa yang benar-benar dapat dilihat pengguna.

53
00:04:00,020 --> 00:04:05,330
Berbicara tentang apa yang dapat dilihat pengguna, dalam modul ini, Anda juga belajar cara menambahkan font khusus Anda

54
00:04:05,330 --> 00:04:08,770
sendiri dan kadang-kadang Anda tidak memerlukan font selain gambar, Anda juga

55
00:04:08,900 --> 00:04:14,580
belajar cara melakukannya, cara memasukkan lokal atau jaringan gambar dan cara Anda mengatur gaya gambar ini agar terlihat bagus.

56
00:04:14,600 --> 00:04:20,240
Berbicara tentang styling, untuk ini kami menggunakan stylesheet yang bukan komponen tetapi kelas atau

57
00:04:20,240 --> 00:04:22,130
objek yang disediakan oleh

58
00:04:22,130 --> 00:04:28,190
React Native dan keuntungan menggunakan stylesheet ini bukan hanya Anda akan mendapatkan gaya Anda dari kode

59
00:04:28,190 --> 00:04:35,090
jsx yang Anda ingin tetap ramping dan singkat dan ringkas tetapi Anda juga mendapatkan validasi otomatis dari gaya

60
00:04:35,180 --> 00:04:41,110
Anda dan React Native memberi tahu Anda ketika Anda menggunakan gaya secara tidak benar dan di

61
00:04:41,150 --> 00:04:47,860
masa depan, Anda mungkin juga mendapatkan tambahan optimasi kinerja. Dan dengan itu, kami hanya dapat mendorong Anda untuk mengingat

62
00:04:47,860 --> 00:04:48,810
bagian ini,

63
00:04:48,820 --> 00:04:55,540
mungkin menjalaninya untuk kedua kalinya dan menggunakannya sebagai dasar untuk kemajuan kursus Anda selanjutnya di mana kami akan menggunakan semua komponen

64
00:04:55,540 --> 00:05:01,570
yang kami kerjakan ini, di mana kami akan menulis lebih banyak gaya, di mana kami akan membangun antarmuka pengguna

65
00:05:01,570 --> 00:05:07,330
yang lebih kompleks dan di mana Anda benar-benar akan membutuhkan dasar-dasar ini yang Anda pelajari di modul kedua

66
00:05:07,330 --> 00:05:11,080
dan ini untuk kemudian membangun aplikasi React Native yang luar biasa.

67
00:05:11,080 --> 00:05:11,890
Jadi mari kita lanjutkan.