Jadi kami telah melihat radium yang merupakan salah satu paket yang membantu kami dalam menata Komponen Bereaksi.
Paket lain yang sangat populer dan perpustakaan pihak ketiga yang dapat Anda gunakan untuk ayah adalah komponen gaya untuk
perpustakaan komponen gaya.
Sekarang apa yang ditata komponen atau apa perpustakaan ini tentang.
Perpustakaan ini tentang semua.
Tebak apa.
Komponen styling dan pembuatan komponen dasbor gaya yang sangat sederhana dot com.
Anda dapat mempelajari semua ini di sini jika Anda mengklik dokumentasi.
Tapi tentu saja saya ingin memperkenalkan Anda ke perpustakaan ini dan menunjukkan kepada Anda dasar-dasar intinya.
Dalam kursus ini sekarang untuk memulai dengan perpustakaan itu dengan pertama-tama harus menginstalnya.
Dan untuk itu kita dapat menjalankan perintah ini di sini.
Jadi cukup salin
ini dan kemudian keluar dari server pengembangan Anda dan jalankan npm install dash dasbor simpan komponen dasbor
gaya dalam proyek reaksi Anda dan ini sekarang akan menginstal paket ini sebagai ketergantungan.
Sementara itu saya sudah akan menyingkirkan impor radium saya di sini dan semua pembungkus radium di sana.
Mereka untuk sementara ini menyimpannya sehingga mereka dapat menyalin dan menempel untuk berhenti nanti tetapi
tidak akan mengaturnya seperti ini segera di guci AB.
Saya juga akan menyingkirkan radium impor ini di sini dan dalam kesepakatan mereka untuk semua juga menyingkirkan pembungkus radium yang
kita miliki di bagian bawah.
Jadi mari kita pastikan kita menyingkirkan semua jejak radium kita di sini sehingga kita tidak menggunakan radium
di mana pun karena kita sekarang akan beralih dan pada dasarnya kita akan menggunakan C sebagai gaya atau
CSX dalam gaya JavaScript dengan bantuan paket ini.
Maka dengan itu terinstal bagaimana paket ini bekerja.
Bagaimana kita bisa menggunakan komponen gaya.
Tentu saja dokumen resmi atau halaman resmi Anda telah membantu Anda mengatasinya juga.
Dan apa yang Anda lihat di sana adalah bahwa dalam impor tahunan satu hal dari paket
komponen yang macet dan kemudian Anda memiliki sintaks aneh di sana dan sekarang ini adalah sesuatu yang mungkin belum pernah Anda lihat sebelumnya.
Ada kembali centang kembali centang di sini setelah beberapa kode kami.
Ini adalah javascript biasa meskipun ini fitur yang disebut temped templates dan melampirkan Anda menemukan tautan di mana Anda dapat mempelajari
lebih lanjut tentang itu.
Ini tidak ada hubungannya dengan reaksi yang merupakan cara label di javascript vanilla juga.
Dan pada akhirnya apa ini di sini adalah pemanggilan fungsi jadi tombol di sini adalah fungsi atau metode
pada objek yang macet agar lebih akurat dan alih-alih memiliki tanda kurung dengan argumen fungsi seperti yang
biasa Anda lakukan, Anda harus kembali mengambil antara di mana Anda dapat mengirim teks dan kemudian teks ini adalah
dan diteruskan ke metode spot dengan cara khusus yang tidak perlu kami perhatikan di mana Anda dapat mempelajari lebih banyak
dari pada tautan terlampir ini.
Kami hanya perlu mencatat bahwa ini akan diteruskan ke metode ini, tetapi metode di sini sedemikian rupa
sehingga metode ini menggunakan apa pun yang Anda berikan teks ini sebagai gaya untuk tombol sumur ini yang metode ini buat
kembali perlu secara umum dapat digunakan dalam javascript untuk membuat yang disebut templat literal.
Jadi bahkan tanpa ayah kombinasi metode dengan back take Anda tidak dapat membuat string dalam javascript hanya dengan back
take dan melampirkan Anda semua untuk menemukan tautan yang memperkenalkan Anda ke template liberal jika Anda
tidak menyadarinya itu adalah pekerjaan biasa Fitur yang baik tidak ada hubungannya dengan reaksi tetapi ini menjadi lebih
bersih jika kita menggunakannya.
Jadi mari kita kembali ke proyek kita dan kita ingin gaya dev di sini dalam contoh orang yang benar.
Jadi untuk melakukan itu, mari pertama-tama impor yang ditata dari komponen dasbor yang ditata.
Dan kemudian di sini daripada menggunakan div seperti tahun ini, mari kita komentari ini dan mari
kita kembalikan dot style.
Objek gaya ini yang kami impor dari komponen gaya pada dasarnya memiliki metode untuk setiap elemen H2
pria.
Anda bisa membuatnya.
Jadi Anda memiliki div di sini Anda memiliki tombol di sini Anda memiliki tag jangkar Anda memiliki paragraf Anda
memiliki zona akhir tag h1 memiliki semua elemen Tim H ini cara ganda di sini sebagai metode.
Dan di sini kita ingin membuat kematian.
Jadi kita menggunakan kematian sekarang seperti yang Anda lihat di dokumen resmi maka kami menggunakan div sintaks aneh ini pada akhirnya sebagai
fungsi tetapi kami tidak menyebutnya seperti itu.
Sebaliknya, kami menggunakan pendekatan templat kebijaksanaan ini dan menambahkan untuk mengambil kembali setelahnya.
Jadi, apakah kita memiliki style div seperti ini.
Sekarang pertanyaan yang jelas adalah apa yang terjadi di antara kedua kutu belakang ini di sini, meskipun di antara kedua punggung
ini pergi gaya Anda.
Jadi di sini kita benar-benar dapat pergi ke orang C sebagai mengomentari file ini sementara kembali dan kemudian menyalin seluruh
gaya ini dan kemudian berkomentar habis-habisan jika kita ingin benar-benar menghapus atau berkomentar orang C menilai
impor di sini dan sekarang di antara kedua kutu kembali kita menambahkan gaya kita namun tanpa
pemilih orang, bukan hanya properti gaya seperti ini sehingga kita hanya mengatakan div ini harus memiliki gaya ini sekarang kita semua dapat menambahkan
permintaan media di sini lagi tanpa pemilih ini meskipun hanya dengan properti yang ingin kita terapkan dan paket komponen gaya di belakang layar
kami akan memastikan bahwa gaya ini termasuk permintaan media berakhir pada def ini yang dibuat
di sini sekarang pada saat kami memiliki kode yang tidak valid meskipun kami memiliki
beberapa kode lain di sana yang harus pergi antara dua div kami pajak tag pembuka dan penutup
div.
Jadi sebenarnya solusinya di sini adalah atau salah satu solusinya adalah mengambil kaktus ini dan membuat komponen baru di sini.
Jadi di sini kita dapat membuat komponen gaya div baru mungkin dan di sana kita
buat ditata mati dengan salinan sintaks tag templat ini di semua kode CSX di sini tanpa penyeleksi.
Seperti yang disebutkan
dan kami akan baik-baik saja.
Sekarang penting di sini.
Saya mulai dengan karakter huruf besar karena saya berencana menggunakan komponen ini tepat di file
ini di sini.
Saya sekarang menggunakan kios kios sebagai komponen reaksi reguler karena itu sangat penting.
Setiap metode yang disediakan oleh objek gaya ini tidak peduli apakah itu div usia 1 atau apa pun itu mengembalikan
komponen reaksi.
Jadi di sini kita tidak membuat komponen reaksi di mana kita mendapatkan alat peraga dan mengembalikan J adalah x.
Tidak karena ini sudah mengembalikan komponen REACT kami sehingga ini sudah berbasis fungsional atau kelas.
Kami tidak tahu komponen.
Jadi alih-alih membuat fungsi di sini komponen fungsional, kami hanya menyimpan hasil pemanggilan metode
ini dalam gaya kami.
Mereka konstan di sini karena ini sudah merupakan komponen reaksi yang valid yang disediakan oleh perpustakaan pihak ketiga itu dan dengan
Ayah kita dapat memulai kembali server pengembangan kita di sini sehingga kita dapat melihat ini dalam tindakan.
Pastikan Anda menggunakan React versi terbaru untuk ini.
Dalam kasus saya, saya menggunakan reaksi
16 titik 10 dan kemudian Anda harus dapat mengklik beralih orang dan benar-benar melihat apa yang Anda lihat sebelumnya dan
hanya untuk membuktikan bahwa ini berfungsi jika saya menghapus kueri media yang Anda lihat sekarang saya memiliki kotak yang lebih besar ini
di sini, di layar yang lebih besar selalu 60 persen dari layar saya dengan jika saya ditambahkan dan menyimpan dan beralih Anda lihat sekarang
lebar ini diterapkan.
Jadi sekarang komponen gaya Library sedang melakukan tugasnya dan menata komponen-komponen ini dan karena itu sekali lagi kami memiliki
campuran yang bagus dari CSX dan JavaScript semua dalam satu file dengan bantuan komponen yang terhenti ini.