G\u00fcn\u00fcm\u00fcz\u00fcn h\u0131zl\u0131 tempolu dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131 aray\u00fczlerinin (UI) tutarl\u0131l\u0131\u011f\u0131 ve geli\u015ftirme s\u00fcre\u00e7lerinin verimlili\u011fi kritik \u00f6neme sahiptir. \u00d6zellikle React gibi bile\u015fen tabanl\u0131 k\u00fct\u00fcphanelerle \u00e7al\u0131\u015f\u0131rken, uygulaman\u0131z\u0131n farkl\u0131 yerlerinde benzer g\u00f6r\u00fcn\u00fcml\u00fc ancak farkl\u0131 i\u00e7eriklere sahip UI \u00f6\u011feleriyle s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131rs\u0131n\u0131z. Kartlar, bu t\u00fcr \u00f6\u011felerin en yayg\u0131n \u00f6rneklerinden biridir. \u00dcr\u00fcn listelemelerinden blog g\u00f6nderilerine, kullan\u0131c\u0131 profillerinden haber ba\u015fl\u0131klar\u0131na kadar pek \u00e7ok alanda kar\u015f\u0131m\u0131za \u00e7\u0131karlar. Her bir kart\u0131 uygulaman\u0131n farkl\u0131 bir b\u00f6l\u00fcm\u00fcnde ayr\u0131 ayr\u0131 stilize etmek ve kodlamak, bir dizi sorunu beraberinde getirir ki bu da yeniden kullan\u0131labilir bile\u015fenlere olan ihtiyac\u0131 do\u011furur.<\/p>\n
\u00d6ncelikle, kod tekrar\u0131 ka\u00e7\u0131n\u0131lmaz hale gelir. Ayn\u0131 veya \u00e7ok benzer CSS \u00f6zelliklerini ve HTML yap\u0131lar\u0131n\u0131 defalarca yazmak, hem geli\u015ftirme s\u00fcresini uzat\u0131r hem de projenin kod taban\u0131n\u0131 gereksiz yere \u015fi\u015firir. Bu durum, \u00f6zellikle b\u00fcy\u00fck ekiplerde veya uzun soluklu projelerde s\u00fcrd\u00fcr\u00fclebilirli\u011fi olumsuz etkiler. \u0130kincil olarak, tutars\u0131zl\u0131k riski artar. Bir tasar\u0131m de\u011fi\u015fikli\u011fi oldu\u011funda veya yeni bir \u00f6zellik eklendi\u011finde, her bir kart \u00f6rne\u011fini tek tek g\u00fcncellemek zorunda kal\u0131rs\u0131n\u0131z. Bu s\u00fcre\u00e7te g\u00f6zden ka\u00e7an detaylar, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde kartlar\u0131n farkl\u0131 g\u00f6r\u00fcnmesine, \u00f6rne\u011fin farkl\u0131 kenar bo\u015fluklar\u0131na, g\u00f6lge efektlerine veya yaz\u0131 tiplerine sahip olmas\u0131na neden olabilir. Bu tutars\u0131zl\u0131klar, kullan\u0131c\u0131 deneyimini olumsuz etkiler ve markan\u0131n g\u00f6rsel b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc bozar.<\/p>\n
Peki, yeniden kullan\u0131labilir kart bile\u015fenleri bu sorunlar\u0131 nas\u0131l \u00e7\u00f6zer?<\/strong> Tek bir merkezi kart bile\u015feni olu\u015fturarak, t\u00fcm stil ve yap\u0131land\u0131rma mant\u0131\u011f\u0131n\u0131 bu bile\u015fende toplayabilirsiniz. Bu, bir stil de\u011fi\u015fikli\u011fi gerekti\u011finde yaln\u0131zca tek bir noktada g\u00fcncelleme yapman\u0131z gerekti\u011fi anlam\u0131na gelir. Sonu\u00e7 olarak, uygulaman\u0131z\u0131n genelinde tutarl\u0131l\u0131k sa\u011flan\u0131r ve bak\u0131m maliyetleri \u00f6nemli \u00f6l\u00e7\u00fcde d\u00fc\u015fer. Geli\u015ftirme h\u0131z\u0131 artar \u00e7\u00fcnk\u00fc her yeni kart ihtiyac\u0131nda s\u0131f\u0131rdan ba\u015flamak yerine, mevcut bile\u015feni farkl\u0131 prop’lar (\u00f6zellikler) ile konfig\u00fcre ederek h\u0131zla kullan\u0131ma alabilirsiniz. Bu yakla\u015f\u0131m, bir tasar\u0131m sistemi olu\u015fturman\u0131n temelini atar ve frontend geli\u015ftirme s\u00fcre\u00e7lerini daha d\u00fczenli ve \u00f6ng\u00f6r\u00fclebilir hale getirir. \u00d6rne\u011fin, b\u00fcy\u00fck bir e-ticaret platformunda, \u00fcr\u00fcn kartlar\u0131, indirim kartlar\u0131, kategori kartlar\u0131 gibi farkl\u0131 g\u00f6r\u00fcn\u00fcmlerde y\u00fczlerce kart bulunabilir. E\u011fer her biri ayr\u0131 ayr\u0131 tasarlan\u0131p kodlanm\u0131\u015f olsayd\u0131, platformun s\u00fcrekli g\u00fcncellenen do\u011fas\u0131 g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, bu durum bir kabusa d\u00f6n\u00fc\u015febilirdi. Ancak yeniden kullan\u0131labilir bir ana kart bile\u015feni ve ondan t\u00fcretilen varyantlar sayesinde, tasar\u0131mc\u0131lar ve geli\u015ftiriciler \u00e7ok daha \u00e7evik ve etkile\u015fimli \u00e7al\u0131\u015fabilirler. Bu sayede, hem g\u00f6rsel tutarl\u0131l\u0131k korunur hem de yeni \u00f6zelliklerin veya kampanyalar\u0131n devreye al\u0131nmas\u0131 \u00e7ok daha h\u0131zl\u0131 ger\u00e7ekle\u015fir.<\/p>\n React, dinamik kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in vazge\u00e7ilmez bir k\u00fct\u00fcphane haline gelirken, stil y\u00f6netimi her zaman tart\u0131\u015fmal\u0131 bir konu olmu\u015ftur. Geleneksel CSS, mod\u00fclerlik ve kapsam y\u00f6netimi konusunda baz\u0131 zorluklar \u00e7\u0131kar\u0131rken, Styled Components gibi CSS-in-JS k\u00fct\u00fcphaneleri modern React geli\u015ftirme ak\u0131\u015f\u0131na adeta “cuk” oturur. Bu ikili, bile\u015fen tabanl\u0131 geli\u015ftirmenin t\u00fcm avantajlar\u0131n\u0131 stil y\u00f6netimiyle birle\u015ftirerek, daha d\u00fczenli, daha s\u00fcrd\u00fcr\u00fclebilir ve daha esnek bir geli\u015ftirme deneyimi sunar. \u015eimdi bu m\u00fckemmel ikilinin bile\u015fen tabanl\u0131 geli\u015ftirme \u00fczerindeki etkisine daha yak\u0131ndan bakal\u0131m.<\/p>\n React’\u0131n temel g\u00fcc\u00fc, her \u015feyi bile\u015fenler olarak d\u00fc\u015f\u00fcnme felsefesinden gelir. Bir web sayfas\u0131n\u0131, kendi i\u00e7inde ba\u011f\u0131ms\u0131z mant\u0131\u011f\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fc olan k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir par\u00e7alara ay\u0131r\u0131rs\u0131n\u0131z. Bu bile\u015fenler, t\u0131pk\u0131 LEGO bloklar\u0131 gibi bir araya getirilerek karma\u015f\u0131k UI’lar olu\u015fturman\u0131z\u0131 sa\u011flar. Bu yakla\u015f\u0131m, kodun daha okunabilir, bak\u0131m\u0131 daha kolay ve test edilebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n React bile\u015fenleri iki ana t\u00fcrde olabilir: s\u0131n\u0131f bile\u015fenleri (class components) ve fonksiyonel bile\u015fenler (functional components). Modern React geli\u015ftirme genellikle fonksiyonel bile\u015fenleri ve React Hooks’u tercih eder \u00e7\u00fcnk\u00fc daha az kodla daha fazla i\u015f yapma esnekli\u011fi sunarlar. Bir bile\u015fenin g\u00fcc\u00fc, sahip oldu\u011fu prop’lar (properties) sayesinde artar. Prop’lar, bir bile\u015fene d\u0131\u015far\u0131dan veri aktarman\u0131n yoludur ve bile\u015fenin dinamik olarak farkl\u0131 i\u00e7erikler veya davran\u0131\u015flar sergilemesini sa\u011flar. \u00d6rne\u011fin, bir Basit bir React fonksiyonel bile\u015feni \u00f6rne\u011fi \u015f\u00f6yle g\u00f6r\u00fcnebilir:<\/p>\n Bu basit bir React bile\u015fenidir.<\/p>\n <\/div>\n );\n}\n\nexport default MerhabaDunya;\n<\/pre>\n <\/code><\/p>\n Bu \u00f6rnekte, Styled Components, React bile\u015fenlerinize do\u011frudan JavaScript kodu i\u00e7inde CSS yazman\u0131z\u0131 sa\u011flayan pop\u00fcler bir CSS-in-JS k\u00fct\u00fcphanesidir. Geleneksel CSS'in k\u00fcresel kapsam (global scope) sorunlar\u0131na ve bile\u015fenler aras\u0131 stil \u00e7ak\u0131\u015fmalar\u0131na zarif bir \u00e7\u00f6z\u00fcm sunar. Styled Components ile yazd\u0131\u011f\u0131n\u0131z her stil, yaln\u0131zca belirli bir bile\u015fene ait olur, bu da mod\u00fclerli\u011fi art\u0131r\u0131r ve stil y\u00f6netimi \u00fczerindeki kontrol\u00fcn\u00fcz\u00fc geli\u015ftirir.<\/p>\n Peki, Styled Components tam olarak ne i\u015fe yarar?<\/p>\n Basit bir Styled Component \u00f6rne\u011fi:<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Art\u0131k React ve Styled Components'\u0131n neden bu kadar g\u00fc\u00e7l\u00fc bir ikili oldu\u011funu anlad\u0131\u011f\u0131m\u0131za g\u00f6re, ilk yeniden kullan\u0131labilir kart bile\u015fenimizi olu\u015fturmaya ge\u00e7ebiliriz. Bu b\u00f6l\u00fcmde, projemizi kurmaktan, temel kart yap\u0131s\u0131n\u0131 olu\u015fturmaya ve Styled Components ile stil vermeye kadar her ad\u0131m\u0131 detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Amac\u0131m\u0131z, basit ama etkili bir kart bile\u015feni olu\u015fturarak, ileri d\u00fczey konulara zemin haz\u0131rlamak.<\/p>\n \u0130lk olarak, React projemizi olu\u015fturmam\u0131z gerekiyor. Bunun i\u00e7in Vite veya Create React App gibi ara\u00e7lar\u0131 kullanabiliriz. Ben bu \u00f6rnekte daha modern ve h\u0131zl\u0131 bir se\u00e7enek olan Vite'\u0131 tercih edece\u011fim. Komut sat\u0131r\u0131na a\u015fa\u011f\u0131daki komutu yazarak yeni bir React projesi olu\u015fturabiliriz:<\/p>\n <\/code><\/p>\n Projemiz olu\u015ftuktan ve ba\u011f\u0131ml\u0131l\u0131klar y\u00fcklendikten sonra, Styled Components k\u00fct\u00fcphanesini projemize dahil etmeliyiz. Bunu a\u015fa\u011f\u0131daki komutla yapabiliriz:<\/p>\n <\/code><\/p>\n Kurulum tamamland\u0131\u011f\u0131nda, projemizin temel yap\u0131s\u0131 haz\u0131r demektir. Art\u0131k bile\u015fenlerimizi olu\u015fturmaya ba\u015flayabiliriz.<\/p>\n Bir kart genellikle bir resim, bir ba\u015fl\u0131k, bir a\u00e7\u0131klama ve bazen de bir aksiyon butonu gibi temel \u00f6\u011felerden olu\u015fur. Bu \u00f6\u011feleri kapsayan bir JSX yap\u0131s\u0131 ile ba\u015flayaca\u011f\u0131z. {description}<\/p>\n {buttonText && (\n React ve Styled Components: M\u00fckemmel Bir \u0130kili mi?<\/h2>\n
React Bile\u015fenleri Neden Bu Kadar G\u00fc\u00e7l\u00fc?<\/h3>\n
Button<\/code> bile\u015fenine color=\"primary\"<\/code> veya onClick={handleSave}<\/code> gibi prop’lar g\u00f6ndererek, ayn\u0131 temel bile\u015fenin farkl\u0131 senaryolarda kullan\u0131labilmesini sa\u011flayabilirsiniz.<\/p>\n\n\/\/ components\/MerhabaDunya.jsx\nimport React from 'react';\n\nfunction MerhabaDunya(props) {\n return (\n Merhaba, {props.isim || \"D\u00fcnya\"}!<\/h1>\n
MerhabaDunya<\/code> bile\u015feni isim<\/code> ad\u0131nda bir prop al\u0131r ve bu prop sayesinde dinamik bir ba\u015fl\u0131k olu\u015fturur. E\u011fer isim<\/code> prop'u sa\u011flanmazsa \"D\u00fcnya\" varsay\u0131lan de\u011fer olarak kullan\u0131l\u0131r. Bu basit yap\u0131 bile, React'\u0131n yeniden kullan\u0131labilirlik ve dinamizm konusundaki temel felsefesini a\u00e7\u0131k\u00e7a ortaya koyar. Bir bile\u015fen tan\u0131mland\u0131\u011f\u0131nda, onu uygulaman\u0131z\u0131n istedi\u011finiz her yerinde \u00e7a\u011f\u0131rabilir ve farkl\u0131 prop'larla \u00f6zelle\u015ftirebilirsiniz. Bu sayede, ayn\u0131 yap\u0131sal kal\u0131p \u00fczerinden sonsuz varyasyonlar \u00fcretebilirsiniz, ki bu da kart bile\u015fenleri gibi tekrarlayan UI \u00f6\u011feleri i\u00e7in paha bi\u00e7ilmez bir \u00f6zelliktir.<\/p>\nStyled Components Nedir ve Ne \u0130\u015fe Yarar?<\/h3>\n
\n
!important<\/code> kullanmaya veya karma\u015f\u0131k BEM isimland\u0131rmalar\u0131 yapmaya gerek kalmaz.<\/li>\n\n\/\/ components\/StyledButton.jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nconst StyledButton = styled.buttonbackground-color: ${props => props.primary ? '#007bff' : '#6c757d'};\n color: white;\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 16px;\n\n &:hover {\n opacity: 0.9;\n }<\/code>;\n\nfunction MyButton({ children, primary, ...rest }) {\n return (\n StyledButton<\/code> ad\u0131nda bir buton bile\u015feni tan\u0131mlad\u0131k. Bu bile\u015fen, primary<\/code> ad\u0131nda bir prop al\u0131yor ve bu prop'un de\u011ferine g\u00f6re arkaplan rengini de\u011fi\u015ftiriyor. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, stil do\u011frudan JavaScript \u015fablon dizisi (template literal) i\u00e7inde yaz\u0131l\u0131yor ve prop'lara kolayca eri\u015febiliyor. Bu, React'\u0131n bile\u015fen tabanl\u0131 mimarisiyle kusursuz bir uyum sa\u011flayarak, daha organize ve y\u00f6netilebilir stil kodlar\u0131 yazmam\u0131za olanak tan\u0131r. Styled Components, geli\u015ftiricilere sadece stil yazma de\u011fil, ayn\u0131 zamanda stillerini dinamik hale getirme ve projenin genel tasar\u0131m sistemine entegre etme yetene\u011fi sunar. Bu \u00f6zellikler, \u00f6zellikle yeniden kullan\u0131labilir kart bile\u015fenleri in\u015fa ederken paha bi\u00e7ilmez bir avantaj sa\u011flar.<\/p>\nTemel Bir Kart Bile\u015feni Nas\u0131l Olu\u015fturulur? Ad\u0131m Ad\u0131m Rehber<\/h2>\n
Proje Kurulumu ve Gerekli K\u00fct\u00fcphaneler<\/h3>\n
\nnpm create vite@latest my-card-app -- --template react\ncd my-card-app\nnpm install\n<\/pre>\n\nnpm install styled-components\n<\/pre>\nCard<\/code> Bile\u015feninin Temel Yap\u0131s\u0131<\/h3>\nsrc<\/code> klas\u00f6r\u00fcn\u00fcz\u00fcn i\u00e7ine components<\/code> ad\u0131nda yeni bir klas\u00f6r olu\u015fturun ve i\u00e7ine Card.jsx<\/code> ad\u0131nda bir dosya ekleyin. Bu dosyan\u0131n i\u00e7eri\u011fi \u015f\u00f6yle olabilir:<\/p>\n\n\/\/ src\/components\/Card.jsx\nimport React from 'react';\n\nfunction Card({ imageSrc, title, description, buttonText, onButtonClick }) {\n return (\n \n
{title}<\/h3>\n