1
00:00:02,180 --> 00:00:09,320
Jadi kami telah melihat radium yang merupakan salah satu paket yang membantu kami dalam menata Komponen Bereaksi.

2
00:00:09,330 --> 00:00:17,270
Paket lain yang sangat populer dan perpustakaan pihak ketiga yang dapat Anda gunakan untuk ayah adalah komponen gaya untuk

3
00:00:17,270 --> 00:00:18,840
perpustakaan komponen gaya.

4
00:00:18,860 --> 00:00:23,150
Sekarang apa yang ditata komponen atau apa perpustakaan ini tentang.

5
00:00:23,150 --> 00:00:24,800
Perpustakaan ini tentang semua.

6
00:00:24,830 --> 00:00:25,490
Tebak apa.

7
00:00:25,520 --> 00:00:31,730
Komponen styling dan pembuatan komponen dasbor gaya yang sangat sederhana dot com.

8
00:00:31,730 --> 00:00:34,880
Anda dapat mempelajari semua ini di sini jika Anda mengklik dokumentasi.

9
00:00:35,000 --> 00:00:40,640
Tapi tentu saja saya ingin memperkenalkan Anda ke perpustakaan ini dan menunjukkan kepada Anda dasar-dasar intinya.

10
00:00:40,790 --> 00:00:45,980
Dalam kursus ini sekarang untuk memulai dengan perpustakaan itu dengan pertama-tama harus menginstalnya.

11
00:00:46,430 --> 00:00:49,410
Dan untuk itu kita dapat menjalankan perintah ini di sini.

12
00:00:49,490 --> 00:00:50,990
Jadi cukup salin

13
00:00:53,930 --> 00:01:00,470
ini dan kemudian keluar dari server pengembangan Anda dan jalankan npm install dash dasbor simpan komponen dasbor

14
00:01:00,860 --> 00:01:06,590
gaya dalam proyek reaksi Anda dan ini sekarang akan menginstal paket ini sebagai ketergantungan.

15
00:01:06,650 --> 00:01:14,120
Sementara itu saya sudah akan menyingkirkan impor radium saya di sini dan semua pembungkus radium di sana.

16
00:01:14,180 --> 00:01:20,030
Mereka untuk sementara ini menyimpannya sehingga mereka dapat menyalin dan menempel untuk berhenti nanti tetapi

17
00:01:20,330 --> 00:01:24,080
tidak akan mengaturnya seperti ini segera di guci AB.

18
00:01:24,080 --> 00:01:32,120
Saya juga akan menyingkirkan radium impor ini di sini dan dalam kesepakatan mereka untuk semua juga menyingkirkan pembungkus radium yang

19
00:01:32,240 --> 00:01:34,490
kita miliki di bagian bawah.

20
00:01:34,700 --> 00:01:41,330
Jadi mari kita pastikan kita menyingkirkan semua jejak radium kita di sini sehingga kita tidak menggunakan radium

21
00:01:41,570 --> 00:01:48,710
di mana pun karena kita sekarang akan beralih dan pada dasarnya kita akan menggunakan C sebagai gaya atau

22
00:01:48,710 --> 00:01:52,310
CSX dalam gaya JavaScript dengan bantuan paket ini.

23
00:01:52,310 --> 00:01:56,290
Maka dengan itu terinstal bagaimana paket ini bekerja.

24
00:01:56,330 --> 00:01:59,990
Bagaimana kita bisa menggunakan komponen gaya.

25
00:02:00,050 --> 00:02:04,780
Tentu saja dokumen resmi atau halaman resmi Anda telah membantu Anda mengatasinya juga.

26
00:02:04,940 --> 00:02:10,100
Dan apa yang Anda lihat di sana adalah bahwa dalam impor tahunan satu hal dari paket

27
00:02:10,130 --> 00:02:17,250
komponen yang macet dan kemudian Anda memiliki sintaks aneh di sana dan sekarang ini adalah sesuatu yang mungkin belum pernah Anda lihat sebelumnya.

28
00:02:17,260 --> 00:02:22,100
Ada kembali centang kembali centang di sini setelah beberapa kode kami.

29
00:02:22,250 --> 00:02:28,640
Ini adalah javascript biasa meskipun ini fitur yang disebut temped templates dan melampirkan Anda menemukan tautan di mana Anda dapat mempelajari

30
00:02:28,640 --> 00:02:29,950
lebih lanjut tentang itu.

31
00:02:29,960 --> 00:02:34,490
Ini tidak ada hubungannya dengan reaksi yang merupakan cara label di javascript vanilla juga.

32
00:02:34,490 --> 00:02:41,210
Dan pada akhirnya apa ini di sini adalah pemanggilan fungsi jadi tombol di sini adalah fungsi atau metode

