Tailwind Kullanarak Yeniden Kullanılabilir React Bileşenleri Oluşturma

Bu yazıda, diğer bileşenlere güzel bir arayüz sunarken, Tailwind'i başlık altında kullanan yeniden kullanılabilir React bileşenleri oluşturmanın birkaç farklı yoluna bakacağız. Bu, uzun sınıf adları listelerinden okunması ve bakımı daha kolay olan anlamsal desteklere geçerek kodunuzu geliştirecektir.

Bu gönderiyi iyi anlamak için React ile çalışmış olmanız gerekir.

Tailwind, geliştiricilerin özel tasarımlar oluşturmasına yardımcı olmak için düşük seviyeli yardımcı sınıflar sağlayan çok popüler bir CSS çerçevesidir. Son birkaç yılda popülaritesi arttı çünkü iki sorunu gerçekten iyi çözüyor:

1. Tailwind, eşleşen CSS seçicilerini bulmak için stil sayfalarını incelemeden HTML'de yinelemeli değişiklikler yapmayı kolaylaştırır.
2. Tailwind'in aklı başında kuralları ve varsayılanları vardır. Bu, insanların CSS'yi sıfırdan yazmadan başlamasını kolaylaştırır.

Kapsamlı belgeleri ekleyin ve Tailwind'in neden bu kadar popüler olduğu şaşırtıcı değil.

Bu yöntemler, şuna benzeyen kodu dönüştürmenize yardımcı olacaktır:

 <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Enable </button>

Şuna benzeyen kodlamak için:

 <Button size="sm" textColor="white" bgColor="blue-500"> Enable </Button>

Her iki snippet arasındaki fark, ilkinde standart bir HTML düğme etiketini kullanırken ikincisinde bir <Button> bileşenini kullanmamızdır. <Button> bileşeni yeniden kullanılabilirlik için oluşturulmuştur ve daha iyi anlambilime sahip olduğundan okunması daha kolaydır. Uzun bir sınıf adları listesi yerine, size , textColor ve bgColor gibi çeşitli öznitelikleri ayarlamak için özellikleri kullanır.

Başlayalım.

Yöntem 1: Sınıf Adları Modülü ile Sınıfları Kontrol Etme

Tailwind'i bir React uygulamasına uyarlamanın basit bir yolu, sınıf adlarını benimsemek ve bunları programlı olarak değiştirmektir.

Sınıf adları npm modülü, React'te sınıflar arasında geçiş yapmayı kolaylaştırır. Bunu nasıl kullanabileceğinizi göstermek için, React uygulamanızda <Button> bileşenlerinin bulunduğu bir kullanım örneğini ele alalım.

 // This could be hard to read. <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Enable</button> // This is more conventional React. <Button size="sm" textColor="white" bgColor="blue-500">Enable</Button>

Bu <Button> bileşenini kullanan kişilerin size , textColor ve bgColor gibi React props'larını kullanabilmeleri için Tailwind sınıflarını nasıl ayıracağımızı görelim.

1. bgColor ve textColor gibi sahne öğelerini doğrudan sınıf adı dizesi şablonuna iletin.
2. Sınıf adlarını programlı olarak değiştirmek için nesneleri kullanın ( size prop ile yaptığımız gibi)

Aşağıdaki örnek kodda, her iki yaklaşıma da bakacağız.

 // Button.jsx import classnames from 'classnames'; function Button ({size, bgColor, textColor, children}) { return ( <button className={classnames("bg-${bgColor} text-${textColor} font-bold py-2 px-4 rounded", { "text-xs": size === 'sm' "text-xl": size === 'lg', })}> {children} </button> ) }; export default Button;

Yukarıdaki kodda, aşağıdaki aksesuarları alan bir Button bileşeni tanımlıyoruz:

• size
  Düğmenin boyutunu tanımlar ve Tailwind sınıfları text-xs veya text-xl uygular
• bgColor
  Düğmenin arka plan rengini tanımlar ve Tailwind bg-* sınıflarını uygular.
• textColor
  Düğmenin metin rengini tanımlar ve Tailwind text-* classes uygular.
• children
  Herhangi bir alt bileşen buradan geçirilecektir. Genellikle <Button> içindeki metni içerecektir.

Button.jsx tanımlayarak, onu içeri aktarabilir ve sınıf adları yerine React props kullanabiliriz. Bu, kodumuzun okunmasını ve yeniden kullanılmasını kolaylaştırır.

 import Button from './Button'; <Button size="sm" textColor="white" bgColor="blue-500">Enable</Button>

Etkileşimli Bileşenler İçin Sınıf Adlarını Kullanma

Bir Düğme çok basit bir kullanım durumudur. Peki ya daha karmaşık bir şey? Peki, etkileşimli bileşenler yapmak için bunu daha da ileri götürebilirsiniz.

Örneğin, Tailwind kullanılarak yapılmış bir açılır listeye bakalım.

