Что такое стилизованные компоненты?

Styled-components позволяет вам писать CSS на вашем JavaScript. В документации к пакету говорится, что он [использует] помеченные литералы шаблонов и возможности CSS для написания кода CSS в компонентах.

Первое преимущество: более чистый и читаемый код

Styled-components упрощает стилизацию компонентов, а также делает ваш код более читабельным!

Использование типичного стиля React Native (StyleSheet):

Хотя стилизация с помощью StyleSheet отлично работает с файлом меньшего размера, она может быстро усложниться, если на странице 20–30 компонентов.

Использование стилизованных компонентов:

Для сравнения мы видим, что использование styled-components делает наш файл App.js намного чище!

Второе преимущество: упрощает изучение React Native

Styled-components делает переход от разработчика React к разработчику React Native значительно более плавным, позволяя вам писать настоящий CSS. Стилизация с помощью StyleSheet заставляет вас беспокоиться о Camel Case и затрудняет отслеживание того, где начинается и заканчивается стилизация компонентов. С другой стороны, styled-components делает разработку в React Native немного похожей на разработку веб-сайтов!

Третье преимущество: соответствует отраслевому стандарту

Такие компании, как Typeform, Coinbase, Vogue и Vimeo, используют стилизованные компоненты для создания своих приложений. Даже если компания, в которой вы работаете, обычно не использует стилизованные компоненты, все равно важно знать, хотите ли вы оставить свои варианты открытыми.

Заключение

Использование стилизованных компонентов упрощает написание чистого кода и используется во многих ведущих компаниях. Это также может помочь разработчикам React влиться в экосистему React Native.

Если вы хотите узнать, как использовать styled-components (что я и призываю вас сделать), первым делом посетите их веб-сайт: https://styled-components.com/. У них есть подробная, легко читаемая документация, что упрощает включение стилизованных компонентов в ваши приложения.

Спасибо за прочтение и хорошего, продуктивного дня!