Sync with react.dev @ 6fc98ff

anilcanboga · web-flow · commit 2c68a8a3c1e9 · 2025-02-03T23:18:42.000+03:00
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
@@ -45,11 +45,7 @@ Modüler bir JavaScript ortamı, tüm kodunuzu tek bir dosyaya yazmak yerine, Re
 
 * **Uygulamanız zaten `import` ifadelerini kullanan dosyalara bölünmüşse,** mevcut kurulumunuzu kullanmayı deneyin. JS kodunuza `<div />` yazmanın bir syntax hatasına neden olup olmadığını kontrol edin. Bir syntax hatasına neden olursa, [JavaScript kodunuzu Babel ile dönüştürmeniz](https://babeljs.io/setup), ve JSX kullanmak için [Babel React ön ayarını](https://babeljs.io/docs/babel-preset-react) etkinleştirmeniz gerekebilir.
 
-<<<<<<< HEAD
-* **Uygulamanızın JavaScript modüllerini derlemek için mevcut bir kurulumu yoksa,** [Vite](https://vitejs.dev/) ile kurun.  Vite topluluğu, Rails, Django ve Laravel dahil olmak üzere [backend kütüphaneleri ile birçok entegrasyonu](https://github.com/vitejs/awesome-vite#integrations-with-backends) sürdürür. Backend kütüphaneniz listelenmemişse, Vite yapılarını arka ucunuzla manuel olarak entegre etmek için [bu kılavuzu izleyin](https://vitejs.dev/guide/backend-integration.html).
-=======
-* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vite.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vite.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
->>>>>>> 6fc98fffdaad3b84e6093d1eb8def8f2cedeee16
+* **Uygulamanızın JavaScript modüllerini derlemek için mevcut bir kurulumu yoksa,** [Vite](https://vite.dev/) ile kurun. Vite topluluğu, Rails, Django ve Laravel dahil olmak üzere [backend frameworkleriyle birçok entegrasyonu](https://github.com/vitejs/awesome-vite#integrations-with-backends) sürdürmektedir. Backend framework'ünüz listelenmemişse, Vite derlemelerini arka ucunuzla manuel olarak entegre etmek için [bu kılavuzu izleyin](https://vite.dev/guide/backend-integration.html).
 
 Kurulumunuzun çalışıp çalışmadığını kontrol etmek için proje klasörünüzde şu komutu çalıştırın:
 
@@ -89,11 +85,162 @@ Sayfanızın tüm içeriği “Merhaba dünya!” ile değiştirildiyse, her şe
 
 <Note>
 
-<<<<<<< HEAD
-Modüler bir JavaScript ortamını mevcut bir projeye ilk kez entegre etmek gözünüzü korkutabilir ama buna değer! Takılırsanız, [topluluk kaynaklarımızı](/community) ya da [Vite Chat'imizi](https://chat.vitejs.dev/) deneyin.
-=======
-Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vite.dev/).
->>>>>>> 6fc98fffdaad3b84e6093d1eb8def8f2cedeee16
+Modüler bir JavaScript ortamını mevcut bir projeye ilk kez entegre etmek göz korkutucu gelebilir, ancak buna değer! Eğer takılırsanız, [topluluk kaynakları](/community) veya [Vite Chat](https://chat.vite.dev/) adreslerini deneyin.
+
+</Note>
+
+### 2. Adım: React bileşenlerini sayfanın herhangi bir yerinde render edin {/*step-2-render-react-components-anywhere-on-the-page*/}
+
+Önceki adımda, bu kodu ana dosyanızın en üstüne koyarsnız:
+
+```js
+import { createRoot } from 'react-dom/client';
+
+// Var olan HTM içeriğini temizleyin
+document.body.innerHTML = '<div id="app"></div>';
+
+// Bunun yerine React bileşeninizi render edin
+const root = createRoot(document.getElementById('app'));
+root.render(<h1>Hello, world</h1>);
+```
+
+Tabii ki, aslında mevcut HTML içeriğini temizlemek istemezsiniz!
+
+Bu kodu silin.
+
+Bunun yerine, muhtemelen React bileşenlerinizi HTML'nizin belirli yerlerinde oluşturmak istiyorsunuz. HTML sayfanızı (veya onu oluşturan sunucu şablonlarını) açın ve herhangi bir etikete benzersiz bir [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) niteliği ekleyin, örneğin:
+
+```html
+<!-- ... html'inizin herhangi bir yeri ... -->
+<nav id="navigation"></nav>
+<!-- ... daha fazla html ... -->
+```
+
+Bu, [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) ile o HTML öğesini bulmanızı ve içinde kendi React bileşeninizi render edebilmeniz için onu [`createRoot'a`](/reference/react-dom/client/createRoot) geçirmenizi sağlar:
+
+<Sandpack>
+
+```html public/index.html
+<!DOCTYPE html>
+<html>
+  <head><title>My app</title></head>
+  <body>
+    <p>This paragraph is a part of HTML.</p>
+    <nav id="navigation"></nav>
+    <p>This paragraph is also a part of HTML.</p>
+  </body>
+</html>
+```
+
+```js src/index.js active
+import { createRoot } from 'react-dom/client';
+
+function NavigationBar() {
+  // YAPILACAK: Bir navigasyon barı oluşturun
+  return <h1>Hello from React!</h1>;
+}
+
+const domNode = document.getElementById('navigation');
+const root = createRoot(domNode);
+root.render(<NavigationBar />);
+```
+
+</Sandpack>
+
+`index.html'deki` orijinal HTML içeriğinin nasıl korunduğuna dikkat edin, ancak kendi `NavigationBar` React bileşeniniz artık HTML'nizden `<nav id="navigation">` içinde görünüyor. React bileşenlerini mevcut bir HTML sayfasında render etme hakkında daha fazla bilgi edinmek için [`createRoot` dökümantasyonunu](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) okuyun.
+
+Mevcut bir projede React'i kullandığınızda, küçük etkileşimli bileşenlerle (butonlar gibi) başlamak ve ardından, sonunda tüm sayfanız React ile oluşturulana kadar yavaş yavaş "yukarı doğru ilerlemeye" devam etmek yaygındır. Bu noktaya ulaşırsanız, React'ten en iyi şekilde yararlanmak için hemen ardından bir [bir React kütüphanesine](/learn/start-a-new-react-project) geçmenizi öneririz.
+
+## React Native'i mevcut bir yerel mobil uygulamada kullanma {/*using-react-native-in-an-existing-native-mobile-app*/}
+
+[React Native](https://reactnative.dev/) ayrıca mevcut yerel uygulamalara kademeli olarak entegre edilebilir. Android (Java veya Kotlin) veya iOS (Objective-C veya Swift) için mevcut bir yerel uygulamanız varsa, ona bir React Native ekranı eklemek için [bu kılavuzu inceleyin](https://reactnative.dev/docs/integration-with-existing-apps).---
+title: Var Olan Bir Projeye React Eklemek
+---
+
+<Intro>
+
+Mevcut projenize biraz etkileşim eklemek istiyorsanız, onu React'te yeniden yazmak zorunda değilsiniz. React'i mevcut yığınınıza ekleyin ve etkileşimli React bileşenlerini istediğiniz yerde render edin.
+
+</Intro>
+
+<Note>
+
+**Yerel geliştirme ortamınız için [Node.js](https://nodejs.org/en/) yüklemeniz gerekmektedir.** React'i çevrimiçi olarak veya basit bir HTML sayfası ile [deneyebilseniz de](/learn/installation#try-react), gerçekte geliştirme için kullanmak isteyeceğiniz JavaScript araçlarının çoğu Node.js gerektirir.
+
+</Note>
+
+## Mevcut web sitenizin tüm alt yolu için React kullanımı {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
+
+Diyelim ki `example.com`'da başka bir sunucu teknolojisi (Rails gibi) ile oluşturulmuş mevcut bir web uygulamanız var ve `example.com/some-app/` ile başlayan tüm rotaları tamamen React ile oluşturmak istiyorsunuz.
+
+Kurulumu şu şekilde yapmanızı öneririz:
+
+1. **Uygulamanızın React kısmını oluşturun** [React tabanlı frameworklerden](/learn/start-a-new-react-project) birini kullanarak.
+2. **/some-app'i *temel yol* olarak belirtin** framework'ünüzün yapılandırmasında (işte nasıl yapılacağı: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
+3. **Sunucunuzu veya bir proxy'yi yapılandırın** böylece `/some-app/` altındaki tüm istekler React uygulamanız tarafından işlenir.
+
+Bu, uygulamanızın React bölümünün bu kütüphanelerde oluşturulmuş [en iyi uygulamalardan yararlanabilmesini sağlar](/learn/start-a-new-react-project#can-i-use-react-without-a-framework).
+
+Birçok React tabanlı kütüphaneler, ön ve arka yüz geliştirmede kullanılabilir ve React uygulamanızın sunucudan yararlanmasına izin verir. Ancak, sunucuda JavaScript çalıştıramasanız veya istemeseniz bile aynı yaklaşımı kullanabilirsiniz. Bu durumda HTML/CSS/JS dışa aktarımını (Next.js için [`next export` çıktısı](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby için varsayılan) bunun yerine `/some-app/` konumunda sunun.
+
+## Mevcut sayfanızın bir bölümü için React kullanımı {/*using-react-for-a-part-of-your-existing-page*/}
+
+Diyelim ki başka bir teknoloji (Rails gibi bir sunucu veya Backbone gibi bir istemci) ile oluşturulmuş mevcut bir sayfanız var ve o sayfada bir yerde etkileşimli React bileşenleri render etmek istiyorsunuz. Bu, React'i entegre etmenin yaygın bir yoludur - aslında, Meta'daki çoğu React kullanımı yıllarca bu şekilde görünüyordu!
+
+Bunu iki adımda yapabilirsiniz:
+
+1. [JSX syntax'inizi](/learn/writing-markup-with-jsx) kullanmanıza, kodunuzu [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) syntax'i ile modüllere ayırmanıza ve [npm](https://www.npmjs.com/) paket kayıt defterinden paketleri (örneğin, React) kullanmanıza izin veren  **bir JavaScript ortamı kurun**.
+2. React bileşenlerinizi sayfada görmek istediğiniz yerde **render edin**.
+
+Kesin yaklaşımınız, mevcut sayfa kurulumunuza bağlıdır, bu nedenle bazı ayrıntılara göz atalım.
+
+### 1. Adım: Modüler bir JavaScript ortamı kurun {/*step-1-set-up-a-modular-javascript-environment*/}
+
+Modüler bir JavaScript ortamı, tüm kodunuzu tek bir dosyaya yazmak yerine, React bileşenlerinizi ayrı ayrı dosyalara yazmanıza olanak tanır. Ayrıca, diğer geliştiriciler tarafından [npm](https://www.npmjs.com/) kayıt defterinde yayınlanan tüm harika paketleri, React'in kendisi de dahil olmak üzere kullanmanızı sağlar! Bunu nasıl yapacağınız mevcut kurulumunuza bağlıdır:
+
+* **Uygulamanız zaten `import` ifadelerini kullanan dosyalara bölünmüşse,** mevcut kurulumunuzu kullanmayı deneyin. JS kodunuza `<div />` yazmanın bir syntax hatasına neden olup olmadığını kontrol edin. Bir syntax hatasına neden olursa, [JavaScript kodunuzu Babel ile dönüştürmeniz](https://babeljs.io/setup), ve JSX kullanmak için [Babel React ön ayarını](https://babeljs.io/docs/babel-preset-react) etkinleştirmeniz gerekebilir.
+
+* **Uygulamanızın JavaScript modüllerini derlemek için mevcut bir kurulumu yoksa,** [Vite](https://vite.dev/) ile kurun. Vite topluluğu, Rails, Django ve Laravel dahil olmak üzere [backend frameworkleriyle birçok entegrasyonu](https://github.com/vitejs/awesome-vite#integrations-with-backends) sürdürmektedir. Backend framework'ünüz listelenmemişse, Vite derlemelerini arka ucunuzla manuel olarak entegre etmek için [bu kılavuzu izleyin](https://vite.dev/guide/backend-integration.html).
+
+Kurulumunuzun çalışıp çalışmadığını kontrol etmek için proje klasörünüzde şu komutu çalıştırın:
+
+<TerminalBlock>
+npm install react react-dom
+</TerminalBlock>
+
+Ardından, ana JavaScript dosyanızın en üstüne şu kod satırlarını ekleyin (buna `index.js` veya `main.js` adı verilebilir):
+
+<Sandpack>
+
+```html public/index.html hidden
+<!DOCTYPE html>
+<html>
+  <head><title>My app</title></head>
+  <body>
+    <!-- Mevcut sayfa içeriğiniz (bu örnekte, değiştiriliyor) -->
+    <div id="root"></div>
+  </body>
+</html>
+```
+
+```js src/index.js active
+import { createRoot } from 'react-dom/client';
+
+// Var olan HTM içeriğini temizleyin
+document.body.innerHTML = '<div id="app"></div>';
+
+// Bunun yerine React bileşeninizi render edin
+const root = createRoot(document.getElementById('app'));
+root.render(<h1>Hello, world</h1>);
+```
+
+</Sandpack>
+
+Sayfanızın tüm içeriği “Merhaba dünya!” ile değiştirildiyse, her şey yolunda gitti! Okumaya devam edin.
+
+<Note>
+
+Modüler bir JavaScript ortamını mevcut bir projeye ilk kez entegre etmek göz korkutucu gelebilir, ancak buna değer! Eğer takılırsanız, [topluluk kaynakları](/community) veya [Vite Chat](https://chat.vite.dev/) adreslerini deneyin.
 
 </Note>
 
diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md
@@ -26,11 +26,7 @@ Başlangıçta yönlendirme veya veri alımına ihtiyaç duymasanız bile, bunla
 
 **Bu sorunlar React'a özgü değildir. İşte bu yüzden Svelte'nin SvelteKit'i, Vue'nun Nuxt'ı ve daha fazlası vardır.** Bu sorunları kendi başınıza çözmek için, paketleyicinizi yönlendiricinizle ve veri alımı kütüphanenizle entegre etmeniz gerekecektir. İlk kurulumu çalıştırmak zor değildir, ancak zamanla büyüyen bir uygulamanın hızlı bir şekilde yüklenmesiyle ilgili birçok ince nokta vardır. Sayfanın gereken verilerle paralel olarak, mümkün olan en az uygulama kodunu göndermek isteyeceksiniz, ancak bunu tek bir istemci-sunucu turunda yapacaksınız. Muhtemelen sayfanın, progresif iyileştirmeyi desteklemek için JavaScript kodunuz çalışmadan önce etkileşimli olmasını isteyeceksiniz. Pazarlama sayfalarınız için JavaScript devre dışı bırakılsa bile her yerde barındırılabilen ve çalışabilen tamamen statik HTML dosyaları oluşturmak isteyebilirsiniz. Bu yetenekleri kendiniz oluşturmak gerçekten iş gerektirir.
 
-<<<<<<< HEAD
-**Bu sayfadaki React framework'leri, bu tür sorunları varsayılan olarak çözer ve sizden ekstra çalışma gerektirmeden bunları yapar.** Sizin için çok hafif başlamalarına ve ardından uygulamanızı ihtiyaçlarınızla birlikte ölçeklendirmelerine izin verirler. Her React framework'ünün bir topluluğu vardır, bu nedenle sorulara yanıt bulmak ve araçları yükseltmek daha kolaydır. Framework'ler ayrıca kodunuza yapı sağlar, böylece siz ve diğerleri farklı projeler arasında bağlam ve becerileri koruyabilirsiniz. Öte yandan, özel bir kurulumla desteklenmeyen bağımlılık sürümlerinde sıkışma olasılığı daha yüksektir ve esasen kendi framework'ünüzü oluşturacaksınız - her ne kadar topluluksuz ve yükseltme yolu olmayan bir framework olsa da (ve geçmişte yaptığımızlar gibi daha dağınık tasarlanmış).
-=======
-If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vite.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more.
->>>>>>> 6fc98fffdaad3b84e6093d1eb8def8f2cedeee16
+Uygulamanızın bu framework'ler tarafından iyi sunulmayan olağandışı kısıtlamaları varsa veya bu sorunları kendiniz çözmeyi tercih ediyorsanız, React ile kendi özel kurulumunuzu yapabilirsiniz. npm'den `react` ve `react-dom`u alın, [Vite](https://vite.dev/) veya [Parcel](https://parceljs.org/) gibi bir bundler ile özel derleme sürecinizi kurun ve yönlendirme, statik oluşturma veya sunucu tarafı oluşturma ve daha fazlası için ihtiyaç duyduğunuz diğer araçları ekleyin.
 
 Eğer hala ikna olmadıysanız veya uygulamanızın bu framework'ler tarafından iyi hizmet edilmeyen sıradışı kısıtlamaları varsa ve kendi özel kurulumunuzu oluşturmak istiyorsanız, sizi durduramayız - devam edin! `react` ve `react-dom`'u npm'den alın, [Vite](https://vitejs.dev/) veya [Parcel](https://parceljs.org/) gibi bir paketleyici ile özel derleme sürecinizi ayarlayın ve yönlendirme, statik üretim veya sunucu tarafı işleme ve daha fazlası için ihtiyaç duyduğunuz diğer araçları ekleyin.
 </DeepDive>
