diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index d2dd8ce5f..2c3681ffc 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -1,5 +1,5 @@ --- -title: Adding Interactivity +title: Etkileşim Ekleme --- @@ -10,19 +10,19 @@ Ekrandaki bazı şeyler kullanıcı girdisine yanıt olarak güncellenir. Örne -* [How to handle user-initiated events](/learn/responding-to-events) -* [How to make components "remember" information with state](/learn/state-a-components-memory) -* [How React updates the UI in two phases](/learn/render-and-commit) -* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot) -* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates) -* [How to update an object in state](/learn/updating-objects-in-state) -* [How to update an array in state](/learn/updating-arrays-in-state) +* [Kullanıcı tarafından başlatılan olaylar nasıl ele alınır](/learn/responding-to-events) +* [State kullanılarak bileşenlerin bilgiyi "hatırlaması" nasıl sağlanır](/learn/state-a-components-memory) +* [React kullanıcı arayüzünü iki aşamada nasıl günceller](/learn/render-and-commit) +* [State neden onu değiştirdiğiniz anda güncellenmez](/learn/state-as-a-snapshot) +* [Birden çok state güncellemesi sıraya nasıl alınır](/learn/queueing-a-series-of-state-updates) +* [State içerisindeki nesne nasıl güncellenir](/learn/updating-objects-in-state) +* [State içerisindeki dizi nasıl güncellenir](/learn/updating-arrays-in-state) ## Olaylara tepki verme {/*responding-to-events*/} -React, JSX'inize *olay yöneticileri* eklemenize olanak tanır. Olay yöneticileri (event handler); tıklama, üzerine gelme (hover), form girdilerine odaklanma gibi kullanıcı aksiyonlarına tepki vermek için tetiklenecek olan sahip olduğunuz fonksiyonlardır. +React, JSX'inize *olay yöneticileri* eklemenize olanak tanır. Olay yöneticileri; tıklama, üzerine gelme (hover), form girdilerine odaklanma gibi kullanıcı aksiyonlarına tepki vermek için tetiklenecek olan fonksiyonlarınızdır. `

+ {sculpture.artist}'den {sculpture.name} - by {sculpture.artist}

- ({index + 1} of {sculptureList.length}) + ({index + 1}/{sculptureList.length})

{showMore &&

{sculpture.description}

} -Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction. +**[State: Bir Bileşenin Hafızası](/learn/state-a-components-memory)** sayfasını okuyarak bir değeri nasıl hatırlayacağınızı ve etkileşim ile o değeri nasıl güncelleyeceğinizi öğrenin. -## Render and commit {/*render-and-commit*/} +## Render et ve işle {/*render-and-commit*/} -Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Bileşenleriniz ekranda gösterilmeden önce, React tarafından render edilmek zorundadırlar. Bu işlemdeki adımları anlamak, kodunuzun nasıl çalıştığını düşünmenize ve davranışını açıklamanıza yardımcı olacaktır. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Bileşenlerinizin mutfakta malzemelerden lezzetli yemekler hazırlayan aşçılar olduğunu hayal edin. Bu senaryoda React, müşterilerin siparişlerini alan ve bu siparişleri sunan garsondur. Kullanıcı arayüzünü isteme ve sunma sürecinin üç aşaması vardır: -1. **Triggering** a render (delivering the diner's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. Bir render **tetiklemek** (müşterinin siparişinin mutfaktaki aşçıya iletilmesi) +2. Bileşeni **render etmek** (siparişin mutfakta hazırlanması) +3. DOM'a **işlemek** (siparişin masaya götürülmesi) - - - + + + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +**[Render et ve İşle](/learn/render-and-commit)** sayfasını okuyarak kullanıcı arayüzü güncellemesinin yaşam döngüsünü öğrenin. -## State as a snapshot {/*state-as-a-snapshot*/} +## Anlık görüntü olarak state {/*state-as-a-snapshot*/} -Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! +Sıradan JavaScript değişkenlerinin yanı sıra, React state'i daha çok anlık bir görüntü olarak davranır. Bu değişkeni ayarlamak zaten mevcut state değişkenini değiştirmez onun yerine yeniden render tetikler. Bu ilk başta şaşırtıcı gelebilir! ```js console.log(count); // 0 -setCount(count + 1); // Request a re-render with 1 -console.log(count); // Still 0! +setCount(count + 1); // 1 ile yeniden render iste +console.log(count); // Hala 0! ``` -This behavior help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later? +Bu davranış, ince hatalardan kaçınmanıza yardımcı olur. Aşağıda küçük bir mesajlaşma uygulaması vardır. "Gönder" butonuna tıkladıktan *sonra* alıcıyı Bob ile değiştirin ve ne olacağını tahmin etmeye çalışın. 5 saniye sonra kimin ismi `alert` kutusunda çıkacaktır? @@ -274,19 +274,19 @@ import { useState } from 'react'; export default function Form() { const [to, setTo] = useState('Alice'); - const [message, setMessage] = useState('Hello'); + const [message, setMessage] = useState('Merhaba'); function handleSubmit(e) { e.preventDefault(); setTimeout(() => { - alert(`You said ${message} to ${to}`); + alert(`${to}'a ${message} dediniz`); }, 5000); } return (