Merge pull request #504 from reactjs/alioguzhan/hooks

translate hooks

src/components/Layout/Footer.tsx

@@ -288,50 +288,52 @@ export function Footer() {
         </div>
         <div className="flex flex-col">
           <FooterLink href="/learn" isHeader={true}>
-            Learn React
+            React Öğrenin
           </FooterLink>
           <FooterLink href="/learn/">Quick Start</FooterLink>
           <FooterLink href="/learn/installation">Installation</FooterLink>
           <FooterLink href="/learn/describing-the-ui">
-            Describing the UI
+            Kullanıcı Arayüzünü Tanımlama
           </FooterLink>
           <FooterLink href="/learn/adding-interactivity">
-            Adding Interactivity
+            Etkileşim Ekleme
           </FooterLink>
-          <FooterLink href="/learn/managing-state">Managing State</FooterLink>
-          <FooterLink href="/learn/escape-hatches">Escape Hatches</FooterLink>
+          <FooterLink href="/learn/managing-state">
+            State&apos;i Yönetmek
+          </FooterLink>
+          <FooterLink href="/learn/escape-hatches">Kaçış Yolları</FooterLink>
         </div>
         <div className="flex flex-col">
           <FooterLink href="/reference/react" isHeader={true}>
-            API Reference
+            API Referansı
           </FooterLink>
           <FooterLink href="/reference/react">React APIs</FooterLink>
           <FooterLink href="/reference/react-dom">React DOM APIs</FooterLink>
         </div>
         <div className="md:col-start-2 xl:col-start-4 flex flex-col">
           <FooterLink href="/community" isHeader={true}>
-            Community
+            Topluluk
           </FooterLink>
           <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md">
-            Code of Conduct
+            Davranış Kuralları
           </FooterLink>
-          <FooterLink href="/community/team">Meet the Team</FooterLink>
+          <FooterLink href="/community/team">Takımla Tanışın</FooterLink>
           <FooterLink href="/community/docs-contributors">
-            Docs Contributors
+            Dokümantasyona Katkıda Bulunanlar
           </FooterLink>
           <FooterLink href="/community/acknowledgements">
-            Acknowledgements
+            Katkıda Bulunanlar
           </FooterLink>
         </div>
         <div className="flex flex-col">
-          <FooterLink isHeader={true}>More</FooterLink>
+          <FooterLink isHeader={true}>Daha Fazlası</FooterLink>
           <FooterLink href="/blog">Blog</FooterLink>
           <FooterLink href="https://reactnative.dev/">React Native</FooterLink>
           <FooterLink href="https://opensource.facebook.com/legal/privacy">
-            Privacy
+            Gizliik
           </FooterLink>
           <FooterLink href="https://opensource.fb.com/legal/terms/">
-            Terms
+            Şartlar
           </FooterLink>
           <div className="flex flex-row mt-8 gap-x-2">
             <ExternalLink

src/components/Layout/TopNav/TopNav.tsx

@@ -281,15 +281,15 @@ export default function TopNav({
             <div className="text-base justify-center items-center gap-1.5 flex 3xl:flex-1 flex-row 3xl:justify-end">
               <div className="mx-2.5 gap-1.5 hidden lg:flex">
                 <NavItem isActive={section === 'learn'} url="/learn">
-                  Learn
+                  Öğren
                 </NavItem>
                 <NavItem
                   isActive={section === 'reference'}
                   url="/reference/react">
-                  Reference
+                  Referans
                 </NavItem>
                 <NavItem isActive={section === 'community'} url="/community">
-                  Community
+                  Topluluk
                 </NavItem>
                 <NavItem isActive={section === 'blog'} url="/blog">
                   Blog
@@ -360,17 +360,17 @@ export default function TopNav({
                 <Suspense fallback={null}>
                   <div className="ps-3 xs:ps-5 xs:gap-0.5 xs:text-base overflow-x-auto flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
                     <NavItem isActive={section === 'learn'} url="/learn">
-                      Learn
+                      Öğren
                     </NavItem>
                     <NavItem
                       isActive={section === 'reference'}
                       url="/reference/react">
-                      Reference
+                      Referans
                     </NavItem>
                     <NavItem
                       isActive={section === 'community'}
                       url="/community">
-                      Community
+                      Topluluk
                     </NavItem>
                     <NavItem isActive={section === 'blog'} url="/blog">
                       Blog

src/content/reference/react/hooks.md

@@ -1,23 +1,22 @@
 ---
-title: "Built-in React Hooks"
+title: "Yerleşik React Hook'ları"
 ---
 
 <Intro>
 
-*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
-
+*Hook'lar*, bileşenlerinizde farklı React özelliklerini kullanmanızı sağlar. Yerleşik Hook'ları kullanabilir ya da kendi Hook'larınızı oluşturmak için onları birleştirebilirsiniz. Bu sayfa, React'teki tüm yerleşik Hook'ları listeler.
 </Intro>
 
 ---
 
-## State Hooks {/*state-hooks*/}
+## State Hook'ları {/*state-hooks*/}
 
-*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
+*State* bir bileşenin [kullanıcı girdisi gibi bir bilgiyi "hatırlamasını"](/learn/state-a-components-memory) sağlar. Örneğin, bir form bileşeni input değerini saklamak için state kullanabilirken, bir resim galerisi bileşeni de seçilen resim indeksini saklamak için state kullanabilir.
 
-To add state to a component, use one of these Hooks:
+Bir bileşene state eklemek için bu Hook'lardan birini kullanın:
 
-* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
-* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
+* [`useState`](/reference/react/useState) direkt olarak güncelleyebileceğiniz bir state değişkeni bildirir.
+* [`useReducer`](/reference/react/useReducer) [reducer fonksiyonu](/learn/extracting-state-logic-into-a-reducer) ile güncellenebilen bir state değişkeni bildirir.
 
 ```js
 function ImageGallery() {
@@ -27,11 +26,11 @@ function ImageGallery() {
 
 ---
 
-## Context Hooks {/*context-hooks*/}
+## Context Hook'ları {/*context-hooks*/}
 
-*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
+*Context*, bir bileşenin [bilgiyi prop olarak geçirmeden uzaktaki üst bileşenlerden almasını](/learn/passing-props-to-a-component) sağlar. Örneğin, uygulamanızın en üst düzey bileşeni, derinliğine bakılmaksızın tüm alt bileşenlere geçerli UI temasını iletebilir.
 
-* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
+* [`useContext`](/reference/react/useContext) bir context değerini okur ve abone olur.
 
 ```js
 function Button() {
@@ -41,12 +40,12 @@ function Button() {
 
 ---
 
-## Ref Hooks {/*ref-hooks*/}
+## Ref Hook'ları {/*ref-hooks*/}
 
-*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
+*Ref'ler* bir bileşenin [render için kullanılmayan bazı bilgileri](/learn/referencing-values-with-refs) (örneğin, bir DOM düğümü veya bir timeout ID) tutmasını sağlar. State ile farklı olarak, bir ref'i güncellemek bileşeninizi yeniden render etmez. Ref'ler, React paradigmasından kaçmak için kullanılır. Dahili tarayıcı API'lari gibi React dışı sistemlerle çalışmanız gerektiğinde kullanışlıdır.
 
-* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
-* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
+* [`useRef`](/reference/react/useRef) bir ref bildirir. İçinde herhangi bir değeri tutabilirsiniz, ancak genellikle bir DOM düğümü tutmak için kullanılır.
+* [`useImperativeHandle`](/reference/react/useImperativeHandle) bileşeninizin dışarıya açtığı bir ref'i özelleştirmenizi sağlar. Bu nadiren kullanılır.
 
 ```js
 function Form() {
@@ -56,11 +55,11 @@ function Form() {
 
 ---
 
-## Effect Hooks {/*effect-hooks*/}
+## Efekt Hook'ları {/*effect-hooks*/}
 
-*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
+*Effect'ler*, bir bileşenin [harici sistemlere bağlanmasını ve onlarla senkronize olmasını](/learn/synchronizing-with-effects) sağlar. Bu sistemler; ağ, tarayıcı DOM'u, animasyonlar, farklı bir UI kütüphanesi kullanılarak yazılmış araçlar ve diğer React dışı kodları kapsar.
 
-* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
+* [`useEffect`](/reference/react/useEffect) bir bileşeni harici bir sisteme bağlar.
 
 ```js
 function ChatRoom({ roomId }) {
@@ -72,23 +71,23 @@ function ChatRoom({ roomId }) {
   // ...
 ```
 
-Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+Effekler React paradigmasından kaçmak için kullanılır. Uygulamanızın veri akışını düzenlemek için Efektleri kullanmayın. Eğer harici bir sistemle etkileşimde değilseniz, [bir Efekte ihtiyacınız olmayabilir.](/learn/you-might-not-need-an-effect)
 
-There are two rarely used variations of `useEffect` with differences in timing:
+Zamanlama noktasında farklılıları olan ve nadiren kullanılan iki `useEffect` varyasyonu vardır:
 
-* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
-* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
+* [`useLayoutEffect`](/reference/react/useLayoutEffect) tarayıcı ekrana tekrar çizim yapmadan önce çalışır. Yerleşim (layout) hesaplamalarını burada yapabilirsiniz.
+* [`useInsertionEffect`](/reference/react/useInsertionEffect) React DOM'a değişiklik yapmadan önce çalışır. Kütüphaneler bu noktada dinamik olarak CSS ekleyebilir.
 
 ---
 
-## Performance Hooks {/*performance-hooks*/}
+## Performans Hook'ları {/*performance-hooks*/}
 
-A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
+Tekrar render etme performansını optimize etmenin yaygın bir yolu da gereksiz işlemleri atlamaktır. Örneğin, React'e önbelleğe alınmış bir hesaplamayı yeniden kullanmasını veya verilerin, önceki render'dan bu yana değişmediyse, yeniden render edilmesini atlamasını söyleyebilirsiniz.
 
-To skip calculations and unnecessary re-rendering, use one of these Hooks:
+Hesaplamaları ve gereksiz yeniden render etmeleri atlamak için bu Hook'lardan birini kullanın:
 
-- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
-- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
+- [`useMemo`](/reference/react/useMemo); pahalı bir hesaplamanın sonucunu önbelleğe almanızı sağlar.
+- [`useCallback`](/reference/react/useCallback); bir fonksiyon tanımının, optimize edilmiş bir bileşene iletilmeden önce, önbelleğe alınmasını sağlar.
 
 ```js
 function TodoList({ todos, tab, theme }) {
@@ -97,22 +96,22 @@ function TodoList({ todos, tab, theme }) {
 }
 ```
 
-Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
+Bazen yeniden render etmeyi atlayamazsınız çünkü ekranın gerçekten güncellenmesi gerekir. Bu durumda, kullanıcı arayüzünü engellemesi gerekmeyen güncellemeleri (bir grafiği güncellemek gibi), eşzamanlı olması gereken güncellemelerden (örneğin bir inputa yazmak) ayırarak performansı artırabilirsiniz.
 
-To prioritize rendering, use one of these Hooks:
+Render etme işlemini önceliklendirmek için bu Hook'lardan birini kullanın:
 
-- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
-- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
+- [`useTransition`](/reference/react/useTransition) bir state geçişini engellemeyen (non-blocking) olarak işaretleyerek diğer güncellemelerin araya girmesine izin verir.
+- [`useDeferredValue`](/reference/react/useDeferredValue) arayüzün kritik olmayan bir kısmının güncellenmesini ertelemenize ve önce diğer bölümlerin güncellenmesine izin vermenize olanak sağlar.
 
 ---
 
-## Resource Hooks {/*resource-hooks*/}
+## Kaynak Hook'ları {/*resource-hooks*/}
 
-*Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context.
+*Kaynaklar* bir bileşenin, state'inin bir parçası olmadan da erişebileceği verilerdir. Örneğin, bir bileşen bir Promise'den bir mesajı veya bir context'ten stil bilgilerini okuyabilir.
 
-To read a value from a resource, use this Hook:
+Bir kaynaktan bir değer okumak için bu Hook'u kullanın:
 
-- [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+- [`use`](/reference/react/use) [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) ya da [context](/learn/passing-data-deeply-with-context) gibi bir kaynakğın değerini okumanızı sağlar.
 
 ```js
 function MessageComponent({ messagePromise }) {
@@ -124,16 +123,16 @@ function MessageComponent({ messagePromise }) {
 
 ---
 
-## Other Hooks {/*other-hooks*/}
+## Diğer Hook'lar {/*other-hooks*/}
 
-These Hooks are mostly useful to library authors and aren't commonly used in the application code.
+Bu Hook'lar genellikle kütüphane geliştiricileri için kullanışlıdır ve uygulama kodlarında yaygın olarak kullanılmazlar.
 
-- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
-- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
-- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
+- [`useDebugValue`](/reference/react/useDebugValue) React DevTools'da, kendi yazdığınız hook için özel bir etiket belirlemenizi sağlar.
+- [`useId`](/reference/react/useId) bir bileşenin kendisiyle benzersiz bir ID ilişkilendirmesini sağlar. Genellikle erişilebilirlik API'ları ile kullanılır.
+- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) bir bileşenin harici bir depoya abone olmasını sağlar.
 
 ---
 
-## Your own Hooks {/*your-own-hooks*/}
+## Kendi Hook'larınız {/*your-own-hooks*/}
 
-You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
+Ayrıca, [kendi özel Hook'larınızı](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) JavaScript fonksiyonları olarak tanımlayabilirsiniz.

src/sidebarCommunity.json

@@ -1,42 +1,42 @@
 {
-  "title": "Community",
+  "title": "Topluluk",
   "path": "/community",
   "routes": [
     {
       "hasSectionHeader": true,
-      "sectionHeader": "GET INVOLVED"
+      "sectionHeader": "Dahil Olun"
     },
     {
-      "title": "Community",
+      "title": "Topluluk",
       "path": "/community",
       "skipBreadcrumb": true,
       "routes": [
         {
-          "title": "React Conferences",
+          "title": "React Konferansları",
           "path": "/community/conferences"
         },
         {
-          "title": "React Meetups",
+          "title": "React Buluşmaları",
           "path": "/community/meetups"
         },
         {
-          "title": "React Videos",
+          "title": "React Videoları",
           "path": "/community/videos"
         },
         {
-          "title": "Meet the Team",
+          "title": "Takımla Tanışın",
           "path": "/community/team"
         },
         {
-          "title": "Docs Contributors",
+          "title": "Dokümantasyon Ekibi",
           "path": "/community/docs-contributors"
         },
         {
-          "title": "Acknowledgements",
+          "title": "Katkıda Bulunanlar",
           "path": "/community/acknowledgements"
         },
         {
-          "title": "Versioning Policy",
+          "title": "Sürüm Politikası",
           "path": "/community/versioning-policy"
         }
       ]