1
00:00:04,540 --> 00:00:11,110
Gaya inline sangat mudah untuk diterapkan tetapi kelemahannya adalah semakin kompleks aplikasi

2
00:00:11,110 --> 00:00:18,260
Anda dan pengaturan Anda, komponen Anda, semakin sulit untuk mengikuti semua gaya inline ini.

3
00:00:18,370 --> 00:00:24,040
Anda akan memiliki banyak kode di sana, dalam kode JSX Anda dan mungkin sulit untuk membacanya, untuk

4
00:00:24,040 --> 00:00:24,720
memahaminya.

5
00:00:24,870 --> 00:00:27,870
Oleh karena itu, sementara Anda dapat menggunakan gaya

6
00:00:27,940 --> 00:00:32,740
inline, sebenarnya disarankan untuk menggunakan objek stylesheet dan itulah yang sedang dibuat

7
00:00:32,740 --> 00:00:33,820
di sana.

8
00:00:33,820 --> 00:00:39,120
Ini menggunakan stylesheet yang merupakan kelas pada akhirnya yang disediakan oleh React Native

9
00:00:39,130 --> 00:00:46,660
itulah sebabnya kami mengimpornya dari sana dan ini pada akhirnya menciptakan objek Javascript yang berisi semua konfigurasi gaya Anda.

10
00:00:46,660 --> 00:00:51,940
Perbedaannya dengan objek Javascript vanilla yang juga bisa Anda

11
00:00:51,940 --> 00:00:59,590
buat sendiri seperti ini adalah Stylesheet. buat bisa di masa depan juga menerapkan beberapa optimasi kinerja dan menerapkan

12
00:00:59,590 --> 00:01:01,530
gaya Anda lebih efisien pada akhirnya.

13
00:01:01,600 --> 00:01:07,480
Karena itu, Anda harus menggunakannya karena Anda tidak akan kehilangan apa pun kecuali di masa mendatang, Anda

14
00:01:07,540 --> 00:01:12,190
mungkin mendapat manfaat dari optimasi tambahan. Saat ini ketika saya merekam ini, tidak

15
00:01:12,190 --> 00:01:17,800
ada perbedaan, tetapi sekali lagi Anda harus menggunakan Stylesheet. buat karena tidak ada salahnya dan Anda mungkin mendapatkan

16
00:01:17,800 --> 00:01:22,120
optimasi kinerja tambahan di masa mendatang. Keuntungan lain menggunakan stylesheet adalah bahwa ini

17
00:01:22,120 --> 00:01:28,150
akan secara otomatis menambahkan beberapa validasi yang berarti bahwa jika Anda menggunakan properti style yang salah atau nilai yang salah,

18
00:01:28,150 --> 00:01:33,550
React Native akan mendeteksi ini dan akan melempar kesalahan yang hanya memudahkan Anda untuk menemukan kesalahan seperti itu,

19
00:01:33,550 --> 00:01:35,380
jika tidak akan ada validasi,

20
00:01:35,470 --> 00:01:39,370
itu akan gagal diam-diam, itu hanya tidak akan menerapkan gaya dan Anda mungkin

21
00:01:39,370 --> 00:01:45,160
bahkan tidak melihat secara langsung atau Anda akan melihat bahwa penataannya tidak benar tetapi Anda tidak benar-benar melihat mengapa

22
00:01:45,160 --> 00:01:48,070
itu tidak berfungsi, oleh karena itu validasi bawaan ini

23
00:01:48,070 --> 00:01:53,950
adalah keuntungan lain dari menggunakan objek stylesheet di sini. Untuk membuat, Anda melewatkan objek Javascript sebagai argumen,

24
00:01:54,040 --> 00:01:56,680
jadi argumen yang Anda berikan di sini

25
00:01:56,680 --> 00:02:01,450
adalah objek Javascript dan di objek itu, Anda sekarang dapat mendefinisikan gaya Anda

26
00:02:01,450 --> 00:02:07,000
dan Anda tidak melakukan ini dengan menambahkan padding 10 karena akan menjadi tidak jelas di mana

27
00:02:07,000 --> 00:02:08,020
ini harus

28
00:02:08,020 --> 00:02:15,280
diterapkan, alih-alih Anda menggunakan nama properti apa pun pilihan Anda, seperti misalnya layar, untuk mengatur gaya untuk tampilan layar keseluruhan

29
00:02:15,370 --> 00:02:16,810
kami, jadi untuk tingkat

30
00:02:16,810 --> 00:02:21,040
tertinggi ini Anda di sini dan Anda bisa memilih nama yang Anda

31
00:02:21,040 --> 00:02:26,490
inginkan di sini, ini tidak harus layar. Di sini, Anda sekarang memiliki

32
00:02:26,560 --> 00:02:30,610
objek Javascript bersarang, jadi nilai untuk properti ini adalah objek

33
00:02:30,610 --> 00:02:33,800
Javascript lain dan di sana, Anda menyiapkan padding