33
00:02:41,210 --> 00:02:47,840
pada objek yang macet agar lebih akurat dan alih-alih memiliki tanda kurung dengan argumen fungsi seperti yang

34
00:02:47,840 --> 00:02:55,010
biasa Anda lakukan, Anda harus kembali mengambil antara di mana Anda dapat mengirim teks dan kemudian teks ini adalah

35
00:02:55,010 --> 00:03:02,390
dan diteruskan ke metode spot dengan cara khusus yang tidak perlu kami perhatikan di mana Anda dapat mempelajari lebih banyak

36
00:03:02,390 --> 00:03:04,370
dari pada tautan terlampir ini.

37
00:03:04,370 --> 00:03:10,130
Kami hanya perlu mencatat bahwa ini akan diteruskan ke metode ini, tetapi metode di sini sedemikian rupa

38
00:03:10,130 --> 00:03:17,360
sehingga metode ini menggunakan apa pun yang Anda berikan teks ini sebagai gaya untuk tombol sumur ini yang metode ini buat

39
00:03:17,360 --> 00:03:22,510
kembali perlu secara umum dapat digunakan dalam javascript untuk membuat yang disebut templat literal.

40
00:03:22,640 --> 00:03:28,850
Jadi bahkan tanpa ayah kombinasi metode dengan back take Anda tidak dapat membuat string dalam javascript hanya dengan back

41
00:03:28,850 --> 00:03:34,370
take dan melampirkan Anda semua untuk menemukan tautan yang memperkenalkan Anda ke template liberal jika Anda

42
00:03:34,370 --> 00:03:40,310
tidak menyadarinya itu adalah pekerjaan biasa Fitur yang baik tidak ada hubungannya dengan reaksi tetapi ini menjadi lebih

43
00:03:40,310 --> 00:03:41,800
bersih jika kita menggunakannya.

44
00:03:41,940 --> 00:03:48,740
Jadi mari kita kembali ke proyek kita dan kita ingin gaya dev di sini dalam contoh orang yang benar.

45
00:03:48,740 --> 00:03:57,440
Jadi untuk melakukan itu, mari pertama-tama impor yang ditata dari komponen dasbor yang ditata.

46
00:03:57,770 --> 00:04:06,570
Dan kemudian di sini daripada menggunakan div seperti tahun ini, mari kita komentari ini dan mari

47
00:04:06,660 --> 00:04:09,300
kita kembalikan dot style.

48
00:04:09,510 --> 00:04:16,600
Objek gaya ini yang kami impor dari komponen gaya pada dasarnya memiliki metode untuk setiap elemen H2

49
00:04:16,620 --> 00:04:17,430
pria.

50
00:04:17,430 --> 00:04:18,510
Anda bisa membuatnya.

51
00:04:18,600 --> 00:04:24,750
Jadi Anda memiliki div di sini Anda memiliki tombol di sini Anda memiliki tag jangkar Anda memiliki paragraf Anda

52
00:04:24,750 --> 00:04:30,540
memiliki zona akhir tag h1 memiliki semua elemen Tim H ini cara ganda di sini sebagai metode.

53
00:04:30,540 --> 00:04:32,820
Dan di sini kita ingin membuat kematian.

54
00:04:32,840 --> 00:04:39,780
Jadi kita menggunakan kematian sekarang seperti yang Anda lihat di dokumen resmi maka kami menggunakan div sintaks aneh ini pada akhirnya sebagai

55
00:04:39,780 --> 00:04:42,200
fungsi tetapi kami tidak menyebutnya seperti itu.

56
00:04:42,210 --> 00:04:46,890
Sebaliknya, kami menggunakan pendekatan templat kebijaksanaan ini dan menambahkan untuk mengambil kembali setelahnya.

57
00:04:46,950 --> 00:04:49,820
Jadi, apakah kita memiliki style div seperti ini.

58
00:04:50,040 --> 00:04:59,040
Sekarang pertanyaan yang jelas adalah apa yang terjadi di antara kedua kutu belakang ini di sini, meskipun di antara kedua punggung

59
00:04:59,640 --> 00:05:01,480
ini pergi gaya Anda.

60
00:05:01,500 --> 00:05:09,660
Jadi di sini kita benar-benar dapat pergi ke orang C sebagai mengomentari file ini sementara kembali dan kemudian menyalin seluruh

61
00:05:09,660 --> 00:05:16,410
gaya ini dan kemudian berkomentar habis-habisan jika kita ingin benar-benar menghapus atau berkomentar orang C menilai

62
00:05:16,410 --> 00:05:23,160
impor di sini dan sekarang di antara kedua kutu kembali kita menambahkan gaya kita namun tanpa