Tailwind ve sınıf adı geçişi kullanılarak oluşturulmuş etkileşimli bir açılır menü.

Bu örnek için, Tailwind CSS sınıf adlarını kullanarak HTML bileşenini oluşturduk ancak şuna benzeyen bir React bileşenini ortaya çıkardık:

 <Dropdown options={\["Edit", "Duplicate", "Archive", "Move", "Delete"\]} onOptionSelect={(option) => { console.log("Selected Option", option)} } />

Yukarıdaki koda baktığınızda, Tailwind sınıfımız olmadığını fark edeceksiniz. Hepsi <Dropdown/> uygulama kodunun içinde gizlidir. Bu Dropdown Bileşenin kullanıcısı, bir option tıklandığında onOptionSelect bir options listesi ve bir tıklama işleyicisi sağlamalıdır.

Şimdi bu bileşenin Tailwind kullanılarak nasıl oluşturulabileceğini görelim.

Bazı alakasız kodların kaldırılması, işte mantığın püf noktası. Tam bir örnek için bu Codepen'i görüntüleyebilirsiniz.

 import classNames from 'classnames'; function Dropdown({ options, onOptionSelect }) { // Keep track of whether the dropdown is open or not. const [isActive, setActive] = useState(false); const buttonClasses = `inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-blue-500 active:text-gray-200 transition ease-in-out duration-150`; return ( // Toggle the dropdown if the button is clicked <button onClick={() => setActive(!isActive)} className={buttonClasses}> Options </button> // Use the classnames module to toggle the Tailwind .block and .hidden classes <div class={classNames("origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg", { block: isActive, hidden: !isActive })}> // List items are rendered here. {options.map((option) => <div key={option} onClick={(e) => onOptionSelect(option)}>{option}</div>)} </div> ) } export default Dropdown;

Açılır menü, .hidden ve .block sınıfları kullanılarak seçici olarak gösterilerek veya gizlenerek etkileşimli hale getirilir. <button> her basıldığında, isActive durumunu değiştiren onClick işleyicisini çalıştırırız. Buton aktif ise ( isActive === true ), block sınıfını ayarlıyoruz. Aksi takdirde, hidden sınıfı ayarlarız. Bunlar, görüntüleme davranışını değiştirmek için kullanılan Tailwind sınıflarıdır.

Özetle, sınıf adları modülü, Tailwind için sınıf adlarını programlı olarak kontrol etmenin basit ve etkili bir yoludur. Mantığı React donanımlarına ayırmayı kolaylaştırır, bu da bileşenlerinizin yeniden kullanımını kolaylaştırır. Basit ve etkileşimli bileşenler için çalışır.

Yöntem 2: Bir Tasarım Sistemini Tanımlamak İçin Sabitleri Kullanma

Tailwind ve React'i birlikte kullanmanın başka bir yolu da sabitleri kullanmak ve sahne öğelerini belirli bir sabite eşlemektir. Bu, bina tasarım sistemleri için etkilidir. Bir örnekle gösterelim.

Tasarım sisteminizi listelediğiniz bir theme.js dosyasıyla başlayın.

 // theme.js (you can call it whatever you want) export const ButtonType = { primary: "bg-blue-500 hover:bg-blue-700 text-white font-bold rounded", secondary: "bg-blue-500 hover:bg-blue-700 text-white font-bold rounded", basic: "bg-white hover:bg-gray-700 text-gray-700 font-bold rounded", delete: "bg-red-300 hover:bg-red-500 text-white font-bold rounded" }; export const ButtonSize = { sm: "py-2 px-4 text-xs", lg: "py-3 px-6 text-lg" }

Bu durumda, iki sabit setimiz var:

• ButtonType , uygulamamızda düğmelerin nasıl şekillendirildiğini tanımlar.
• ButtonSizes , uygulamamızdaki düğmelerin boyutlarını tanımlar.

Şimdi <Button> bileşenimizi yazalım:

 import {ButtonType, ButtonSize} from './theme'; function Button({size, type, children}) { // This can be improved. I'm keeping it simple here by joining two strings. const classNames = ButtonType[type] + " " + ButtonSize[size]; return ( <button className={classNames}>{children}</button> ) } export default Button;

Sınıf adlarının bir listesini oluşturmak için ButtonType ve ButtonSize sabitlerini kullanırız. Bu, <Button> arayüzümüzün arayüzünü çok daha güzel kılıyor. Her şeyi bir sınıf adı dizgisine koymak yerine, size ve type kullanmamıza izin verir.

 // Cleaner and well defined props. <Button size="xs" type="primary">Enable</Button>

Önceki yaklaşıma karşı:

 // Exposing class names <button className="py-2 px-4 text-xs bg-blue-500 hover:bg-blue-700 text-white font-bold rounded">Enable</button>

Uygulamanızda düğmelerin nasıl görüneceğini yeniden tanımlamanız gerekiyorsa, theme.js dosyasını düzenlemeniz yeterlidir; uygulamanızdaki tüm düğmeler otomatik olarak güncellenir. Bu, çeşitli bileşenlerde sınıf adları aramaktan daha kolay olabilir.

Yöntem 3: Yardımcı Programları @apply İle Oluşturma

React bileşenlerinizin okunabilirliğini iyileştirmenin üçüncü bir yolu, tekrarlanan sınıfları çıkarmak için CSS ve PostCSS'de bulunan @apply desenini kullanmaktır. Bu model, stil sayfalarının ve son işlemcilerin kullanılmasını içerir.

Bunun nasıl çalıştığını bir örnekle gösterelim. Birincil ve İkincil Düğmeye sahip bir Düğme grubunuz olduğunu varsayalım.

 <button className="py-2 px-4 mr-4 text-xs bg-blue-500 hover:bg-blue-700 text-white font-bold rounded">Update Now</button> <button className="py-2 px-4 text-xs mr-4 hover:bg-gray-100 text-gray-700 border-gray-300 border font-bold rounded">Later</button>

@apply kalıbını kullanarak bu HTML'yi şu şekilde yazabilirsiniz:

 <button className="btn btn-primary btn-xs">Update Now</button> <button className="btn btn-secondary btn-xs">Later</button>

Hangi daha sonra React'e uyarlanabilir:

 import classnames from "classnames"; function Button ({size, type, children}) { const bSize = "btn-" + size; const bType = "btn-" + type; return ( <button className={classnames("btn", bSize, bType)}>{children}</button> ) } Button.propTypes = { size: PropTypes.oneOf(['xs, xl']), type: PropTypes.oneOf(['primary', 'secondary']) }; // Using the Button component. <Button type="primary" size="xs">Update Now</Button> <Button type="secondary" size="xs">Later</Button>

.btn , .btn-primary ve diğerleri gibi bu BEM tarzı sınıf adlarını nasıl oluşturacağınız aşağıda açıklanmıştır. Bir button.css dosyası oluşturarak başlayın:

 /\* button.css \*/ @tailwind base; @tailwind components; .btn { @apply py-2 px-4 mr-4 font-bold rounded; } .btn-primary { @apply bg-blue-500 hover:bg-blue-700 text-white; } .btn-secondary { @apply hover:bg-gray-700 text-gray-700 border-gray-300 border; } .btn-xs { @apply text-xs; } .btn-xl { @apply text-xl; } @tailwind utilities;

Yukarıdaki kod gerçek CSS değil ama PostCSS tarafından derlenecek. Bir JavaScript projesi için PostCSS ve Tailwind'in nasıl kurulacağını gösteren burada bir GitHub deposu var.

Ayrıca burada nasıl kurulacağını gösteren kısa bir video var.

@apply Kullanmanın Dezavantajları

Tailwind yardımcı program sınıflarını daha yüksek seviyeli CSS sınıflarına çıkarma kavramı mantıklı görünüyor, ancak bilmeniz gereken bazı dezavantajları var. Bunları başka bir örnekle vurgulayalım.

İlk olarak, bu sınıf adlarını çıkararak bazı bilgileri kaybederiz. Örneğin, kendisine .btn uygulanmış bir bileşene .btn-primary eklenmesi gerektiğinin farkında olmamız gerekir. Ayrıca .btn-primary ve .btn-secondary birlikte uygulanamaz. Bu bilgi sadece sınıflara bakarak netlik kazanmaz.

Bu bileşen daha karmaşık bir şey olsaydı, sınıflar arasındaki ebeveyn-çocuk ilişkisini de anlamanız gerekirdi. Bir bakıma bu, Tailwind'in çözmek için tasarlandığı sorundur ve @apply kullanarak sorunları farklı bir şekilde geri getiriyoruz.

İşte Tailwind'in yaratıcısı Adam @apply kullanmanın artılarını ve eksilerini anlattığı bir video.

Özet

Bu makalede, yeniden kullanılabilir bileşenler oluşturmak için Tailwind'i bir React uygulamasına entegre etmenin üç yolunu inceledik. Bu yöntemler, props kullanarak daha temiz bir arayüze sahip React bileşenleri oluşturmanıza yardımcı olur.

1. Sınıfları programlı olarak değiştirmek için sınıf adları modülünü kullanın.
2. Bileşen durumu başına bir sınıf listesi tanımladığınız bir sabitler dosyası tanımlayın.
3. Daha yüksek seviyeli CSS sınıflarını çıkarmak için @apply kullanın.

Herhangi bir sorunuz varsa, bana Twitter'da @tilomitra'dan bir mesaj gönderin.

SmashingMag'de Önerilen Okuma :

• Bir React Projesinde Tailwind CSS Kurulumu
• React ile Sıralanabilir Tablolar Oluşturma
• Firefox'ta Yeni ve Deneysel CSS Geliştirme Araçları Kılavuzu
• Kendi Genişleyen ve Daralan İçerik Panellerinizi Yapın