this.props.children<\/code> ile Bile\u015fen Olu\u015fturma<\/h2>\nReact, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in birincil tercihlerden biri haline gelmi\u015ftir ve bu pop\u00fclaritesinin temelinde bile\u015fen tabanl\u0131 mimarisi yatar. Bile\u015fenler (components), kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn ba\u011f\u0131ms\u0131z, yeniden kullan\u0131labilir ve y\u00f6netilebilir par\u00e7alar\u0131d\u0131r. Bu bile\u015fenlerin g\u00fcc\u00fcn\u00fc tam olarak ortaya \u00e7\u0131karan kavramlardan biri de “kompozisyon”dur. Kompozisyon, daha k\u00fc\u00e7\u00fck, basit bile\u015fenleri bir araya getirerek daha karma\u015f\u0131k bile\u015fenler olu\u015fturma yetene\u011fidir. React’ta bu kompozisyonu sa\u011flaman\u0131n en temel ve g\u00fc\u00e7l\u00fc yollar\u0131ndan biri ise this.props.children<\/code> \u00f6zelli\u011fini kullanmakt\u0131r.<\/p>\nBu rehberde, this.props.children<\/code>‘\u0131n ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, kompozisyonu nas\u0131l kolayla\u015ft\u0131rd\u0131\u011f\u0131n\u0131 ve ileri d\u00fczey kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Amac\u0131m\u0131z, React uygulamalar\u0131n\u0131zda daha esnek, okunabilir ve s\u00fcrd\u00fcr\u00fclebilir bir yap\u0131 olu\u015fturman\u0131za yard\u0131mc\u0131 olmakt\u0131r.<\/p>\nthis.props.children<\/code> Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\nReact bile\u015fenleri, kendilerine veri aktarmak i\u00e7in “props” (\u00f6zellikler) ad\u0131 verilen salt okunur JavaScript objelerini kullan\u0131r. this.props.children<\/code> ise React taraf\u0131ndan her bile\u015fene otomatik olarak sa\u011flanan \u00f6zel bir prop’tur. Bu prop, bir bile\u015fenin a\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f etiketleri aras\u0131na yerle\u015ftirilen her \u015feyi temsil eder.<\/p>\n\u00d6rne\u011fin, a\u015fa\u011f\u0131daki gibi bir Panel<\/code> bile\u015fenimiz oldu\u011funu varsayal\u0131m:<\/p>\nfunction Panel(props) {\n return (\n \n {props.children}\n <\/div>\n );\n}<\/code><\/pre>\n
Bu Panel<\/code> bile\u015fenini kullan\u0131rken, a\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f etiketleri aras\u0131na istedi\u011fimiz herhangi bir i\u00e7eri\u011fi yerle\u015ftirebiliriz:<\/p>\n\n Merhaba D\u00fcnya!<\/h3>\n Bu, panelin i\u00e7indeki bir paragraft\u0131r.<\/p>\n Daha Fazla Bilgi<\/button>\n<\/Panel><\/code><\/pre>\nYukar\u0131daki \u00f6rnekte, <\/p>\n<\/code>, <\/p>\n<\/code> ve <\/code> etiketleri, Panel<\/code> bile\u015feninin props.children<\/code> de\u011feri olacakt\u0131r. Panel<\/code> bile\u015feni, bu i\u00e7eri\u011fi kendi div<\/code> eleman\u0131n\u0131n i\u00e7ine render ederek bir sarmalay\u0131c\u0131 (wrapper) g\u00f6revi g\u00f6r\u00fcr.<\/p>\nprops.children<\/code>‘\u0131n de\u011feri \u00e7e\u015fitli t\u00fcrlerde olabilir:Undefined veya null:<\/strong> Bile\u015fenin a\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f etiketleri aras\u0131nda hi\u00e7bir i\u00e7erik yoksa.String:<\/strong> \u0130\u00e7erik sadece metin ise.React Element:<\/strong> \u0130\u00e7erik tek bir React eleman\u0131 ise (\u00f6rn. <\/p>\n<\/div>\n
<\/code>).Array (Dizi):<\/strong> \u0130\u00e7erik birden fazla React eleman\u0131 veya metin d\u00fc\u011f\u00fcm\u00fc ise.<\/p>\nBu esneklik, this.props.children<\/code>‘\u0131 React’ta dinamik ve yeniden kullan\u0131labilir bile\u015fenler olu\u015fturmak i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline getirir.<\/p>\nKompozisyon \u0130\u00e7in this.props.children<\/code> Kullan\u0131m\u0131<\/h3>\nthis.props.children<\/code>‘\u0131 kullanarak, bile\u015fenlerinizi daha mod\u00fcler ve esnek hale getirebilirsiniz. \u0130\u015fte baz\u0131 yayg\u0131n kullan\u0131m senaryolar\u0131:<\/p>\nH3 D\u00fczen (Layout) Bile\u015fenleri<\/h4>\n Sayfa d\u00fczeni veya belirli bir b\u00f6l\u00fcm\u00fcn yap\u0131s\u0131n\u0131 tan\u0131mlayan bile\u015fenler olu\u015fturmak i\u00e7in this.props.children<\/code> idealdir. Bu t\u00fcr bile\u015fenler, i\u00e7eriklerinin nas\u0131l g\u00f6r\u00fcnece\u011fini veya nerede yer alaca\u011f\u0131n\u0131 belirler, ancak i\u00e7eri\u011fin kendisi hakk\u0131nda bilgi sahibi olmazlar. Bu, i\u00e7eri\u011fin dinamik olmas\u0131n\u0131 ve farkl\u0131 yerlerde farkl\u0131 i\u00e7eriklerle kullan\u0131labilmesini sa\u011flar.<\/p>\n\u00d6rnek: PageLayout<\/code> Bile\u015feni<\/strong><\/p>\n\/\/ PageLayout.jsx\nimport React from 'react';\n\nfunction PageLayout(props) {\n return (\n \n
\n \n <\/header>\n \n {props.children} {\/ Ana i\u00e7erik buraya gelir <\/em>\/}\n <\/main>\n \n © 2023 Uygulama Ad\u0131\n <\/footer>\n <\/div>\n );\n}\n\nexport default PageLayout;\n\n\/\/ App.jsx\nimport React from 'react';\nimport PageLayout from '.\/PageLayout';\n\nfunction App() {\n return (\n \n Ho\u015f Geldiniz!<\/h2>\n Bu, sayfa d\u00fczeni i\u00e7inde yer alan ana i\u00e7eriktir.<\/p>\n Devam Et<\/button>\n <\/PageLayout>\n );\n}\n\nexport default App;<\/code><\/pre>\nBu \u00f6rnekte, PageLayout<\/code> bile\u015feni, uygulaman\u0131n genel ba\u015fl\u0131\u011f\u0131n\u0131 ve alt bilgisini sabit tutarken, ortadaki ana i\u00e7eri\u011fi props.children<\/code> arac\u0131l\u0131\u011f\u0131yla dinamik olarak al\u0131r.<\/p>\nH3 Sarmalay\u0131c\u0131 (Wrapper) Bile\u015fenleri<\/h4>\n Belirli bir stil, eri\u015filebilirlik \u00f6zelli\u011fi veya ortak bir mant\u0131k sa\u011flamak istedi\u011finizde sarmalay\u0131c\u0131 bile\u015fenler kullan\u0131\u015fl\u0131d\u0131r. Bu bile\u015fenler, i\u00e7lerindeki i\u00e7eri\u011fi (children) oldu\u011fu gibi render ederken, etraflar\u0131na ek i\u015flevsellik veya g\u00f6r\u00fcn\u00fcm katarlar.<\/p>\n
\u00d6rnek: Modal<\/code> Bile\u015feni<\/strong><\/p>\n\/\/ Modal.jsx\nimport React from 'react';\n\nfunction Modal({ isOpen, onClose, children }) {\n if (!isOpen) {\n return null;\n }\n\n return (\n \n
\n {children} {\/
Modal i\u00e7eri\u011fi buraya gelir <\/em>\/}\n Kapat<\/button>\n <\/div>\n <\/div>\n );\n}\n\nexport default Modal;\n\n\/\/ App.jsx\nimport React, { useState } from 'react';\nimport Modal from '.\/Modal';\n\nfunction App() {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n \n \n
setIsModalOpen(true)}>Modal A\u00e7<\/button>\n\n setIsModalOpen(false)}>\n Uyar\u0131!<\/h3>\n Bu bir bilgilendirme mesaj\u0131d\u0131r. Dikkatlice okuyunuz.<\/p>\n <\/Modal>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n
Modal<\/code> bile\u015feni, isOpen<\/code> prop’una g\u00f6re g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol eder ve children<\/code> olarak ald\u0131\u011f\u0131 i\u00e7eri\u011fi bir modal penceresi i\u00e7inde g\u00f6sterir. Bu sayede, farkl\u0131 modal i\u00e7erikleriyle ayn\u0131 modal mant\u0131\u011f\u0131n\u0131 ve stilini tekrar tekrar yazmak zorunda kalmay\u0131z.<\/p>\nthis.props.children<\/code> ile Geli\u015fmi\u015f Kullan\u0131m Senaryolar\u0131<\/h3>\nthis.props.children<\/code> sadece basit i\u00e7erik aktar\u0131m\u0131 i\u00e7in de\u011fil, ayn\u0131 zamanda daha karma\u015f\u0131k etkile\u015fimler ve bile\u015fen desenleri i\u00e7in de kullan\u0131labilir.<\/p>\nH3 React.Children<\/code> Yard\u0131mc\u0131 Fonksiyonlar\u0131<\/h4>\nprops.children<\/code> tek bir React eleman\u0131, bir metin dizesi veya bir dizi olabilir. Do\u011frudan props.children<\/code> \u00fczerinde .map()<\/code> gibi dizi metotlar\u0131n\u0131 kullanmaya \u00e7al\u0131\u015fmak, children<\/code> bir dizi olmad\u0131\u011f\u0131nda hatalara yol a\u00e7abilir. React, bu durumu ele almak i\u00e7in React.Children<\/code> yard\u0131mc\u0131 fonksiyonlar\u0131n\u0131 sa\u011flar. Bu fonksiyonlar, children<\/code>‘\u0131n t\u00fcr\u00fcnden ba\u011f\u0131ms\u0131z olarak g\u00fcvenli bir \u015fekilde i\u015flenmesini garanti eder.<\/p>\n* React.Children.map(children, fn)<\/code>:<\/strong> Her bir \u00e7ocu\u011fu bir fonksiyonla haritalar. children<\/code> bo\u015fsa veya null<\/code> ise, bo\u015f bir dizi d\u00f6nd\u00fcr\u00fcr.React.Children.forEach(children, fn)<\/code>:<\/strong> Her bir \u00e7ocuk \u00fczerinde bir fonksiyon \u00e7al\u0131\u015ft\u0131r\u0131r.React.Children.count(children)<\/code>:<\/strong> children<\/code> i\u00e7indeki toplam eleman say\u0131s\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.React.Children.only(children)<\/code>:<\/strong> children<\/code>‘\u0131n tek bir element oldu\u011fundan emin olmak i\u00e7in kullan\u0131l\u0131r. Birden fazla \u00e7ocuk varsa hata f\u0131rlat\u0131r.React.Children.toArray(children)<\/code>:<\/strong> children<\/code>‘\u0131 d\u00fczle\u015ftirilmi\u015f bir diziye d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve her \u00e7ocu\u011fa benzersiz bir anahtar atar. Bu, \u00f6zellikle \u00e7ocuklar\u0131 yeniden s\u0131ralamak veya filtrelemek istedi\u011finizde faydal\u0131d\u0131r.<\/p>\n\u00d6rnek: TabList<\/code> Bile\u015feni ile React.Children.map<\/code><\/strong><\/p>\n\/\/ TabList.jsx\nimport React from 'react';\n\nfunction TabList({ activeTab, onTabChange, children }) {\n return (\n \n {React.Children.map(children, (child, index) => {\n \/\/ Her bir \u00e7ocuk bir Tab bile\u015feni olmal\u0131\n if (!React.isValidElement(child) || child.type.name !== 'Tab') {\n console.warn('TabList children should only be Tab components.');\n return null;\n }\n\n const isActive = child.props.id === activeTab;\n return React.cloneElement(child, {\n isActive: isActive,\n onClick: () => onTabChange(child.props.id)\n });\n })}\n <\/div>\n );\n}\n\n\/\/ Tab.jsx\nimport React from 'react';\n\nfunction Tab({ id, label, isActive, onClick }) {\n return (\n
\n {label}\n <\/button>\n );\n}\n\n\/\/ App.jsx\nimport React, { useState } from 'react';\nimport TabList from '.\/TabList';\nimport Tab from '.\/Tab';\n\nfunction App() {\n const [activeTab, setActiveTab] = useState('tab1');\n\n const renderContent = () => {\n switch (activeTab) {\n case 'tab1':\n return Tab 1 \u0130\u00e7eri\u011fi Buras\u0131.<\/div>;\n case 'tab2':\n return
Tab 2 \u0130\u00e7eri\u011fi Buras\u0131.<\/div>;\n case 'tab3':\n return
Tab 3 \u0130\u00e7eri\u011fi Buras\u0131.<\/div>;\n default:\n return null;\n }\n };\n\n return (\n
\n
Sekmeli Navigasyon<\/h2>\n \n \n {renderContent()}\n <\/div>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n
Bu \u00f6rnekte, TabList<\/code> bile\u015feni React.Children.map<\/code> kullanarak kendisine ge\u00e7irilen Tab<\/code> bile\u015fenlerini i\u015fler. React.cloneElement<\/code> ile her bir Tab<\/code> bile\u015fenine isActive<\/code> ve onClick<\/code> gibi ek props’lar enjekte eder. Bu, TabList<\/code>‘in \u00e7ocuklar\u0131n\u0131n davran\u0131\u015flar\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcmlerini d\u0131\u015far\u0131dan kontrol etmesini sa\u011flar, ancak \u00e7ocuklar\u0131n i\u00e7eri\u011fini do\u011frudan manip\u00fcle etmek yerine mevcut \u00e7ocuklar\u0131 geni\u015fletir.<\/p>\nH3 Render Props ile Birlikte Kullan\u0131m<\/h4>\n this.props.children<\/code>‘\u0131 sadece React elemanlar\u0131 veya metin olarak de\u011fil, ayn\u0131 zamanda bir fonksiyon olarak da kullanabilirsiniz. Bu desen, “Render Props” olarak bilinir ve children<\/code>‘\u0131 bir fonksiyon olarak ge\u00e7irerek, sarmalay\u0131c\u0131 bile\u015fenin i\u00e7 state’ini veya metotlar\u0131n\u0131 d\u0131\u015far\u0131ya aktarmas\u0131na olanak tan\u0131r.<\/p>\n\/\/ DataFetcher.jsx\nimport React, { useState, useEffect } from 'react';\n\nfunction DataFetcher({ url, children }) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const response = await fetch(url);\n const json = await response.json();\n setData(json);\n } catch (err) {\n setError(err);\n } finally {\n setLoading(false);\n }\n };\n fetchData();\n }, [url]);\n\n \/\/ children'\u0131 bir fonksiyon olarak \u00e7a\u011f\u0131r\u0131r ve state'i ona ge\u00e7irir\n return children({ data, loading, error });\n}\n\nexport default DataFetcher;\n\n\/\/ App.jsx\nimport React from 'react';\nimport DataFetcher from '.\/DataFetcher';\n\nfunction App() {\n return (\n \n \n
\n {({ data, loading, error }) => {\n if (loading) return Y\u00fckleniyor...<\/p>;\n if (error) return
Hata: {error.message}<\/p>;\n if (!data) return
Veri bulunamad\u0131.<\/p>;\n\n return (\n
\n
{data.name}<\/h3>\n Email: {data.email}<\/p>\n
Telefon: {data.phone}<\/p>\n <\/div>\n );\n }}\n <\/DataFetcher>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n
Bu \u00f6rnekte, DataFetcher<\/code> bile\u015feni bir URL’den veri \u00e7eker ve loading<\/code>, error<\/code> ve data<\/code> state’lerini children<\/code> prop’u olarak ge\u00e7irilen fonksiyona arg\u00fcman olarak sunar. Bu, DataFetcher<\/code>‘\u0131n veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 soyutlamas\u0131n\u0131 ve i\u00e7eri\u011fin bu verilere g\u00f6re nas\u0131l render edilece\u011fini d\u0131\u015far\u0131daki bile\u015fenin kontrol etmesini sa\u011flar.<\/p>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n this.props.children<\/code>, React’ta bile\u015fen kompozisyonunun temel ta\u015flar\u0131ndan biridir. Onu kullanarak, daha esnek, yeniden kullan\u0131labilir ve okunabilir bile\u015fenler olu\u015fturabilirsiniz. D\u00fczen bile\u015fenlerinden sarmalay\u0131c\u0131lara, hatta geli\u015fmi\u015f render props desenlerine kadar geni\u015f bir yelpazede kullan\u0131m alan\u0131 sunar. React.Children<\/code> yard\u0131mc\u0131 fonksiyonlar\u0131 ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, children<\/code> i\u00e7eri\u011fini g\u00fcvenli ve etkili bir \u015fekilde y\u00f6netebilirsiniz.<\/p>\nBile\u015fenlerinizi tasarlarken, bir bile\u015fenin belirli bir i\u00e7eri\u011fi mi render etmesi gerekti\u011fini yoksa sadece bir “yuva” sa\u011flay\u0131p i\u00e7eri\u011fi d\u0131\u015far\u0131dan m\u0131 almas\u0131 gerekti\u011fini d\u00fc\u015f\u00fcnmek, this.props.children<\/code>‘\u0131 ne zaman kullanaca\u011f\u0131n\u0131za karar vermenize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\nH3 S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h4>\n 1. props.children<\/code> her zaman bir dizi midir?<\/strong>props.children<\/code> bir React eleman\u0131, bir metin dizesi, null<\/code>, undefined<\/code> veya bir dizi olabilir. Bu y\u00fczden do\u011frudan dizi metotlar\u0131n\u0131 (.map()<\/code>, .filter()<\/code>) kullanmak yerine React.Children<\/code> yard\u0131mc\u0131 fonksiyonlar\u0131n\u0131 kullanmak daha g\u00fcvenlidir.<\/p>\n2. props.children<\/code>‘\u0131 de\u011fi\u015ftirebilir miyim?<\/strong>React.Children.map<\/code> veya React.cloneElement<\/code> kullanarak, \u00e7ocuklar\u0131 yeni props’larla klonlayarak veya d\u00f6n\u00fc\u015ft\u00fcrerek yeni bir React eleman\u0131 dizisi olu\u015fturabilirsiniz.<\/p>\n3. children<\/code> yerine ba\u015fka bir prop ad\u0131 kullanabilir miyim?<\/strong>children<\/code>, bile\u015fenin a\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f etiketleri aras\u0131na yerle\u015ftirilen i\u00e7eri\u011fi temsil etmek i\u00e7in React taraf\u0131ndan standartla\u015ft\u0131r\u0131lm\u0131\u015f \u00f6zel bir add\u0131r. Bu deseni takip etmek, kodunuzun daha okunabilir ve anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flar.<\/p>\n4. props.children<\/code> ile “Render Props” deseni aras\u0131ndaki fark nedir?<\/strong>props.children<\/code>, genellikle statik veya yar\u0131-statik React elemanlar\u0131n\u0131 veya metni bir bile\u015fenin i\u00e7ine yerle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Render Props deseni ise props.children<\/code>‘\u0131 (veya ba\u015fka bir prop’u) bir fonksiyon olarak ge\u00e7irerek, sarmalay\u0131c\u0131 bile\u015fenin i\u00e7 state’ini veya metotlar\u0131n\u0131 d\u0131\u015far\u0131daki bile\u015fene aktarmas\u0131na olanak tan\u0131r. Bu, daha dinamik ve esnek i\u00e7erik olu\u015fturma imkan\u0131 sunar.<\/p>\n5. Bir bile\u015fenin children<\/code>‘\u0131 bo\u015fsa ne olur?<\/strong><\/MyComponent><\/code>), props.children<\/code>‘\u0131n de\u011feri undefined<\/code> veya null<\/code> olacakt\u0131r. Bile\u015feninizde bu durumu kontrol edip duruma g\u00f6re farkl\u0131 bir i\u00e7erik render edebilir veya hi\u00e7bir \u015fey render etmeyebilirsiniz.<\/p>\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React’ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma\nReact, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in birincil tercihlerden biri hal","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-34042","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
React'ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma - 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\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React'ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma\" \/>\n<meta property=\"og:description\" content=\"React'ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma React, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in birincil tercihlerden biri hal\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-10T06:41:32+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=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React’ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma\",\"datePublished\":\"2025-11-10T06:41:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/\"},\"wordCount\":1339,\"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\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/\",\"name\":\"React'ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-10T06:41:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React’ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma\"}]},{\"@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'ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma - 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\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"React'ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma","og_description":"React'ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma React, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in birincil tercihlerden biri hal","og_url":"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-10T06:41:32+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React’ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma","datePublished":"2025-11-10T06:41:32+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/"},"wordCount":1339,"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\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/","url":"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/","name":"React'ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-10T06:41:32+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/reactta-kompozisyon-this-props-children-ile-bilesen-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React’ta Kompozisyon: this.props.children ile Bile\u015fen Olu\u015fturma"}]},{"@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\/34042","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=34042"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34042\/revisions"}],"predecessor-version":[{"id":34043,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34042\/revisions\/34043"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}