React komponentlarini uslublash usullari

React komponentlarini uslublashning juda ko'p turli usullari mavjud. Bu yerda biz ularning ba'zi asosilarini ko'rib chiqamiz.

Qo'llashimiz mumkin bo'lgan standart yondashuv, oddiy veb-sahifalarni uslublashda bo'lgani kabi - bu global CSS dan foydalanish. Bu yerda biz stilalar bilan bitta tashqi umumiy CSS faylini yaratamiz. Bunday yondashuvda, barcha klass nomlari global ko'rinish sohasida joylashgan bo'lib, ular o'rtasida nizolar kelib chiqishiga olib kelishi mumkin. Shuningdek, ko'plab kichik CSS fayllarini yaratish mumkin. Bu yondashuv katta masshtablanadigan ilovalarni yaratishda uncha samarali emas.

Keyingi yondashuv - inline uslublash, undan foydalangan holda, biz CSS stillarini inline qo'shishimiz mumkin, xuddi oddiy HTML da qilinadiganiga o'xshab. Bu holatda biz style atributi bilan ishlaymiz, unga kerakli CSS xususiyatlarini topshiramiz. Bunday uslublashdan foydalanish yomon odat hisoblanadi va faqat dinamik hisoblanadigan, renderlash paytida aniqlanadigan stillarni qo'shish uchun tavsiya etiladi. Bu usul alohida komponent interfeysini tez prototiplash uchun yaxshi.

Ko'rib chiqadigan keyingi bir necha usul - zamonaviy, ommalashib borayotgan, samarali uslublash usullari. Aynan shu usullar katta masshtablanadigan React ilovalarini uslublash uchun qo'llash tavsiya etiladi.

Ulardan birinchisi - Styled Components kutubxonasini qo'llash, bu uslublash uchun shabli satrlardan foydalanadi. Bu usul bizga oddiy CSS ni JS kodida yozish imkonini beradi, uning butun funksionalligidan foydalangan holda.

Ikkinchi usul - CSS modullarini qo'llash. Bu holatda, CSS moduli - bu shunday CSS fayli bo'lib, unda standart bo'yicha barcha klass va animatsiya nomlari lokal ko'rinish sohasida joylashgan, ya'ni ular faqat foydalanayotgan komponent doirasida mavjud.

Bu so'nggi ikkita usulda biz klass nomlari o'rtasidagi nizolardan qo'rqishimiz shart emas, chunki ular noyob - lokal ko'rinish sohasi kontseptsiyasi qo'llaniladi. Shuningdek, ulardan foydalanganda BEM metodologiyasiga bo'lgan ehtiyoj ham yo'qoladi.

Keyingi darslarda biz barcha keltirilgan usullarni batafsilroq ko'rib chiqamiz.