You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/add-react-to-an-existing-project.md
+5-17Lines changed: 5 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,19 +20,11 @@ Diyelim ki `example.com`'da başka bir sunucu teknolojisi (Rails gibi) ile oluş
20
20
21
21
Kurulumu şu şekilde yapmanızı öneririz:
22
22
23
-
<<<<<<< HEAD
24
-
1. React tabanlı framework'lerden birini kullanarak **Uygulamanızın React kısmını oluşturun**[React tabanlı framework'ler](/learn/creating-a-react-app).
25
-
2.**Çerçevenizin yapılandırmasında *temel yol*** olarak `/some-app` belirleyin (nasıl olduğu burada: [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/)).
26
-
3.**Sunucunuzu veya bir proxy'yi** `/some-app/' altındaki tüm isteklerin React uygulamanız tarafından işleneceği şekilde yapılandırın.
23
+
1.**Uygulamanızın React kısmını**, [React tabanlı framework'lerden](/learn/start-a-new-react-project) birini kullanarak oluşturun.
24
+
2.**`/some-app` yolunu *base path* olarak belirtin** framework’ünüzün konfigürasyonunda (işte nasıl yapılır: [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/)).
25
+
3.**Sunucunuzu veya bir proxy’i yapılandırın** ki `/some-app/` altındaki tüm istekler React uygulamanız tarafından işlenebilsin.
27
26
28
-
Bu, uygulamanızın React kısmının bu çerçevelerde bulunan [en iyi uygulamalardan](/learn/creating-a-react-app#full-stack-frameworks) yararlanabilmesini sağlar.
29
-
=======
30
-
1.**Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
31
-
2.**Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [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/)).
32
-
3.**Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
33
-
34
-
This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
35
-
>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
27
+
Bu, React uygulamanızın o framework’lere dahil edilmiş [en iyi uygulamalardan yararlanmasını](/learn/build-a-react-app-from-scratch#consider-using-a-framework) sağlar.
36
28
37
29
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.
`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.
159
151
160
-
<<<<<<< HEAD
161
-
Mevcut bir projede React'i benimsediğinizde, küçük etkileşimli bileşenlerle (butonlar gibi) başlamak ve sonunda tüm sayfanız React ile oluşturulana kadar kademeli olarak “yukarı doğru” ilerlemek yaygındır. Bu noktaya ulaşırsanız, React'ten en iyi şekilde yararlanmak için hemen ardından [bir React framework'üne](/learn/creating-a-react-app) geçmenizi öneririz.
162
-
=======
163
-
When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to [a React framework](/learn/start-a-new-react-project) right after to get the most out of React.
164
-
>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
152
+
Mevcut bir projeye React eklerken, genellikle küçük etkileşimli bileşenlerle (örneğin butonlar) başlamak ve ardından yavaş yavaş “yukarı doğru ilerleyerek” sonunda tüm sayfanızı React ile oluşturmak yaygındır. Bu noktaya ulaşırsanız, React’ten en iyi şekilde yararlanmak için hemen [bir React framework’üne](/learn/start-a-new-react-project) geçmenizi öneririz.
165
153
166
154
## React Native'i mevcut bir yerel mobil uygulamada kullanma {/*using-react-native-in-an-existing-native-mobile-app*/}
Copy file name to clipboardExpand all lines: src/content/learn/synchronizing-with-effects.md
+2-7Lines changed: 2 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -732,13 +732,8 @@ Efektler içinde `veri getirme` çağrıları yazmak özellikle tamamen kullanı
732
732
733
733
Bu dezavantajlar listesi React'e özel değildir. Bu, herhangi bir kütüphane ile DOM'a eklenme sırasında yapılan veri getirme için geçerlidir. Yönlendirme (routing) de olduğu gibi, veri getirmenin de başarılı şekilde yapılması kolay değildir. Bu nedenle aşağıdaki yaklaşımları önermekteyiz:
734
734
735
-
<<<<<<< HEAD
736
-
- **Bir [framework](/learn/creating-a-react-app#full-stack-frameworks) kullanıyorsanız, yerleşik data fetch mekanizmasını kullanın.** Modern React framework'leri, verimli olan ve yukarıdaki tuzaklardan muzdarip olmayan entegre data fetch mekanizmalarına sahiptir.
737
-
- **Aksi takdirde, istemci taraflı bir cache kullanmayı veya oluşturmayı düşünebilirsiniz.** Popüler açık kaynak çözümleri arasında [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/) ve [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) bulunmaktadır. Kendi çözümünüzü de oluşturabilirsiniz, bu durumda kaputun altındaki *Effects*'i kullanırsınız, ancak istekleri tekilleştirmek, yanıtları önbelleğe almak ve ağ şelalelerinden kaçınmak için mantık eklersiniz (verileri önceden yükleyerek veya veri gereksinimlerini rotalara kaldırarak).
738
-
=======
739
-
- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
740
-
- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
741
-
>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
735
+
- **Eğer bir [framework](/learn/start-a-new-react-project#full-stack-frameworks) kullanıyorsanız, onun yerleşik veri getirme mekanizmasını kullanın.** Modern React framework’leri, verimli ve yukarıda belirtilen sorunlardan etkilenmeyen entegre veri getirme mekanizmalarına sahiptir.
736
+
- **Aksi takdirde, istemci taraflı bir cache kullanmayı veya oluşturmayı düşünebilirsiniz.** Popüler açık kaynak çözümler arasında [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/) ve [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) bulunmaktadır. Kendi çözümünüzü de geliştirebilirsiniz; bu durumda kaputun altındaki *Effects*’i kullanır, ancak istekleri tekilleştirmek, yanıtları önbelleğe almak ve ağ şelalelerinden kaçınmak (verileri önceden yükleyerek veya veri gereksinimlerini rotalara taşıyarak) için mantık eklersiniz.
742
737
743
738
Eğer bu yaklaşımlardan hiçbiri size uymuyorsa, Efektler içinde veri getirmeye devam edebilirsiniz.
Copy file name to clipboardExpand all lines: src/content/learn/typescript.md
+11-44Lines changed: 11 additions & 44 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,11 +20,7 @@ TypeScript, JavaScript kod tabanlarına tip tanımları eklemenin popüler bir y
20
20
21
21
## Kurulum {/*installation*/}
22
22
23
-
<<<<<<< HEAD
24
-
Tüm [üretim düzeyindeki React framework'leri](/learn/creating-a-react-app#full-stack-frameworks), TypeScript kullanımını destekler. Kurulum için framework’e özel kılavuzu takip edin:
25
-
=======
26
-
All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
27
-
>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
23
+
Tüm [üretim düzeyindeki React framework'leri](/learn/start-a-new-react-project#full-stack-frameworks), TypeScript kullanımını destekler. Kurulum için framework’e özel kılavuzu takip edin:
@@ -130,13 +126,9 @@ Bileşeninizin props’larını tanımlayan tip, ihtiyaç duyduğunuz kadar basi
130
126
131
127
`@types/react`'den gelen tip tanımlamaları, yerleşik Hooks için tipleri içerir, böylece bileşenlerinizde ek bir ayar yapmadan kullanabilirsiniz. Bu tipler, bileşeninizde yazdığınız kodu dikkate alacak şekilde tasarlanmıştır, bu nedenle çoğu zaman [çıkarılan tipler](https://www.typescriptlang.org/docs/handbook/type-inference.html)alırsınız ve ideal olarak tipleri sağlama detaylarıyla ilgilenmeniz gerekmez.
132
128
133
-
<<<<<<< HEAD
134
-
Ancak,Hooklar için tipleri nasıl sağlayacağımıza dair birkaç örneğe bakabiliriz.
135
-
=======
136
-
The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types.
129
+
`@types/react` paketindeki tip tanımlamaları, yerleşik Hook’lar için tipleri içerir; bu nedenle, bileşenlerinizde ek bir kurulum yapmadan bunları kullanabilirsiniz. Bu tipler, bileşeninizde yazdığınız kodu dikkate alacak şekilde tasarlanmıştır; bu sayede çoğu zaman [çıkarımsal tipler](https://www.typescriptlang.org/docs/handbook/type-inference.html) elde edersiniz ve ideal olarak tipleri manuel olarak belirtmenize gerek kalmaz.
137
130
138
-
However, we can look at a few examples of how to provide types for Hooks.
139
-
>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
131
+
Yine de, Hook’lar için tip sağlamaya dair birkaç örneğe bakabiliriz.
Bu, `enabled` değişkenine `boolean` tipini atayacak ve `setEnabled` fonksiyonu ya bir `boolean` argümanı ya da bir boolean döndüren bir fonksiyon alacaktır. Eğer duruma açıkça bir tip sağlamak istiyorsanız, bunu useState çağrısına bir tip argümanı vererek yapabilirsiniz:
Buteknik, anlamlı birvarsayılandeğerinizolduğundaişeyarar; ancakbazenvarsayılandeğerinizolmadığında`null`mantıklı gelebilir. Ancak, tipsistemininkodunuzuanlaması için, `createContext` üzerindeaçıkça`ContextShape | null`ayarlamanızgerekir.
302
-
=======
303
-
Thistechniqueworkswhenyouhaveadefaultvaluewhichmakessense-butthereareoccasionallycaseswhenyoudonot, andinthosecases`null`canfeelreasonableasadefaultvalue. However, toallowthetype-systemtounderstandyourcode, youneedtoexplicitlyset`ContextShape | null`onthe`createContext`.
304
-
>>>>>>>e07ac94bc2c1ffd817b13930977be93325e5bea9
287
+
Bu teknik, mantıklı bir varsayılan değeriniz olduğunda işe yarar — ancak bazen böyle bir değeriniz olmayabilir ve bu durumlarda `null` varsayılan değer olarak mantıklı görünebilir. Ancak, tip sisteminin kodunuzu anlayabilmesi için, `createContext` üzerinde açıkça `ContextShape | null` belirtmeniz gerekir.
305
288
306
289
Bu, bağlam tüketicileri için tipte `| null`u ortadan kaldırmanız gerektiği sorununu doğurur. Önerimiz, Hook’un varlığını çalışma zamanında kontrol etmesi ve mevcut değilse bir hata fırlatmasıdır:
[React Compiler](/learn/react-compiler)değerleri ve işlevleri otomatik olarak hafızaya alır ve manuel `useMemo`çağrılarına olan ihtiyacı azaltır. Derleyiciyi kullanarak hafızaya almayı otomatik olarak gerçekleştirebilirsiniz.
355
335
356
336
</Note>
357
337
358
-
The[`useMemo`](/reference/react/useMemo) Hookswillcreate/re-accessamemorizedvaluefromafunction call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
338
+
[`useMemo`](/reference/react/useMemo)Hook’u, bir fonksiyon çağrısından elde edilen **önbelleğe alınmış** (*memorized*) bir değeri **oluşturur veya yeniden erişir** ve yalnızca ikinci parametre olarak verilen bağımlılıklar (**dependencies**) değiştiğinde fonksiyonu yeniden çalıştırır. Hook’un dönüş değeri, ilk parametredeki fonksiyonun dönüş değerinden **türetilir** (*inferred*). Daha net olmak için Hook’a bir **type argument** sağlayabilirsiniz.
359
339
360
-
>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
361
340
```ts
362
341
// visibleTodos’un tipi, filterTodos’un dönen değerinden çıkarılır.
[`useCallback`](/reference/react/useCallback) ikinci parametre olarak geçirilen bağımlılıklar aynı olduğu sürece bir fonksiyona kararlı bir referans sağlar. `useMemo` gibi, fonksiyonun tipi ilk parametredeki fonksiyondan dönen değerden çıkarılır ve Hook’a bir tip argümanı sağlayarak daha açık olabilirsiniz.
370
-
=======
371
347
<Note>
372
348
373
-
[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useCallback`calls. You can use the compiler to handle memoization automatically.
349
+
[React Compiler](/learn/react-compiler)otomatik olarak değerleri ve fonksiyonları **memoizes** ederek manuel `useCallback`çağrılarına olan ihtiyacı azaltır. Memoizasyonu otomatik olarak yönetmek için compiler’ı kullanabilirsiniz.
374
350
375
351
</Note>
376
352
377
-
The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the Hook.
353
+
[`useCallback`](/reference/react/useCallback)ikinci parametreye verilen bağımlılıklar aynı kaldığı sürece bir fonksiyona sabit bir referans sağlar. `useMemo` gibi, fonksiyonun tipi ilk parametredeki fonksiyonun dönüş değerinden türetilir ve Hook’a bir tip argümanı sağlayarak daha açık olabilirsiniz.
TypeScript strict modunda çalışırken, `useCallback` kullanırken geri çağırma fonksiyonunuzun parametreleri için tip eklemeniz gerekir. Bunun nedeni, geri çağırma fonksiyonunun tipinin dönen değerden çıkarılmasıdır ve parametreler olmadan tip tam olarak anlaşılamaz.
388
363
389
-
<<<<<<< HEAD
390
-
Kod stili tercihlerine bağlı olarak, geri çağırmayı tanımlarken aynı anda olay işleyici için tip sağlamak amacıyla React tiplerinden `*EventHandler` fonksiyonlarını kullanabilirsiniz:
391
-
=======
392
-
Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback:
393
-
>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
364
+
Kod stil tercihinize bağlı olarak, callback’i tanımlarken aynı zamanda event handler için tipi belirtmek üzere React tiplerinden `*EventHandler` fonksiyonlarını kullanabilirsiniz:
Dikkat edilmesi gereken bir nokta, TypeScript’i kullanarak children’ın belirli bir tipteki JSX öğeleri olduğunu tanımlayamayacağınızdır; bu nedenle yalnızca `<li>` children’ları kabul eden bir bileşeni tanımlamak için tip sistemini kullanamazsınız.
478
-
=======
479
-
Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children.
480
-
>>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
447
+
Not: Çocukların belirli bir JSX türü olduğunu TypeScript ile tanımlayamazsınız; bu nedenle, sadece `<li>` çocuklarını kabul eden bir bileşeni tip sistemiyle tanımlayamazsınız.
481
448
482
449
`React.ReactNode` ve `React.ReactElement` örneklerini tip denetleyicisi ile birlikte [`bu TypeScript playground`](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA)’ında görebilirsiniz.
0 commit comments