1
00:00:02,410 --> 00:00:07,890
Jadi kembali dalam kode, kita mulai dengan melemparkan beberapa pandangan di sini dan tentu saja sekarang, ini tidak akan berhasil, ini hanya

2
00:00:07,900 --> 00:00:13,930
akan merusak atau tidak akan membuat apa pun yang berarti bagi layar. Dalam tampilan bersarang pertama di sini, di

3
00:00:13,930 --> 00:00:14,920
blok ini,

4
00:00:14,920 --> 00:00:21,330
saya pergi untuk memiliki input teks dan tombol. Mudahnya, keduanya disediakan oleh React Native, kami memiliki input teks

5
00:00:21,330 --> 00:00:27,390
di sini dan kami juga memiliki komponen tombol. Jadi kita dapat mengimpor kedua input teks yang memungkinkan

6
00:00:27,390 --> 00:00:33,510
pengguna untuk memasukkan teks dan tombol dan kemudian di sini dalam tampilan itu, dalam tampilan bersarang pertama, saya

7
00:00:33,510 --> 00:00:40,890
akan menambahkan input teks sebagai tag penutup sendiri karena tidak ada yang bisa kami lewati antara pembukaan dan tag penutup dan untuk

8
00:00:40,890 --> 00:00:42,440
tombol, Anda bisa berpikir

9
00:00:42,450 --> 00:00:47,430
bahwa Anda menggunakan tombol seperti ini tetapi sebenarnya, itu bukan cara tombol Bereaksi Asli

10
00:00:47,430 --> 00:00:47,960
ini,

11
00:00:47,970 --> 00:00:53,620
melainkan tombol penutupan sendiri dan Anda mengatur properti judul untuk menentukan teks mana yang akan di render

12
00:00:53,840 --> 00:01:00,150
di sana dan di sini, kita bisa mengatakan menambahkan. Sekarang kita memiliki input teks dan tombol di

13
00:01:00,360 --> 00:01:08,230
sana dan jika kita menyimpan ini dan ini ulang, kita melihat tombol di sini tetapi kita tidak melihat input teks, kan?

14
00:01:08,490 --> 00:01:11,070
Jadi itu tidak berfungsi sebagaimana dimaksud.

15
00:01:11,070 --> 00:01:16,850
Alasannya sebenarnya karena input teks akan disembunyikan di sini di bawah bilah status.

16
00:01:16,920 --> 00:01:22,740
Jadi sekarang adalah waktu di mana kita harus mulai dengan menambahkan beberapa tata letak, beberapa

17
00:01:22,770 --> 00:01:25,410
struktur ke halaman ini karena hanya

18
00:01:25,410 --> 00:01:30,990
menambahkan komponen saja tidak akan berhasil, aplikasi React Native adalah semua tentang menggunakan komponen

19
00:01:31,080 --> 00:01:40,190
dan kemudian menambahkan tata letak yang tepat, hak struktur ke komponen Anda. Jadi di sini misalnya, akan masuk akal untuk menambahkan beberapa padding umum di sekitar

20
00:01:40,190 --> 00:01:46,310
tampilan itu, jadi pada tampilan atas ini, jadi padding pada dasarnya adalah beberapa jarak dari perbatasan tampilan yang pada

21
00:01:46,760 --> 00:01:48,870
dasarnya adalah bingkai perangkat dalam kasus

22
00:01:48,920 --> 00:01:54,890
kami di sini karena saya berbicara tentang tampilan paling atas ke konten tampilan, sehingga beberapa jarak antara batas

23
00:01:54,980 --> 00:02:00,650
paling atas, dari tampilan di sekitarnya dan konten dalam tampilan dan untuk itu, kita bisa menambahkan properti

24
00:02:00,650 --> 00:02:02,660
gaya di sini pada tampilan.

25
00:02:02,660 --> 00:02:09,530
Sebagian besar komponen dalam React Native mendukung properti style, tampilan tidak dan di sana, Anda menggunakan konten dinamis

26
00:02:10,070 --> 00:02:15,800
yang mengikat di sini yang Anda tahu dari React normal juga dengan kawat gigi keriting

27
00:02:15,800 --> 00:02:21,590
tunggal dan gaya mengharapkan objek Javascript sekarang. Jadi kami menambahkan sepasang kurung kurawal di sini dan

28
00:02:21,590 --> 00:02:25,530
sekarang kesalahan umum adalah bahwa Anda pikir ini adalah sintaks khusus yang

29
00:02:25,670 --> 00:02:31,390
membutuhkan kurung kurawal ganda, memang itu sintaks React normal dengan kurung kurawal yang serupa di mana kemudian

30
00:02:31,400 --> 00:02:34,640
nilai dinamis yang Anda berikan ke gaya kebetulan menjadi objek

31
00:02:34,640 --> 00:02:40,310
Javascript maka kita memiliki sepasang kurung kurawal. Dan di objek ini, Anda sekarang dapat

32
00:02:40,310 --> 00:02:46,610
memiliki pasangan nilai kunci di mana kunci adalah nama properti gaya Anda dan nilai adalah nilai untuk

