{"id":33144,"date":"2025-10-30T06:40:51","date_gmt":"2025-10-30T03:40:51","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33144"},"modified":"2025-10-30T06:40:51","modified_gmt":"2025-10-30T03:40:51","slug":"react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/","title":{"rendered":"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"<p><body><\/p>\n<h2>React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber<\/h2>\n<p>Modern web uygulamalar\u0131, karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek ve geli\u015ftirme s\u00fcre\u00e7lerini h\u0131zland\u0131rmak i\u00e7in mod\u00fcler, yeniden kullan\u0131labilir bile\u015fenlere dayal\u0131 mimarileri benimsemektedir. Bu mimarilerin merkezinde, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) bile\u015fenleri yer al\u0131r. React, bu bile\u015fen tabanl\u0131 yakla\u015f\u0131m\u0131n en pop\u00fcler temsilcilerinden biridir. Ancak, bile\u015fenleri izole bir \u015fekilde geli\u015ftirmek, test etmek ve belgelemek, \u00f6zellikle b\u00fcy\u00fck projelerde zorlay\u0131c\u0131 olabilir. \u0130\u015fte bu noktada Storybook devreye girer. Storybook, UI bile\u015fenlerini ba\u011f\u0131ms\u0131z bir ortamda geli\u015ftirmek, g\u00f6rselle\u015ftirmek ve belgelemek i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu makalede, React ve Storybook&#8217;u bir araya getirerek nas\u0131l sa\u011flam, yeniden kullan\u0131labilir ve iyi belgelenmi\u015f UI bile\u015fenleri olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n<h3>React ve Komponent Tabanl\u0131 Mimari<\/h3>\n<p>React, Facebook taraf\u0131ndan geli\u015ftirilen a\u00e7\u0131k kaynakl\u0131 bir JavaScript k\u00fct\u00fcphanesidir ve kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Deklaratif yap\u0131s\u0131 ve bile\u015fen tabanl\u0131 mimarisi sayesinde, karma\u015f\u0131k UI&#8217;lar\u0131 y\u00f6netilebilir, bak\u0131m\u0131 kolay ve \u00f6l\u00e7eklenebilir par\u00e7alara ay\u0131rmay\u0131 m\u00fcmk\u00fcn k\u0131lar.<\/p>\n<h4>React&#8217;in Temel Prensipleri<\/h4>\n<p>*   <strong>Bile\u015fen Tabanl\u0131l\u0131k:<\/strong> React&#8217;te her \u015fey bir bile\u015fendir. Bir bile\u015fen, kendi mant\u0131\u011f\u0131na ve g\u00f6r\u00fcn\u00fcm\u00fcne sahip, ba\u011f\u0131ms\u0131z, yeniden kullan\u0131labilir bir kod blo\u011fudur. Bu bile\u015fenler, daha b\u00fcy\u00fck ve karma\u015f\u0131k UI&#8217;lar olu\u015fturmak i\u00e7in birle\u015ftirilir. \u00d6rne\u011fin, bir <code>Button<\/code> (D\u00fc\u011fme), bir <code>Card<\/code> (Kart) veya bir <code>Navbar<\/code> (Gezinme \u00c7ubu\u011fu) birer bile\u015fen olabilir.<br \/>\n*   <strong>Deklaratif Yakla\u015f\u0131m:<\/strong> React, UI&#8217;\u0131n nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fini &#8220;nas\u0131l&#8221; de\u011fil, &#8220;ne&#8221; olmas\u0131 gerekti\u011fini tan\u0131mlaman\u0131za olanak tan\u0131r. Yani, belirli bir veri durumu i\u00e7in UI&#8217;\u0131n nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fini belirtirsiniz ve React, bu durumu ger\u00e7ek DOM&#8217;a yans\u0131tma i\u015fini otomatik olarak halleder. Bu, UI geli\u015ftirmeyi daha \u00f6ng\u00f6r\u00fclebilir ve hata ay\u0131klamay\u0131 daha kolay hale getirir.<br \/>\n*   <strong>Tek Y\u00f6nl\u00fc Veri Ak\u0131\u015f\u0131 (Props):<\/strong> React&#8217;te veriler, \u00fcst bile\u015fenlerden alt bile\u015fenlere &#8220;props&#8221; (\u00f6zellikler) arac\u0131l\u0131\u011f\u0131yla tek y\u00f6nl\u00fc olarak akar. Bu, veri y\u00f6netimini basitle\u015ftirir ve uygulaman\u0131n durumunu daha kolay takip etmenizi sa\u011flar.<br \/>\n*   <strong>Durum (State):<\/strong> Bile\u015fenler kendi i\u00e7 durumlar\u0131n\u0131 (state) y\u00f6netebilirler. Durum, bile\u015fenin zaman i\u00e7inde de\u011fi\u015febilen verilerini temsil eder. Durum de\u011fi\u015fti\u011finde, React bile\u015feni otomatik olarak yeniden render eder.<\/p>\n<p>React&#8217;in bu temel prensipleri, UI geli\u015ftirme s\u00fcrecini daha d\u00fczenli ve verimli hale getirir. Ancak, bu bile\u015fenleri bir araya getirmeden \u00f6nce, her birinin kendi ba\u015f\u0131na do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan ve farkl\u0131 durumlar\u0131 ele alabildi\u011finden emin olmak \u00f6nemlidir. \u0130\u015fte bu noktada Storybook&#8217;un de\u011feri ortaya \u00e7\u0131kar.<\/p>\n<h3>Storybook Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h3>\n<p>Storybook, UI bile\u015fenlerini izole bir ortamda geli\u015ftirmek, test etmek ve belgelemek i\u00e7in a\u00e7\u0131k kaynakl\u0131 bir ara\u00e7t\u0131r. Bir bile\u015fen k\u00fct\u00fcphanesi veya tasar\u0131m sistemi olu\u015ftururken vazge\u00e7ilmez bir yard\u0131mc\u0131d\u0131r.<\/p>\n<h4>Storybook&#8217;un Sa\u011flad\u0131\u011f\u0131 Avantajlar<\/h4>\n<p>*   <strong>\u0130zole Geli\u015ftirme Ortam\u0131:<\/strong> Bile\u015fenleri uygulaman\u0131n geri kalan\u0131ndan ba\u011f\u0131ms\u0131z olarak geli\u015ftirebilirsiniz. Bu, karma\u015f\u0131k ba\u011f\u0131ml\u0131l\u0131klarla u\u011fra\u015fmadan, sadece o bile\u015fenin kendi i\u015flevselli\u011fine odaklanman\u0131z\u0131 sa\u011flar.<br \/>\n*   <strong>Canl\u0131 Dok\u00fcmantasyon:<\/strong> Her bile\u015fenin farkl\u0131 durumlar\u0131n\u0131 (\u00f6rne\u011fin, bir d\u00fc\u011fmenin &#8220;aktif&#8221;, &#8220;pasif&#8221;, &#8220;y\u00fckl\u00fc&#8221; halleri) g\u00f6steren interaktif bir belge g\u00f6revi g\u00f6r\u00fcr. Bu dok\u00fcmantasyon, geli\u015ftiriciler, tasar\u0131mc\u0131lar ve \u00fcr\u00fcn y\u00f6neticileri aras\u0131nda ortak bir dil olu\u015fturur.<br \/>\n*   <strong>G\u00f6rsel Test ve Regresyon Tespiti:<\/strong> Bile\u015fenlerinizi farkl\u0131 veri ve durumlarla g\u00f6rsel olarak inceleyebilir, beklenmedik UI de\u011fi\u015fikliklerini (regresyonlar\u0131) kolayca tespit edebilirsiniz.<br \/>\n*   <strong>Ekip \u0130\u00e7i \u0130\u015fbirli\u011fi:<\/strong> Tasar\u0131mc\u0131lar, geli\u015ftiriciler ve QA ekipleri, Storybook \u00fczerinden bile\u015fenleri kolayca g\u00f6zden ge\u00e7irebilir ve geri bildirim sa\u011flayabilir. Bu, tasar\u0131m ve geli\u015ftirme aras\u0131ndaki bo\u015flu\u011fu kapat\u0131r.<br \/>\n*   <strong>H\u0131zland\u0131r\u0131lm\u0131\u015f Geli\u015ftirme:<\/strong> Bile\u015fenleri uygulaman\u0131n genel ba\u011flam\u0131n\u0131 kurmaya gerek kalmadan do\u011frudan Storybook i\u00e7inde geli\u015ftirebilirsiniz. Bu, geli\u015ftirme d\u00f6ng\u00fcs\u00fcn\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r.<br \/>\n*   <strong>Eklenti Ekosistemi (Addons):<\/strong> Storybook, i\u015flevselli\u011fini geni\u015fletmek i\u00e7in zengin bir eklenti ekosistemine sahiptir. Bu eklentilerle, bile\u015fen \u00f6zelliklerini dinamik olarak de\u011fi\u015ftirebilir, etkile\u015fimleri g\u00fcnl\u00fc\u011fe kaydedebilir, eri\u015filebilirlik kontrolleri yapabilir ve daha fazlas\u0131n\u0131 yapabilirsiniz.<\/p>\n<p>React ile Storybook&#8217;u birle\u015ftirmek, hem geli\u015ftirme verimlili\u011fini art\u0131r\u0131r hem de daha tutarl\u0131, bak\u0131m\u0131 kolay ve kaliteli UI&#8217;lar olu\u015fturman\u0131z\u0131 sa\u011flar. \u015eimdi, bu g\u00fc\u00e7l\u00fc ikiliyi kullanarak bir UI bile\u015feni olu\u015fturma s\u00fcrecine ge\u00e7elim.<\/p>\n<h3>Proje Ortam\u0131n\u0131n Kurulumu<\/h3>\n<p>React ve Storybook ile bir UI bile\u015feni olu\u015fturmaya ba\u015flamadan \u00f6nce, gerekli proje ortam\u0131n\u0131 kurmam\u0131z gerekiyor.<\/p>\n<h4>1. React Projesi Olu\u015fturma<\/h4>\n<p>E\u011fer mevcut bir React projeniz yoksa, <code>create-react-app<\/code> veya Vite gibi ara\u00e7larla h\u0131zl\u0131ca bir tane olu\u015fturabilirsiniz. Bu makale i\u00e7in <code>create-react-app<\/code> kullanaca\u011f\u0131z, ancak prensipler di\u011fer kurulumlar i\u00e7in de ge\u00e7erlidir.<\/p>\n<pre><code class=\"language-bash\">npx create-react-app my-ui-component-library\ncd my-ui-component-library<\/code><\/pre>\n<p>Bu komutlar, <code>my-ui-component-library<\/code> ad\u0131nda yeni bir React projesi olu\u015fturacak ve proje dizinine ge\u00e7i\u015f yapacakt\u0131r.<\/p>\n<h4>2. Storybook Kurulumu<\/h4>\n<p>\u015eimdi s\u0131ra Storybook&#8217;u projemize entegre etmeye geldi. Proje dizininde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code class=\"language-bash\">nnpx storybook init<\/code><\/pre>\n<p>Bu komut, projenizin t\u00fcr\u00fcn\u00fc otomatik olarak alg\u0131layacak (bu durumda React) ve Storybook&#8217;u kuracakt\u0131r. Kurulum s\u0131ras\u0131nda, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecek, <code>.storybook<\/code> klas\u00f6r\u00fcn\u00fc olu\u015fturacak ve \u00f6rnek Story dosyalar\u0131n\u0131 ekleyecektir.<\/p>\n<p>Kurulum tamamland\u0131ktan sonra, Storybook&#8217;u ba\u015flatmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n<pre><code class=\"language-bash\">npm run storybook<\/code><\/pre>\n<p>Bu komut, Storybook&#8217;u genellikle <code>http:\/\/localhost:6006<\/code> adresinde ba\u015flatacak ve taray\u0131c\u0131n\u0131zda a\u00e7acakt\u0131r. \u00d6rnek Story&#8217;leri g\u00f6receksiniz.<\/p>\n<h4>3. Klas\u00f6r Yap\u0131s\u0131<\/h4>\n<p>Bile\u015fenlerimizi d\u00fczenli tutmak i\u00e7in basit bir klas\u00f6r yap\u0131s\u0131 olu\u015ftural\u0131m. <code>src<\/code> klas\u00f6r\u00fcn\u00fcn alt\u0131nda <code>components<\/code> ad\u0131nda yeni bir klas\u00f6r a\u00e7al\u0131m. Her bile\u015fen i\u00e7in bu klas\u00f6r i\u00e7inde ayr\u0131 bir alt klas\u00f6r olu\u015fturmak iyi bir uygulamad\u0131r.<\/p>\n<pre><code class=\"language-\">my-ui-component-library\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u2502   \u251c\u2500\u2500 Button\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 Button.jsx\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 Button.module.css\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 Button.stories.jsx\n\u2502   \u251c\u2500\u2500 App.js\n\u2502   \u2514\u2500\u2500 index.js\n\u251c\u2500\u2500 .storybook\/\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 ...<\/code><\/pre>\n<h3>\u00d6rnek Bir UI Komponenti Olu\u015fturma: <code>Button<\/code> Komponenti<\/h3>\n<p>\u015eimdi, React ve Storybook&#8217;u kullanarak basit ama i\u015flevsel bir <code>Button<\/code> (D\u00fc\u011fme) komponenti olu\u015ftural\u0131m. Bu komponentin farkl\u0131 boyutlar\u0131, stilleri (birincil, ikincil) ve devre d\u0131\u015f\u0131 b\u0131rak\u0131lma durumu gibi \u00e7e\u015fitli varyasyonlar\u0131 olacakt\u0131r.<\/p>\n<h4>Komponentin Tan\u0131mlanmas\u0131<\/h4>\n<p><code>Button<\/code> komponentimiz \u015fu \u00f6zellikleri alacak:<\/p>\n<p>*   <code>children<\/code>: D\u00fc\u011fme i\u00e7indeki metin veya JSX i\u00e7eri\u011fi.<br \/>\n*   <code>onClick<\/code>: D\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda \u00e7al\u0131\u015facak fonksiyon.<br \/>\n*   <code>primary<\/code>: D\u00fc\u011fmenin birincil stilini al\u0131p almayaca\u011f\u0131n\u0131 belirten boolean. Varsay\u0131lan olarak ikincil stili kullan\u0131r.<br \/>\n*   <code>backgroundColor<\/code>: \u00d6zel bir arka plan rengi atamak i\u00e7in.<br \/>\n*   <code>size<\/code>: D\u00fc\u011fmenin boyutu (<code>small<\/code>, <code>medium<\/code>, <code>large<\/code>). Varsay\u0131lan olarak <code>medium<\/code>.<br \/>\n*   <code>disabled<\/code>: D\u00fc\u011fmenin devre d\u0131\u015f\u0131 olup olmad\u0131\u011f\u0131n\u0131 belirten boolean.<\/p>\n<h4>Komponentin React Kodunu Yazma (<code>Button.jsx<\/code>)<\/h4>\n<p><code>src\/components\/Button\/Button.jsx<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m ve i\u00e7ine a\u015fa\u011f\u0131daki kodu yazal\u0131m:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport PropTypes from 'prop-types';\nimport styles from '.\/Button.module.css';\n\n\/<em><\/em>\n * Birincil veya ikincil stile sahip yeniden kullan\u0131labilir bir d\u00fc\u011fme komponenti.\n *\/\nexport const Button = ({\n  primary,\n  backgroundColor,\n  size,\n  onClick,\n  children,\n  disabled,\n}) => {\n  const mode = primary ? styles.primary : styles.secondary;\n\n  return (\n    <button\n      type=\"button\"\n      className={[styles.button, styles[<code>button--${size}<\/code>], mode].join(' ')}\n      style={backgroundColor && { backgroundColor }}\n      onClick={onClick}\n      disabled={disabled}\n    >\n      {children}\n    <\/button>\n  );\n};\n\nButton.propTypes = {\n  \/<em><\/em>\n   * D\u00fc\u011fme birincil stil mi kullanacak?\n   *\/\n  primary: PropTypes.bool,\n  \/<em><\/em>\n   * \u00d6zel arka plan rengi\n   *\/\n  backgroundColor: PropTypes.string,\n  \/<em><\/em>\n   * D\u00fc\u011fme boyutu\n   *\/\n  size: PropTypes.oneOf(['small', 'medium', 'large']),\n  \/<em><\/em>\n   * T\u0131klama olay\u0131 i\u015fleyici\n   *\/\n  onClick: PropTypes.func,\n  \/<em><\/em>\n   * D\u00fc\u011fme i\u00e7eri\u011fi\n   *\/\n  children: PropTypes.node.isRequired,\n  \/<em><\/em>\n   * D\u00fc\u011fme devre d\u0131\u015f\u0131 m\u0131?\n   *\/\n  disabled: PropTypes.bool,\n};\n\nButton.defaultProps = {\n  backgroundColor: null,\n  primary: false,\n  size: 'medium',\n  onClick: undefined,\n  disabled: false,\n};<\/code><\/pre>\n<p>Burada <code>propTypes<\/code> kullanarak bile\u015fenimizin alaca\u011f\u0131 prop&#8217;lar\u0131n tiplerini tan\u0131mlad\u0131k. Bu, geli\u015ftirme s\u0131ras\u0131nda hatalar\u0131 yakalamak i\u00e7in iyi bir uygulamad\u0131r. <code>defaultProps<\/code> ile de varsay\u0131lan de\u011ferleri belirledik.<\/p>\n<h4>Komponentin Stilini Belirleme (<code>Button.module.css<\/code>)<\/h4>\n<p><code>src\/components\/Button\/Button.module.css<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m ve i\u00e7ine a\u015fa\u011f\u0131daki CSS kodunu ekleyelim:<\/p>\n<pre><code class=\"language-css\">.button {\n  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-weight: 700;\n  border: 0;\n  border-radius: 3em;\n  cursor: pointer;\n  display: inline-block;\n  line-height: 1;\n  padding: 10px 16px; \/<em> Varsay\u0131lan padding <\/em>\/\n}\n\n.button--small {\n  font-size: 12px;\n  padding: 8px 14px;\n}\n\n.button--medium {\n  font-size: 14px;\n  padding: 11px 20px;\n}\n\n.button--large {\n  font-size: 16px;\n  padding: 12px 24px;\n}\n\n.primary {\n  color: white;\n  background-color: #1ea7fd;\n}\n\n.secondary {\n  color: #333;\n  background-color: transparent;\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n\n.button[disabled] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}<\/code><\/pre>\n<p>Bu CSS mod\u00fclleri, stil \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlememizi sa\u011flar. Her s\u0131n\u0131f ad\u0131, yaln\u0131zca bu bile\u015fenin kapsam\u0131nda benzersizdir.<\/p>\n<h3>Storybook ile Komponenti Belgeleme ve Geli\u015ftirme<\/h3>\n<p>\u015eimdi, <code>Button<\/code> komponentimizin farkl\u0131 durumlar\u0131n\u0131 Storybook&#8217;ta nas\u0131l g\u00f6sterece\u011fimizi ve belgeleyece\u011fimizi \u00f6\u011frenelim.<\/p>\n<h4>Storybook Kurulumu ve \u0130lk Story&#8217;nin Olu\u015fturulmas\u0131 (<code>Button.stories.jsx<\/code>)<\/h4>\n<p><code>src\/components\/Button\/Button.stories.jsx<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m ve i\u00e7ine Storybook i\u00e7in gerekli kodu yazal\u0131m.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { Button } from '.\/Button';\n\n\/\/ Storybook'a bu komponentin nerede g\u00f6r\u00fcnece\u011fini ve hangi komponent oldu\u011funu bildirir.\nexport default {\n  title: 'Example\/Button', \/\/ Storybook navigasyonunda yolu\n  component: Button,       \/\/ Hangi React komponentini belgeliyoruz\n  tags: ['autodocs'],      \/\/ Otomatik dok\u00fcmantasyon olu\u015fturmay\u0131 etkinle\u015ftirir\n  argTypes: {              \/\/ Props'lar i\u00e7in kontrolleri tan\u0131mlar\n    backgroundColor: { control: 'color' },\n    onClick: { action: 'clicked' }, \/\/ onClick prop'u tetiklendi\u011finde Storybook Actions panelinde g\u00f6sterir\n    children: { control: 'text' },\n  },\n};\n\n\/\/ Yeniden kullan\u0131labilir bir \u015fablon (Template) olu\u015fturuyoruz.\n\/\/ Bu, her story i\u00e7in ayn\u0131 temel yap\u0131y\u0131 kullanmam\u0131z\u0131 sa\u011flar.\nconst Template = (args) => <Button {...args} \/>;\n\n\/\/ Default (varsay\u0131lan) d\u00fc\u011fme story'si\nexport const Primary = Template.bind({});\nPrimary.args = {\n  primary: true,\n  children: 'Primary Button',\n};\n\nexport const Secondary = Template.bind({});\nSecondary.args = {\n  children: 'Secondary Button',\n};\n\nexport const Large = Template.bind({});\nLarge.args = {\n  size: 'large',\n  children: 'Large Button',\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n  size: 'small',\n  children: 'Small Button',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  disabled: true,\n  children: 'Disabled Button',\n};\n\nexport const CustomBackgroundColor = Template.bind({});\nCustomBackgroundColor.args = {\n  backgroundColor: '#FF7F50', \/\/ \u00d6zel bir renk\n  children: 'Custom Color',\n};\n\nexport const WithEmoji = Template.bind({});\nWithEmoji.args = {\n  primary: true,\n  children: '     ',\n};<\/code><\/pre>\n<p>Bu kodda dikkat etmemiz gerekenler:<\/p>\n<p>*   <strong><code>export default<\/code> objesi:<\/strong> Bu, Storybook&#8217;un komponentimiz hakk\u0131nda bilgi edinmesini sa\u011flar.<br \/>\n    *   <code>title<\/code>: Storybook UI&#8217;\u0131nda komponentimizin nerede g\u00f6r\u00fcnece\u011fini belirler. Genellikle <code>Kategori\/KomponentAd\u0131<\/code> format\u0131nda kullan\u0131l\u0131r.<br \/>\n    *   <code>component<\/code>: Belgeledi\u011fimiz React komponentini i\u015faret eder.<br \/>\n    *   <code>tags: ['autodocs']<\/code>: Storybook&#8217;un otomatik olarak kapsaml\u0131 bir dok\u00fcmantasyon sayfas\u0131 olu\u015fturmas\u0131n\u0131 sa\u011flar.<br \/>\n    *   <code>argTypes<\/code>: Bu, Storybook&#8217;un &#8220;Controls&#8221; eklentisi i\u00e7in \u00f6nemlidir. Hangi prop&#8217;lar\u0131n hangi t\u00fcrde kontrol (renk se\u00e7ici, metin giri\u015fi vb.) ile Storybook UI&#8217;\u0131nda d\u00fczenlenebilece\u011fini belirtir. <code>onClick<\/code> i\u00e7in <code>action: 'clicked'<\/code> tan\u0131mlamak, bu olay\u0131n tetiklendi\u011finde Storybook&#8217;un &#8220;Actions&#8221; panelinde g\u00f6r\u00fcnmesini sa\u011flar.<br \/>\n*   <strong><code>Template<\/code>:<\/strong> Bu, her bir Story i\u00e7in temel bile\u015fen yap\u0131s\u0131n\u0131 tan\u0131mlayan bir fonksiyondur. <code>Template.bind({})<\/code> kullanarak bu \u015fablonu kopyalar\u0131z ve her Story&#8217;ye \u00f6zel <code>args<\/code> (prop&#8217;lar) atar\u0131z. Bu, kod tekrar\u0131n\u0131 azalt\u0131r.<br \/>\n*   <strong><code>export const [StoryName]<\/code>:<\/strong> Her bir <code>export const<\/code> ifadesi, Storybook&#8217;ta ayr\u0131 bir &#8220;Story&#8221; olarak g\u00f6r\u00fcn\u00fcr. <code>args<\/code> \u00f6zelli\u011fi ile bu Story&#8217;nin hangi prop de\u011ferleriyle render edilece\u011fini belirleriz.<\/p>\n<p>\u015eimdi <code>npm run storybook<\/code> komutunu tekrar \u00e7al\u0131\u015ft\u0131r\u0131rsan\u0131z, sol taraftaki navigasyon panelinde &#8220;Example\/Button&#8221; alt\u0131nda farkl\u0131 d\u00fc\u011fme varyasyonlar\u0131n\u0131 g\u00f6receksiniz. Her birine t\u0131klad\u0131\u011f\u0131n\u0131zda, d\u00fc\u011fme farkl\u0131 stillerde ve davran\u0131\u015flarda g\u00f6r\u00fcnecektir. &#8220;Controls&#8221; panelinden <code>backgroundColor<\/code>, <code>size<\/code>, <code>children<\/code> gibi prop&#8217;lar\u0131 de\u011fi\u015ftirebilir ve d\u00fc\u011fmenin nas\u0131l tepki verdi\u011fini an\u0131nda g\u00f6rebilirsiniz. <code>onClick<\/code> prop&#8217;u i\u00e7in tan\u0131mlad\u0131\u011f\u0131m\u0131z <code>action<\/code> sayesinde, d\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131n\u0131zda &#8220;Actions&#8221; panelinde bir <code>clicked<\/code> olay\u0131 logland\u0131\u011f\u0131n\u0131 da fark edeceksiniz.<\/p>\n<h4>Storybook Addon&#8217;lar\u0131 ile Geli\u015fmi\u015f \u00d6zellikler<\/h4>\n<p>Storybook&#8217;un g\u00fcc\u00fc, zengin eklenti ekosisteminden gelir. Kurulum s\u0131ras\u0131nda baz\u0131 temel eklentiler otomatik olarak eklenir. <code>.storybook\/main.js<\/code> dosyas\u0131n\u0131 kontrol ederek hangi eklentilerin etkin oldu\u011funu g\u00f6rebilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ .storybook\/main.js\n\/<em><\/em> @type { import('@storybook\/react-webpack5').StorybookConfig } *\/\nconst config = {\n  stories: ['..\/src\/<strong>\/<em>.mdx', '..\/src\/<\/strong>\/<\/em>.stories.@(js|jsx|mjs|ts|tsx)'],\n  addons: [\n    '@storybook\/addon-links',\n    '@storybook\/addon-essentials', \/\/ Controls, Actions, Viewport, Backgrounds, Docs gibi temel eklentileri i\u00e7erir\n    '@storybook\/addon-interactions',\n  ],\n  framework: {\n    name: '@storybook\/react-webpack5',\n    options: {},\n  },\n  docs: {\n    autodocs: 'tag',\n  },\n};\nexport default config;<\/code><\/pre>\n<p><code>@storybook\/addon-essentials<\/code> paketi, \u00e7o\u011fu ihtiyac\u0131n\u0131z\u0131 kar\u015f\u0131layacak temel eklentileri i\u00e7erir:<\/p>\n<p>*   <strong>Controls:<\/strong> Bile\u015fen prop&#8217;lar\u0131n\u0131 Storybook UI&#8217;\u0131ndan interaktif olarak de\u011fi\u015ftirmenizi sa\u011flar. Bizim <code>argTypes<\/code> tan\u0131m\u0131m\u0131z bu eklenti sayesinde \u00e7al\u0131\u015f\u0131r.<br \/>\n*   <strong>Actions:<\/strong> Bile\u015fenler taraf\u0131ndan tetiklenen olaylar\u0131 (\u00f6rne\u011fin <code>onClick<\/code>) g\u00fcnl\u00fc\u011fe kaydeder ve &#8220;Actions&#8221; panelinde g\u00f6sterir.<br \/>\n*   <strong>Docs:<\/strong> Story&#8217;lerinizden otomatik olarak kapsaml\u0131 dok\u00fcmantasyon sayfalar\u0131 olu\u015fturur. <code>tags: ['autodocs']<\/code> bu \u00f6zelli\u011fi etkinle\u015ftirir. Bu sayfalarda bile\u015fenin kullan\u0131m\u0131, prop tablosu ve canl\u0131 \u00f6rnekler yer al\u0131r.<br \/>\n*   <strong>Viewport:<\/strong> Bile\u015fenin farkl\u0131 ekran boyutlar\u0131nda nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc test etmenizi sa\u011flar.<br \/>\n*   <strong>Backgrounds:<\/strong> Bile\u015feni farkl\u0131 arka plan renklerinde test etmenizi sa\u011flar.<\/p>\n<p>Ek olarak, eri\u015filebilirlik (a11y) testleri i\u00e7in <code>@storybook\/addon-a11y<\/code> gibi eklentileri de ekleyebilirsiniz. Kurulumu basittir:<\/p>\n<pre><code class=\"language-bash\">npm install @storybook\/addon-a11y --save-dev<\/code><\/pre>\n<p>Ard\u0131ndan <code>.storybook\/main.js<\/code> dosyan\u0131zdaki <code>addons<\/code> dizisine ekleyin:<\/p>\n<pre><code class=\"language-javascript\">\/\/ .storybook\/main.js\nconst config = {\n  \/\/ ...\n  addons: [\n    \/\/ ... di\u011fer eklentiler\n    '@storybook\/addon-a11y', \/\/ Eri\u015filebilirlik eklentisi\n  ],\n  \/\/ ...\n};<\/code><\/pre>\n<p>Bu eklenti sayesinde, Storybook UI&#8217;\u0131nda &#8220;Accessibility&#8221; panelini g\u00f6receksiniz. Bu panel, bile\u015fenlerinizin eri\u015filebilirlik standartlar\u0131na uygunlu\u011funu kontrol etmenize yard\u0131mc\u0131 olur ve potansiyel sorunlar\u0131 (kontrast, etiketler vb.) raporlar.<\/p>\n<h3>Storybook&#8217;un Faydalar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n<p>React bile\u015fenlerini Storybook ile geli\u015ftirmek, sadece daha iyi bile\u015fenler olu\u015fturmakla kalmaz, ayn\u0131 zamanda t\u00fcm geli\u015ftirme s\u00fcrecini de iyile\u015ftirir.<\/p>\n<h4>Geli\u015ftirme S\u00fcrecindeki Faydalar\u0131<\/h4>\n<p>*   <strong>H\u0131zl\u0131 \u0130terasyon ve Geri Bildirim:<\/strong> Bile\u015fenleri izole bir ortamda geli\u015ftirdi\u011finiz i\u00e7in, her de\u011fi\u015fikli\u011fi an\u0131nda g\u00f6rebilirsiniz. Bu, tasar\u0131mc\u0131lar ve geli\u015ftiriciler aras\u0131nda h\u0131zl\u0131 geri bildirim d\u00f6ng\u00fcleri olu\u015fturur.<br \/>\n*   <strong>Tutarl\u0131l\u0131k ve Kalite:<\/strong> Her bile\u015fenin t\u00fcm olas\u0131 durumlar\u0131n\u0131 Storybook&#8217;ta belgeleyerek ve test ederek, uygulaman\u0131z genelinde g\u00f6rsel tutarl\u0131l\u0131\u011f\u0131 ve davran\u0131\u015fsal kaliteyi garanti alt\u0131na al\u0131rs\u0131n\u0131z.<br \/>\n*   <strong>Ekip \u0130\u00e7i Koordinasyon:<\/strong> Storybook, tasar\u0131mc\u0131lar\u0131n, geli\u015ftiricilerin ve QA m\u00fchendislerinin ortak bir referans noktas\u0131d\u0131r. Herkes, bile\u015fenlerin nas\u0131l g\u00f6r\u00fcnmesi ve davranmas\u0131 gerekti\u011fi konusunda ayn\u0131 sayfada olur.<br \/>\n*   <strong>E\u011fitim ve Kat\u0131l\u0131m:<\/strong> Yeni ekip \u00fcyeleri, Storybook&#8217;u kullanarak mevcut bile\u015fen k\u00fct\u00fcphanesini h\u0131zl\u0131ca \u00f6\u011frenebilir ve projenin tasar\u0131m dilini anlayabilirler.<br \/>\n*   <strong>G\u00f6rsel Regresyon Testleri:<\/strong> Storybook, bile\u015fenlerin g\u00f6rsel olarak de\u011fi\u015fip de\u011fi\u015fmedi\u011fini kontrol etmek i\u00e7in harika bir ara\u00e7t\u0131r. Otomatik g\u00f6rsel regresyon test ara\u00e7lar\u0131yla (\u00f6rne\u011fin Chromatic) entegre edilebilir.<br \/>\n*   <strong>Eri\u015filebilirlik (Accessibility) Odakl\u0131 Geli\u015ftirme:<\/strong> Eri\u015filebilirlik eklentileri sayesinde, bile\u015fenlerinizi geli\u015ftirirken eri\u015filebilirlik standartlar\u0131na uygunlu\u011funu s\u00fcrekli kontrol edebilirsiniz.<\/p>\n<h4>En \u0130yi Uygulamalar<\/h4>\n<p>*   <strong>Her Komponent \u0130\u00e7in Ayr\u0131 Story Dosyas\u0131:<\/strong> Her React komponenti i\u00e7in ayr\u0131 bir <code>.stories.jsx<\/code> (veya <code>.stories.tsx<\/code>) dosyas\u0131 olu\u015fturun. Bu, Storybook&#8217;u d\u00fczenli tutar.<br \/>\n*   <strong>Her Durumu Temsil Eden Story&#8217;ler:<\/strong> Komponentinizin her olas\u0131 durumu (varsay\u0131lan, aktif, devre d\u0131\u015f\u0131, hata, farkl\u0131 boyutlar, farkl\u0131 i\u00e7erikler vb.) i\u00e7in ayr\u0131 bir Story olu\u015fturun. Bu, komponentinizin t\u00fcm senaryolarda do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olman\u0131z\u0131 sa\u011flar.<br \/>\n*   <strong>Anla\u015f\u0131l\u0131r Story Ba\u015fl\u0131klar\u0131:<\/strong> Story&#8217;lerinizin ba\u015fl\u0131klar\u0131n\u0131 (<code>title<\/code> prop&#8217;u) ve Story adlar\u0131n\u0131 (<code>export const<\/code>) anlaml\u0131 ve a\u00e7\u0131klay\u0131c\u0131 tutun.<br \/>\n*   <strong><code>argTypes<\/code> ve <code>args<\/code> Kullan\u0131m\u0131:<\/strong> <code>argTypes<\/code> ile Storybook Controls panelinde interaktif kontroller sa\u011flay\u0131n. <code>args<\/code> ile her Story&#8217;nin ba\u015flang\u0131\u00e7 prop de\u011ferlerini tan\u0131mlay\u0131n.<br \/>\n*   <strong>Dok\u00fcmantasyonu G\u00fcncel Tutun:<\/strong> Komponentleriniz de\u011fi\u015ftik\u00e7e Story&#8217;lerinizi ve dolay\u0131s\u0131yla dok\u00fcmantasyonunuzu g\u00fcncel tutun. <code>autodocs<\/code> etiketi bu s\u00fcreci b\u00fcy\u00fck \u00f6l\u00e7\u00fcde otomatikle\u015ftirir.<br \/>\n*   <strong>Addon&#8217;lar\u0131 Etkin Kullan\u0131n:<\/strong> <code>Controls<\/code>, <code>Actions<\/code>, <code>Docs<\/code>, <code>A11y<\/code> gibi eklentileri etkin bir \u015fekilde kullanarak bile\u015fenlerinizin testini ve belgelenmesini zenginle\u015ftirin.<br \/>\n*   <strong>CI\/CD Entegrasyonu (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong> Storybook&#8217;u bir statik site olarak yay\u0131nlayabilir ve CI\/CD s\u00fcre\u00e7lerinize entegre edebilirsiniz. Bu, t\u00fcm ekibin her zaman g\u00fcncel bile\u015fen k\u00fct\u00fcphanesine eri\u015fmesini sa\u011flar. Chromatic gibi hizmetler, Storybook&#8217;unuzu bar\u0131nd\u0131rabilir ve g\u00f6rsel regresyon testlerini otomatikle\u015ftirebilir.<br \/>\n*   <strong>Komponentleri Atomik Tutun:<\/strong> M\u00fcmk\u00fcn oldu\u011funca k\u00fc\u00e7\u00fck ve tek bir sorumlulu\u011fa sahip atomik bile\u015fenler olu\u015fturmaya \u00e7al\u0131\u015f\u0131n. Bu, yeniden kullan\u0131labilirli\u011fi ve test edilebilirli\u011fi art\u0131r\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>React ve Storybook, modern UI geli\u015ftirme i\u00e7in g\u00fc\u00e7l\u00fc bir ikilidir. React&#8217;in bile\u015fen tabanl\u0131 mimarisiyle UI&#8217;lar\u0131n\u0131z\u0131 mod\u00fcler par\u00e7alara ay\u0131r\u0131rken, Storybook bu par\u00e7alar\u0131 izole bir ortamda geli\u015ftirmenize, belgelemenize ve test etmenize olanak tan\u0131r. Bu makalede g\u00f6sterildi\u011fi gibi, basit bir <code>Button<\/code> komponenti olu\u015fturarak bu iki arac\u0131n nas\u0131l entegre edilece\u011fini \u00f6\u011frendik.<\/p>\n<p>Bu i\u015f ak\u0131\u015f\u0131n\u0131 benimsemek, geli\u015ftirme h\u0131z\u0131n\u0131z\u0131 art\u0131racak, UI&#8217;lar\u0131n\u0131z\u0131n kalitesini ve tutarl\u0131l\u0131\u011f\u0131n\u0131 y\u00fckseltecek ve ekip \u00fcyeleri aras\u0131nda daha iyi bir i\u015fbirli\u011fi sa\u011flayacakt\u0131r. \u0130ster k\u00fc\u00e7\u00fck bir proje \u00fczerinde \u00e7al\u0131\u015f\u0131yor olun ister b\u00fcy\u00fck bir tasar\u0131m sistemi olu\u015fturuyor olun, React ve Storybook size daha sa\u011flam, bak\u0131m\u0131 kolay ve \u00f6l\u00e7eklenebilir kullan\u0131c\u0131 aray\u00fczleri in\u015fa etme g\u00fcc\u00fcn\u00fc verecektir. Kendi bile\u015fenlerinizi olu\u015fturmaya ba\u015flay\u0131n ve bu g\u00fc\u00e7l\u00fc kombinasyonun faydalar\u0131n\u0131 ke\u015ffedin!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber\nModern web uygulamalar\u0131, karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek ve geli\u015ftirme s\u00fcre\u00e7le","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-33144","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber Modern web uygulamalar\u0131, karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek ve geli\u015ftirme s\u00fcre\u00e7le\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-30T03:40:51+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-10-30T03:40:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/\"},\"wordCount\":2430,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/\",\"name\":\"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-30T03:40:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber","og_description":"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber Modern web uygulamalar\u0131, karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek ve geli\u015ftirme s\u00fcre\u00e7le","og_url":"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-30T03:40:51+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber","datePublished":"2025-10-30T03:40:51+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/"},"wordCount":2430,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/","name":"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-30T03:40:51+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-ve-storybook-ile-ui-komponenti-gelistirme-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React ve Storybook ile UI Komponenti Geli\u015ftirme: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33144"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33144\/revisions"}],"predecessor-version":[{"id":33145,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33144\/revisions\/33145"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}