34
00:02:33,820 --> 00:02:37,630
50 misalnya, jadi gaya yang kami miliki di sana juga.

35
00:02:37,700 --> 00:02:40,510
Sekarang kita dapat menghapus gaya itu di sini, saya

36
00:02:40,520 --> 00:02:45,980
masih memiliki properti gaya tapi saya tidak lagi memiliki objek gaya inline dan sebaliknya di sini, saya

37
00:02:46,010 --> 00:02:52,120
sekarang menunjuk ke gaya yang merupakan konstanta ini yang memegang objek stylesheet kami, saya menunjuk pada gaya dan kemudian dengan

38
00:02:52,150 --> 00:02:58,430
dot, saya menunjuk ke gaya layar dan itulah yang saya maksud, Anda dapat memilih nama yang Anda inginkan di sini,

39
00:02:58,430 --> 00:03:00,090
jika Anda akan menamai

40
00:03:00,170 --> 00:03:06,440
root ini, maka Anda hanya perlu menggunakan root di sana. Jadi Anda dapat menggunakan nama apa pun yang Anda

41
00:03:06,440 --> 00:03:07,160
inginkan, Anda

42
00:03:07,160 --> 00:03:12,550
hanya perlu memastikan bahwa nama yang Anda gunakan di sana memenuhi nama yang Anda gunakan di sini

43
00:03:12,570 --> 00:03:18,540
dan sekarang hanya memberi tahu React Native bahwa tampilan ini harus mendapatkan gaya yang ditentukan untuk layar di sana.

44
00:03:18,650 --> 00:03:20,990
Anda dapat melakukan hal yang sama untuk wadah masukan

45
00:03:20,990 --> 00:03:25,860
kami, katakanlah, sekali lagi nama ini sepenuhnya terserah Anda, wadah masukan. Di sini saya akan

46
00:03:25,880 --> 00:03:28,400
mengambil objek gaya ini saya terapkan

47
00:03:28,400 --> 00:03:37,130
sebagai gaya inline ke tampilan ini sebelumnya dan saya menerapkan ini sebagai nilai saya untuk wadah input ini.

48
00:03:37,130 --> 00:03:42,260
Sekarang di sini pada pandangan itu, kami merujuk gaya. inputContainer, sekarang dengan beberapa pemformatan

49
00:03:42,260 --> 00:03:48,110
otomatis yang Anda dapat lakukan di Visual Studio Code dengan pergi ke preferensi,

50
00:03:49,130 --> 00:03:54,860
pintasan keyboard dan kemudian mencari format dokumen, itulah jalan pintas yang ingin

51
00:03:55,010 --> 00:04:00,780
Anda tekan sehingga autoformats dokumen, file. Dengan itu, kami memiliki beberapa struktur kode bersih di

52
00:04:00,860 --> 00:04:04,710
sini, KAMI melihat ini adalah gaya wadah masukan kami dan kami menerapkannya di sini.

53
00:04:04,730 --> 00:04:10,910
Keuntungan lain dari memiliki objek stylesheet ini juga BAHWA Anda dapat menerapkan gaya yang sama ke

54
00:04:10,910 --> 00:04:12,680
beberapa tampilan tanpa menyalinnya.

55
00:04:12,710 --> 00:04:18,200
Jadi jika kita ingin memiliki gaya wadah masukan, tidak hanya pada tampilan ini tetapi juga

56
00:04:18,350 --> 00:04:25,160
pada wadah ini, kita cukup menulis gaya gaya. inputContainer, Anda dapat menerapkan gaya ini ke komponen sebanyak yang

57
00:04:25,190 --> 00:04:26,290
Anda inginkan.

58
00:04:26,290 --> 00:04:32,460
Sekarang tentu saja, saya tidak membutuhkannya di sini tetapi kita dapat menggunakannya di sini jika kita membutuhkannya. Sekarang gaya terakhir yang ingin saya terapkan adalah

59
00:04:32,460 --> 00:04:35,030
pada input teks di sini.

60
00:04:35,030 --> 00:04:40,970
Di sana, saya hanya akan memberi nama input ini, terlalu banyak kurung kurawal, mengatur gaya saya

61
00:04:41,130 --> 00:04:50,220
di sini kemudian dan kemudian pada input teks, merujuk ke gaya. masukan, seperti

62
00:04:50,430 --> 00:04:55,430
itu. Dan dengan itu jika kita menyimpan ini,

63
00:04:55,560 --> 00:05:01,320
kita memiliki tampilan yang sama seperti sebelumnya, tetapi sekarang kita menggunakan objek stylesheet yang membuat berbagi dan menggunakan kembali

64
00:05:01,320 --> 00:05:05,610
gaya lebih mudah dan yang mungkin juga menghasilkan kita beberapa optimasi kinerja masa

65
00:05:05,610 --> 00:05:10,290
depan dan di samping itu, kode JSX kami di sini hanya jauh lebih ramping sekarang.