33
00:02:47,420 --> 00:02:51,740
properti gaya ini dan nama properti gaya ini dipengaruhi oleh CSS.

34
00:02:51,770 --> 00:02:58,250
Jadi di sini, yang dapat Anda lakukan adalah Anda dapat menambahkan padding, yang ada di React Native juga dan

35
00:02:58,250 --> 00:03:04,130
daftar lengkap properti style yang didukung selalu dapat ditemukan dengan masuk ke komponen yang Anda gunakan, seperti

36
00:03:04,130 --> 00:03:10,850
tampilan di sini dan kemudian dengan mengklik pada properti style dan di sini jika Anda mengklik pada style tampilan, Anda

37
00:03:10,850 --> 00:03:17,750
akan melihat daftar semua properti yang disediakan yang dapat Anda gunakan dan Anda akan melihat beberapa properti khusus untuk tampilan di

38
00:03:17,750 --> 00:03:24,410
sini dan kemudian beberapa alat peraga umum seperti alat peraga tata letak dan di sana, Anda akan menemukan padding misalnya.

39
00:03:24,480 --> 00:03:30,640
Jadi begitulah cara Anda mengetahui apa yang didukung tetapi Anda juga akan melihat banyak contoh selama kursus ini.

40
00:03:30,650 --> 00:03:36,080
Jadi di sini, saya menambahkan padding dan nilainya sekarang bisa saja berupa angka yang akan menjadi piksel independen

41
00:03:36,290 --> 00:03:41,300
perangkat, jadi nilai piksel yang selalu terlihat bagus tidak peduli ukuran perangkat yang Anda miliki.

42
00:03:41,330 --> 00:03:46,990
Jadi di sini, kita dapat menambahkan 10 dan jika kita melakukannya, sekarang kita melihat tombolnya sedikit lebih jauh ke

43
00:03:47,050 --> 00:03:51,860
bawah, mungkin mari kita tambahkan 30 di sini sehingga kita dapat melihat perbedaan yang lebih besar

44
00:03:52,090 --> 00:03:56,050
dan sekarang yang berfungsi dan sekarang jika Anda menekan di atas tombol, Anda tidak

45
00:03:56,050 --> 00:04:01,230
benar-benar melihat input di sini tetapi Anda melihat bahwa keyboard lunak saya terbuka di Android, di iOS itu

46
00:04:01,240 --> 00:04:03,790
tidak terbuka secara default tetapi di sana juga Anda

47
00:04:03,970 --> 00:04:11,410
dapat mengetuk di sini dan jika Anda cukup sering mengetuk atau jika Anda pergi ke perangkat keras, keyboard yang beralih perangkat lunak keyboard, itu harus

48
00:04:11,410 --> 00:04:13,780
terbuka di sana juga, jadi di sini

49
00:04:13,780 --> 00:04:15,180
kita juga punya input.

50
00:04:15,190 --> 00:04:19,840
Jadi sekarang kita dapat melihat input itu karena sekarang tidak lagi di belakang bilah status itu.

51
00:04:19,840 --> 00:04:27,040
Jadi menambahkan padding itu mungkin masuk akal karena sekarang, kami memastikan bahwa tata letak kami ada di dalam

52
00:04:27,040 --> 00:04:28,660
layar kami di sini.

53
00:04:28,660 --> 00:04:31,980
Sekarang ada alat lain untuk memastikan kita memiliki cukup bantalan di sini juga,

54
00:04:32,170 --> 00:04:36,460
tetapi untuk sekarang, mari kita secara manual mengatur bantalan dan mari kita mungkin mengaturnya ke nilai 30.

55
00:04:36,880 --> 00:04:39,760
Jadi kita mulai dengan tata letak, sekarang mari

56
00:04:39,760 --> 00:04:43,650
kita kembali ke komponen ini dan mari kita pastikan kita dapat melihat

57
00:04:43,660 --> 00:04:48,120
sesuatu, kita dapat melihat bahwa ada input teks dan kita tidak hanya harus menebaknya.

58
00:04:48,550 --> 00:04:54,070
Untuk ini, kita dapat pergi ke input teks dan di sana misalnya menambahkan prop placeholder dan seperti

59
00:04:54,070 --> 00:04:55,800
sebelumnya untuk mengetahui apa yang

60
00:04:55,810 --> 00:05:02,990
dapat Anda tetapkan, Anda selalu dapat pergi ke dokumen resmi, dalam hal ini ke dokumen input teks dan di sana, Anda menemukan deskripsi

61
00:05:03,000 --> 00:05:04,930
cara menggunakannya dan beberapa contoh, tetapi

62
00:05:05,070 --> 00:05:10,770
jika Anda menggulir ke bawah, Anda juga akan menemukan semua alat peraga yang dapat Anda atur dan di

63
00:05:11,130 --> 00:05:16,410
sana misalnya, Anda mengetahui bahwa Anda dapat mengatur alat penampung, yaitu teks dummy yang ditampilkan sebelum pengguna