63
00:05:23,160 --> 00:05:32,460
pemilih orang, bukan hanya properti gaya seperti ini sehingga kita hanya mengatakan div ini harus memiliki gaya ini sekarang kita semua dapat menambahkan

64
00:05:32,520 --> 00:05:41,760
permintaan media di sini lagi tanpa pemilih ini meskipun hanya dengan properti yang ingin kita terapkan dan paket komponen gaya di belakang layar

65
00:05:41,850 --> 00:05:48,420
kami akan memastikan bahwa gaya ini termasuk permintaan media berakhir pada def ini yang dibuat

66
00:05:48,420 --> 00:05:54,270
di sini sekarang pada saat kami memiliki kode yang tidak valid meskipun kami memiliki

67
00:05:54,270 --> 00:06:01,230
beberapa kode lain di sana yang harus pergi antara dua div kami pajak tag pembuka dan penutup

68
00:06:01,230 --> 00:06:02,060
div.

69
00:06:02,550 --> 00:06:09,840
Jadi sebenarnya solusinya di sini adalah atau salah satu solusinya adalah mengambil kaktus ini dan membuat komponen baru di sini.

70
00:06:09,840 --> 00:06:17,460
Jadi di sini kita dapat membuat komponen gaya div baru mungkin dan di sana kita

71
00:06:17,460 --> 00:06:25,970
buat ditata mati dengan salinan sintaks tag templat ini di semua kode CSX di sini tanpa penyeleksi.

72
00:06:25,970 --> 00:06:26,840
Seperti yang disebutkan

73
00:06:31,000 --> 00:06:32,420
dan kami akan baik-baik saja.

74
00:06:32,560 --> 00:06:33,510
Sekarang penting di sini.

75
00:06:33,550 --> 00:06:38,320
Saya mulai dengan karakter huruf besar karena saya berencana menggunakan komponen ini tepat di file

76
00:06:38,440 --> 00:06:39,440
ini di sini.

77
00:06:39,460 --> 00:06:45,600
Saya sekarang menggunakan kios kios sebagai komponen reaksi reguler karena itu sangat penting.

78
00:06:45,700 --> 00:06:53,290
Setiap metode yang disediakan oleh objek gaya ini tidak peduli apakah itu div usia 1 atau apa pun itu mengembalikan

79
00:06:53,290 --> 00:06:54,430
komponen reaksi.

80
00:06:54,730 --> 00:06:59,670
Jadi di sini kita tidak membuat komponen reaksi di mana kita mendapatkan alat peraga dan mengembalikan J adalah x.

81
00:06:59,680 --> 00:07:06,330
Tidak karena ini sudah mengembalikan komponen REACT kami sehingga ini sudah berbasis fungsional atau kelas.

82
00:07:06,340 --> 00:07:08,200
Kami tidak tahu komponen.

83
00:07:08,200 --> 00:07:13,810
Jadi alih-alih membuat fungsi di sini komponen fungsional, kami hanya menyimpan hasil pemanggilan metode

84
00:07:13,810 --> 00:07:15,630
ini dalam gaya kami.

85
00:07:15,640 --> 00:07:22,620
Mereka konstan di sini karena ini sudah merupakan komponen reaksi yang valid yang disediakan oleh perpustakaan pihak ketiga itu dan dengan

86
00:07:23,170 --> 00:07:29,380
Ayah kita dapat memulai kembali server pengembangan kita di sini sehingga kita dapat melihat ini dalam tindakan.

87
00:07:29,380 --> 00:07:32,350
Pastikan Anda menggunakan React versi terbaru untuk ini.

88
00:07:32,350 --> 00:07:34,720
Dalam kasus saya, saya menggunakan reaksi

89
00:07:37,400 --> 00:07:44,350
16 titik 10 dan kemudian Anda harus dapat mengklik beralih orang dan benar-benar melihat apa yang Anda lihat sebelumnya dan

90
00:07:44,350 --> 00:07:52,080
hanya untuk membuktikan bahwa ini berfungsi jika saya menghapus kueri media yang Anda lihat sekarang saya memiliki kotak yang lebih besar ini

91
00:07:52,080 --> 00:08:00,260
di sini, di layar yang lebih besar selalu 60 persen dari layar saya dengan jika saya ditambahkan dan menyimpan dan beralih Anda lihat sekarang

92
00:08:00,260 --> 00:08:01,500
lebar ini diterapkan.

93
00:08:01,550 --> 00:08:07,820
Jadi sekarang komponen gaya Library sedang melakukan tugasnya dan menata komponen-komponen ini dan karena itu sekali lagi kami memiliki

94
00:08:07,850 --> 00:08:14,000
campuran yang bagus dari CSX dan JavaScript semua dalam satu file dengan bantuan komponen yang terhenti ini.