64
00:05:16,410 --> 00:05:17,640
memasukkan beberapa teks.

65
00:05:17,640 --> 00:05:23,580
Jadi di sini, itu membutuhkan string dan di sini kita bisa memasukkan tujuan kursus karena Anda harus dapat

66
00:05:23,580 --> 00:05:24,940
menetapkan tujuan kursus

67
00:05:25,040 --> 00:05:28,970
Anda di sini dan jika Anda melakukannya, Anda melihat keduanya di Android

68
00:05:28,980 --> 00:05:31,510
dan di iOS ada teks tujuan kursus ini.

69
00:05:31,510 --> 00:05:33,590
Sekarang tetap, itu bisa menjadi

70
00:05:33,600 --> 00:05:39,180
sedikit lebih baik, bisa menjadi sedikit lebih jelas bahwa ada input teks dan oleh karena

71
00:05:39,210 --> 00:05:40,170
itu di

72
00:05:40,170 --> 00:05:48,170
sini, saya akan menambahkan gaya, gaya inline lain dan di sini saya akan mengatur batas warna bawah hitam, hitam sekarang adalah string, pintasan

73
00:05:48,180 --> 00:05:53,940
warna seperti itu didukung dalam React Native dan daftar komprehensif semua warna yang tersedia terlampir pada

74
00:05:54,870 --> 00:06:01,860
kuliah ini di sini dan saya juga dapat melihat bahwa lebar bawah batas katakanlah 1 dan apa yang dilakukan adalah

75
00:06:01,860 --> 00:06:07,770
harus menetapkan dasar membatasi input ini sehingga sekarang jika kita kembali, kita menggarisbawahi di sini, kita

76
00:06:07,770 --> 00:06:13,710
dapat melihatnya dengan jelas di iOS dan karena masih tidak ada banyak ruang di iOS, biarkan aku

77
00:06:13,710 --> 00:06:17,520
benar-benar meningkatkan ini hingga 50 mungkin, ya itu terlihat lebih baik.

78
00:06:17,540 --> 00:06:22,630
Jadi sekarang kita memiliki batas di bawah input kita dan yang membuatnya jelas bahwa ada input di sini.

79
00:06:22,810 --> 00:06:26,380
Tentu saja Anda tidak dibatasi hanya mengatur perbatasan di bagian bawah,

80
00:06:26,380 --> 00:06:28,640
Anda juga bisa hanya menetapkan batas

81
00:06:28,660 --> 00:06:32,140
umum dengan meninggalkan bagian bawah di sini, warna perbatasan dan lebar

82
00:06:32,530 --> 00:06:36,180
perbatasan dan jika Anda melakukannya, maka ini akan dikelilingi oleh berbatasan.

83
00:06:36,190 --> 00:06:42,250
Sekarang satu catatan penting mengenai nama-nama gaya ini di sini, nama-nama properti gaya, Anda tentu saja melihat

84
00:06:42,250 --> 00:06:49,390
bahwa itu adalah lebar perbatasan, warna batas yang ditulis seperti ini, dalam CSS normal, Anda akan memiliki warna batas dan

85
00:06:49,750 --> 00:06:55,870
yang akan menerapkan warna perbatasan tetapi itu akan menjadi nama properti yang tidak valid di Javascript yang

86
00:06:55,870 --> 00:06:57,670
mengapa ini tidak didukung.

87
00:06:57,670 --> 00:07:03,280
Sekarang sebenarnya, nama properti yang valid dalam Javascript akan menjadi jika Anda membungkus ini dalam tanda

88
00:07:03,520 --> 00:07:10,240
kutip meskipun tetapi bahkan itu tidak didukung dalam Bereaksi Asli, jadi sintaks alternatif ini, misalnya sintaks ini akan berfungsi dalam

89
00:07:10,240 --> 00:07:18,010
Javascript jika Anda menerapkan beberapa gaya ke elemen HTML web , sintaks ini tidak didukung di Bereaksi Asli meskipun, di sana Anda benar-benar

90
00:07:18,010 --> 00:07:23,320
harus menggunakan sintaksis unta ini di mana Anda misalnya menulis warna perbatasan seperti ini atau

91
00:07:23,320 --> 00:07:29,740
singkatnya, Anda harus menggunakan nama properti yang juga Anda temukan di dokumen resmi, di sana tidak ada nama alternatif

92
00:07:29,740 --> 00:07:37,030
untuk properti gaya ini dan kami sekarang juga bisa menambahkan padding di sini katakanlah 10 sehingga kami memiliki beberapa jarak antara perbatasan

93
00:07:37,600 --> 00:07:43,570
dan bagian sebenarnya di mana kita memasukkan sesuatu dan saya akan mengatakan ini sudah terlihat jauh lebih

94
00:07:43,720 --> 00:07:49,540
baik dan kami dapat dengan jelas melihat bahwa kami di sini memiliki input di mana pengguna dapat

95
00:07:49,540 --> 00:07:50,530
memasukkan sesuatu.