diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 7d632e3c4..d55466d7d 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1,31 +1,31 @@
---
-title: 'Tutorial: Tic-Tac-Toe'
+title: 'Öğretici: Tic-Tac-Toe'
---
-You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you'll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React.
+Bu öğretici ile küçük bir tic-tac-toe oyunu yapacaksınız. Bu öğretici herhangi bir React bilgisi gerektirmez. Bu öğreticide öğreneceğiniz teknikler herhangi bir React uygulaması yapmak için gerekli olan temel tekniklerdir ve bunları tamamıyla anlamak React hakkında derinlemesine bir anlayış sağlayacaktır.
-This tutorial is designed for people who prefer to **learn by doing** and want to quickly try making something tangible. If you prefer learning each concept step by step, start with [Describing the UI.](/learn/describing-the-ui)
+Bu öğretici, **yaparak öğrenmeyi** tercih eden ve hızlı bir şekilde somut bir şeyler yapmayı isteyen kişiler için tasarlanmıştır. Eğer her konsepti adım adım öğrenmeyi tercih ediyorsanız, [Describing the UI.](/learn/describing-the-ui) sayfası ile başlayın.
-The tutorial is divided into several sections:
+Bu öğretici birçok bölüme ayrılmıştır:
-- [Setup for the tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial.
-- [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state.
-- [Completing the game](#completing-the-game) will teach you **the most common techniques** in React development.
-- [Adding time travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React.
+- [Öğretici için kurulum](#setup-for-the-tutorial) bölümü size öğreticiyi takip etmeniz için **bir başlangıç noktası** verecektir.
+- [Genel bakış](#overview) bölümü React'in **temellerini** öğretecektir: bileşenler, prop'lar ve state.
+- [Oyunu tamamlama](#completing-the-game) bölümü React ile geliştirme yaparken **sık kullanılan teknikleri** öğretecektir.
+- [Zaman yolculuğu ekleme](#adding-time-travel) bölümü React'in eşsiz gücüne **daha derin bir bakış** getirecektir.
-### What are you building? {/*what-are-you-building*/}
+### Ne yapıyorsunuz? {/*what-are-you-building*/}
-In this tutorial, you'll build an interactive tic-tac-toe game with React.
+Bu öğreticide, React ile interektif bir tic-tac-toe oyunu yapacaksınız.
-You can see what it will look like when you're finished here:
+İşimiz bittiği zaman nasıl bir şeyin ortaya çıkacağını burada görebilirsiniz:
@@ -57,9 +57,9 @@ function Board({ xIsNext, squares, onPlay }) {
const winner = calculateWinner(squares);
let status;
if (winner) {
- status = 'Winner: ' + winner;
+ status = 'Kazanan: ' + winner;
} else {
- status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+ status = 'Sıradaki oyuncu: ' + (xIsNext ? 'X' : 'O');
}
return (
@@ -103,9 +103,9 @@ export default function Game() {
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
- description = 'Go to move #' + move;
+ description = '# numaralı harekete git' + move;
} else {
- description = 'Go to game start';
+ description = 'Oyunun başlangıcına git';
}
return (
@@ -194,15 +194,15 @@ body {
-If the code doesn't make sense to you yet, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax.
+Eğer bu kod size şu an anlamlı gelmiyorsa ya da kodun sözdizimine yabancıysanız, merak etmeyin! Bu öğreticinin amacı React'i ve sözdizimini anlamanıza yardımcı olmaktır.
-We recommend that you check out the tic-tac-toe game above before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and it is updated as the game progresses.
+Öğreticiye devam etmeden önce yukarıdaki tic-tac-toe oyununu kontrol etmenizi tavsiye ederiz. Fark edeceğiniz özelliklerden biri de oyun tahtasının sağında numaralandırılmış bir listenin bulunmasıdır. Bu liste size oyun boyunca yapılmış tüm hamleleri gösterir ve oyun devam ettiği sürece bu liste güncellenir.
-Once you've played around with the finished tic-tac-toe game, keep scrolling. You'll start with a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
+Tamamlanmış oyunla biraz vakit geçirdikten sonra devam edin. Bu öğreticide daha basit bir şablonla başlayacaksınız. Bir sonraki adımımız oyunu yapmaya başlamanız için sizi hazırlamaktır.
-## Setup for the tutorial {/*setup-for-the-tutorial*/}
+## Öğretici için kurulum {/*setup-for-the-tutorial*/}
-In the live code editor below, click **Fork** in the top-right corner to open the editor in a new tab using the website CodeSandbox. CodeSandbox lets you write code in your browser and preview how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial.
+Aşağıdaki canlı kod editöründe, sağ üst köşedeki **Fork** butonuna basın ve CodeSanbox websitesini kullanarak editörü yeni bir sayfada açın. CodeSandbox, tarayıcınızda kod yazmanıza ve kullanıcılarınızın yaptığınız uygulamayı nasıl göreceğini önizlemenize olanak sağlar. Açılan yeni sayfa boş bir kare ve bu öğretici için gerekli olan başlangıç kodunu gösterecektir.
@@ -261,33 +261,33 @@ body {
-You can also follow this tutorial using your local development environment. To do this, you need to:
+Bu öğreticiyi yerel geliştirme ortamınızı kullanarak da takip edebilirsiniz. Bunu yapmak için şu adımlar takip edin:
-1. Install [Node.js](https://nodejs.org/en/)
-1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **File > Export to ZIP** in that menu to download an archive of the files locally
-1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped
-1. Install the dependencies with `npm install`
-1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser
+1. [Node.js](https://nodejs.org/en/) kurun
+1. CodeSandbox sayfasında menüyü açmak için sol üst köşedeki butona tıklayın ve sonra **File > Export to ZIP** adımlarını izleyerek gerekli arşiv dosyalarını indirin.
+1. Arşivi açın, daha sonra bir terminal açın ve çıkarttığınız dosyaya `cd` ile gidin
+1. `npm install` ile bağımlılıkları yükleyin
+1. `npm start` ile yerel bir sunucu başlatın ve kodu tarayıcıda çalışır halde görmek için adımları takip edin
-If you get stuck, don't let this stop you! Follow along online instead and try a local setup again later.
+Eğer bir yerde takılırsanız bunun sizi durdurmasına izin vermeyin! Websitesi üzerinde takip etmeye devam edin ve yerel kurulumu sonra tekrardan deneyin.
-## Overview {/*overview*/}
+## Genel bakış {/*overview*/}
-Now that you're set up, let's get an overview of React!
+Kurulumu tamamladığımıza göre, React'e genel bir bakış atalım!
-### Inspecting the starter code {/*inspecting-the-starter-code*/}
+### Başlangıç kodunu inceleme {/*inspecting-the-starter-code*/}
-In CodeSandbox you'll see three main sections:
+CodeSanbox'ta üç ana bölüm göreceksiniz:
-![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png)
+![Başlangıç kodu ile CodeSandbox](../images/tutorial/react-starter-code-codesandbox.png)
-1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` and a folder called `public`
-1. The _code editor_ where you'll see the source code of your selected file
-1. The _browser_ section where you'll see how the code you've written will be displayed
+1. _Files_ bölümünde `App.js`, `index.js`, `styles.css` gibi dosyaların listesi ve `public` dosyası vardır
+1. Seçtiğiniz dosyanın kaynak kodunu göreceğiniz _kod editörü_ bölümü
+1. Yazdığınız kodun nasıl görüntüleneceğini gösteren _tarayıcı_ bölümü
-The `App.js` file should be selected in the _Files_ section. The contents of that file in the _code editor_ should be:
+_Files_ bölümünde `App.js` dosyası seçili olmalıdır. O dosyanın içeriği _kod editöründe_ şöyle olmalıdır:
```jsx
export default function Square() {
@@ -295,15 +295,15 @@ export default function Square() {
}
```
-The _browser_ section should be displaying a square with a X in it like this:
+_Tarayıcı_ bölümü, içinde X olan bir kare göstermelidir:
-![x-filled square](../images/tutorial/x-filled-square.png)
+![İçinde x olan kare](../images/tutorial/x-filled-square.png)
-Now let's have a look at the files in the starter code.
+Şimdi başlangıç kodundaki dosyalara bir göz atalım.
#### `App.js` {/*appjs*/}
-The code in `App.js` creates a _component_. In React, a component is a piece of reusable code that represents a part of a user interface. Components are used to render, manage, and update the UI elements in your application. Let's look at the component line by line to see what's going on:
+`App.js` içindeki kod bir _bileşen_ yaratır. React'te bileşen, bir kullanıcı arayüzü parçasını temsil eden tekrar kullanılabilir bir kod parçasıdır. Bileşenler, uygulamanızdaki UI elementleri render etmek, yönetmek ve güncellemek için kullanılır. Hadi şu bileşene satır satır bakarak ne olduğunu anlamaya çalışalım:
```js {1}
export default function Square() {
@@ -311,7 +311,7 @@ export default function Square() {
}
```
-The first line defines a function called `Square`. The `export` JavaScript keyword makes this function accessible outside of this file. The `default` keyword tells other files using your code that it's the main function in your file.
+İlk satır `Square` adında bir fonksiyon tanımlar. `export` JavaScript kelimesi bu fonksiyonun bu dosya dışındaki yerlerde de kullanılabilmesi sağlar. `default` kelimesi ise bu fonksiyonu kullanan diğer dosyalara bu fonksiyonun dosyadaki ana fonksiyon olduğunu söyler.
```js {2}
export default function Square() {
@@ -319,15 +319,15 @@ export default function Square() {
}
```
-The second line returns a button. The `return` JavaScript keyword means whatever comes after is returned as a value to the caller of the function. `` closes the JSX element to indicate that any following content shouldn't be placed inside the button.
+İkinci satır bir buton döndürür. `return` JavaScript kelimesi bundan sonra gelen her şeyin, fonksiyonu çağırana bir değer olarak döndürüleceği anlamına gelir. `` ifadesi JSX elementini kapatarak bundan sonra gelen içeriğin buton içine konmaması gerektiğini belirtir.
#### `styles.css` {/*stylescss*/}
-Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. This file defines the styles for your React app. The first two _CSS selectors_ (`*` and `body`) define the style of large parts of your app while the `.square` selector defines the style of any component where the `className` property is set to `square`. In your code, that would match the button from your Square component in the `App.js` file.
+CodeSandbox'ın _Files_ bölümündeki `styles.css` isimli dosyaya tıklayın. Bu dosya React uygulamanızın stillerini tanımlar. İlk iki _CSS seçici_ (`*` ve `body`) uygulamanızın büyük bölümlerinini stilini tanımlarken, `.square` seçicisi `className` özelliğini `.square` olduğu her bileşenin stilini tanımlar. Kodunuzda bu, `App.js` dosyasındaki Square bileşeninizdeki düğmeyle eşleşir.
#### `index.js` {/*indexjs*/}
-Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser.
+CodeSandbox'ın _Files_ bölümündeki `index.js` isimli dosyaya tıklayın. Öğretici sırasında bu dosyayı düzenlemeyeceksiniz ama bu dosya `App.js` dosyası içerisinde oluşturduğunuz bileşen ile web tarayıcısı arasındaki köprüdür.
```jsx
import { StrictMode } from 'react';
@@ -337,20 +337,20 @@ import './styles.css';
import App from './App';
```
-Lines 1-5 bring all the necessary pieces together:
+1-5 satırları gerekli tüm parçaları bir araya getirir:
* React
-* React's library to talk to web browsers (React DOM)
-* the styles for your components
-* the component you created in `App.js`.
+* React'in web tarayıcıları ile konuşması için kütüphane (React DOM)
+* bileşenlerinizin stilleri
+* `App.js` içerisinde oluşturduğunuz bileşen.
-The remainder of the file brings all the pieces together and injects the final product into `index.html` in the `public` folder.
+Sayfanın geri kalanı tüm parçaları bir araya getirir ve `public` dosyasındaki `index.html` dosyasına son ürünü enjekte eder.
-### Building the board {/*building-the-board*/}
+### Tahtayı oluşturmak {/*building-the-board*/}
-Let's get back to `App.js`. This is where you'll spend the rest of the tutorial.
+`App.js` dosyasına geri gidelim. Öğreticinin geri kalanını bu sayfada geçireceğiz.
-Currently the board is only a single square, but you need nine! If you just try and copy paste your square to make two squares like this:
+Şu anda tahta tek bir kareden oluşmakta ama bizim dokuz taneye ihtiyacımız var! Şu şekilde kopyala yapıştır yaparak iki kare yapmak isterseniz:
```js {2}
export default function Square() {
@@ -358,15 +358,15 @@ export default function Square() {
}
```
-You'll get this error:
+Şu hatayı alacaksınız:
-/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX Fragment `<>...>`?
+/src/App.js: Bitişik JSX elementleri çevreleyen bir elemana sarılmalıdır. Bir JSX Fragment'i `<>...>` mi kullanmak istediniz?
-React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *Fragments* (`<>` and `>`) to wrap multiple adjacent JSX elements like this:
+React bileşenleri tek bir JSX elementi döndürmelidir ve birden fazla bitişik iki buton gibi JSX elementi döndürmemelidir. Bunu düzeltmek için *Fragment* (`<>` ve `>`) kullanıp çoklu bitişik JSX elementlerini şu şekilde sarabilirsiniz:
```js {3-6}
export default function Square() {
@@ -379,17 +379,17 @@ export default function Square() {
}
```
-Now you should see:
+Şimdi şunu görmelisiniz:
-![two x-filled squares](../images/tutorial/two-x-filled-squares.png)
+![içinde x olan iki kare](../images/tutorial/two-x-filled-squares.png)
-Great! Now you just need to copy-paste a few times to add nine squares and...
+Güzel! Şimdi yapmanız gereken bir kaç kere daha kopyala yapıştır yaparak dokuz kare elde etmek ve...
-![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png)
+![bir satırda içinde x olan dokuz kare](../images/tutorial/nine-x-filled-squares.png)
-Oh no! The squares are all in a single line, not in a grid like you need for our board. To fix this you'll need to group your squares into rows with `div`s and add some CSS classes. While you're at it, you'll give each square a number to make sure you know where each square is displayed.
+Olamaz! Kareler bizim istediğimiz tahtadaki gibi grid haline değil, tek bir satırda. Bunu düzeltmek için karelerinizi `div`ler kullanarak satırlar halinde gruplamanız ve bazı CSS sınıfları eklemeniz gerekmektedir. Bunu yaparken aynı zamanda her karenin nerede görüntülendiğini bilmek için her kareye bir numara vereceksiniz.
-In the `App.js` file, update the `Square` component to look like this:
+`App.js` dosyası içinide, `Square` bileşenini şöyle gözükecek halde güncelleyin:
```js {3-19}
export default function Square() {
@@ -415,11 +415,11 @@ export default function Square() {
}
```
-The CSS defined in `styles.css` styles the divs with the `className` of `board-row`. Now that you've grouped your components into rows with the styled `div`s you have your tic-tac-toe board:
+`styles.css` dosyası içinde tanımlanmış CSS, `className`'i `board-row` olan div'leri stiller. Bileşenleri stillenmiş `div`'ler ile satır halinde grupladığınza göre, tic-tac-toe tahtamızı elde etmiş oluruz:
-![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png)
+![içinde 1'den 9'a numaralar olan tic-tac-toe tahtası](../images/tutorial/number-filled-board.png)
-But you now have a problem. Your component named `Square`, really isn't a square anymore. Let's fix that by changing the name to `Board`:
+Ancak şimdi bir sorunumuz var. `Square` adlı bileşeniniz, artık bir kare değil. Bu sorunu bileşenin ismini `Board` olarak değiştirerek çözelim:
```js {1}
export default function Board() {
@@ -427,7 +427,7 @@ export default function Board() {
}
```
-At this point your code should look something like this:
+Bu noktada kodunuz şöyle gözükmelidir:
@@ -504,15 +504,15 @@ body {
-Psssst... That's a lot to type! It's okay to copy and paste code from this page. However, if you're up for a little challenge, we recommend only copying code that you've manually typed at least once yourself.
+Pişşt... Yazacak çok şey var! Bu sayfadan kodu kopyala yapıştır yapabilirsiniz. Ancak, biraz kafa yormak isterseniz, yalnızca en az bir kez manuel olarak yazdığınız kodu kopyalamanızı tavsiye ederiz.
-### Passing data through props {/*passing-data-through-props*/}
+### Prop'lar aracılığıyla veri iletme {/*passing-data-through-props*/}
-Next, you'll want to change the value of a square from empty to "X" when the user clicks on the square. With how you've built the board so far you would need to copy-paste the code that updates the square nine times (once for each square you have)! Instead of copy-pasting, React's component architecture allows you to create a reusable component to avoid messy, duplicated code.
+Şimdi, oyuncu kareye tıkladığında karenin değerini boştan "X"'e değiştirmek isteyeceksiniz. Tahtayı şu ana kadar nasıl oluşturduğunuzu düşünürsek, kareyi dokuz kez güncelleyen kodu kopyalayıp yapıştırmanız gerekir (her kare için bir defa)! Kopyala yapıştır yapmak yerine, React'in bileşen yapısı, karışık ve yinelenen kodlardan kaçınmak için yeniden kullanılabilir bir bileşen oluşturmanıza olanak sağlar.
-First, you are going to copy the line defining your first square (``) from your `Board` component into a new `Square` component:
+İlk olarak, ilk karenizi tanımlayan satırı (``) `Board` bileşeninizden yeni bir `Square` bileşenine kopyalayacaksınız:
```js {1-3}
function Square() {
@@ -524,7 +524,7 @@ export default function Board() {
}
```
-Then you'll update the Board component to render that `Square` component using JSX syntax:
+Daha sonra JSX sözdizimini kullanarak Board bileşeninin `Square` bileşenini render etmesini sağlayacaksınız:
```js {5-19}
// ...
@@ -551,15 +551,15 @@ export default function Board() {
}
```
-Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter.
+Tarayıcının `div`'lerinin aksine, kendi bileşenleriniz olan `Board` ve `Square` büyük harfle başlamak zorundadır.
-Let's take a look:
+Şuna bir göz atalım:
-![one-filled board](../images/tutorial/board-filled-with-ones.png)
+![içi bir ile dolu tahta](../images/tutorial/board-filled-with-ones.png)
-Oh no! You lost the numbered squares you had before. Now each square says "1". To fix this, you will use *props* to pass the value each square should have from the parent component (`Board`) to its child (`Square`).
+Olamaz! Daha önce sahip olduğunuz numaralandırılmış kareleriniz artık yok. Şimdi her karenin içinde "1" yazmakta. Bunu düzeltmek için, her karenin sahip olması gerektiği değeri (`Board`) üst bileşeninden (`Square`) alt bileşenine *prop'lar* ile ileteceksiniz.
-Update the `Square` component to read the `value` prop that you'll pass from the `Board`:
+`Square` bileşenini `Board` bileşeninden ilettiğiniz `value` değerini okuyacak şekilde güncelleyin:
```js {1}
function Square({ value }) {
@@ -567,9 +567,9 @@ function Square({ value }) {
}
```
-`function Square({ value })` indicates the Square component can be passed a prop called `value`.
+`function Square({ value })` ifadesi Square bileşenine `value` prop'unun iletilebileceği anlamına gelmektedir.
-Now you want to display that `value` instead of `1` inside every square. Try doing it like this:
+Şimdi her bir karenin içinde `1` yerine `value` değerini göstermek isteyeceksiniz. Şu şekilde yapmaya çalışın:
```js {2}
function Square({ value }) {
@@ -577,11 +577,11 @@ function Square({ value }) {
}
```
-Oops, this is not what you wanted:
+Eyvah, istediğiniz şey bu değildi:
-![value-filled board](../images/tutorial/board-filled-with-value.png)
+![içi value ile dolu tahta](../images/tutorial/board-filled-with-value.png)
-You wanted to render the JavaScript variable called `value` from your component, not the word "value". To "escape into JavaScript" from JSX, you need curly braces. Add curly braces around `value` in JSX like so:
+Siz kelime olan "value" değil JavaScript değişkeni olan `value` değerini render etmek istemiştiniz. JSX'ten "JavaScript'e kaçmak" için süslü parentezleri kullanmanız gereklidir. JSX içinde `value` etrafına süslü parentezleri koyun:
```js {2}
function Square({ value }) {
@@ -589,11 +589,11 @@ function Square({ value }) {
}
```
-For now, you should see an empty board:
+Şimdilik boş bir tahta görmelisiniz:
-![empty board](../images/tutorial/empty-board.png)
+![boş tahta](../images/tutorial/empty-board.png)
-This is because the `Board` component hasn't passed the `value` prop to each `Square` component it renders yet. To fix it you'll add the `value` prop to each `Square` component rendered by the `Board` component:
+Bunun nedeni, henüz `Board` bileşeninin render ettiği her `Square` bileşenine `value` prop'unu iletmemesidir. Bunu düzeltmek için, `Board` bileşeni tarafından render edilen her `Square` bileşenine `value` prop'unu ileteceksiniz:
```js {5-7,10-12,15-17}
export default function Board() {
@@ -619,11 +619,11 @@ export default function Board() {
}
```
-Now you should see a grid of numbers again:
+Şimdi tahtayı dolu bir şekilde görmelisiniz:
-![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png)
+![1'den 9'a numaralandırılmış tic-tac-toe tahtası](../images/tutorial/number-filled-board.png)
-Your updated code should look like this:
+GÜncellenmiş kodunuz şöyle gözükmelidir:
@@ -702,14 +702,14 @@ body {
-### Making an interactive component {/*making-an-interactive-component*/}
+### İnteraktif bir bileşen yapma {/*making-an-interactive-component*/}
-Let's fill the `Square` component with an `X` when you click it. Declare a function called `handleClick` inside of the `Square`. Then, add `onClick` to the props of the button JSX element returned from the `Square`:
+Hadi tıklandığı zaman `Square` bileşenini `X` ile dolduralım. `Square` içinde bir `handleClick` fonksiyonu bildirelim. Daha sonra, `Square` tarafından döndürülen buton JSX elementinin prop'larına `onClick`'i ekleyin:
```js {2-4,9}
function Square({ value }) {
function handleClick() {
- console.log('clicked!');
+ console.log('tıklandı!');
}
return (
@@ -723,19 +723,19 @@ function Square({ value }) {
}
```
-If you click on a square now, you should see a log saying `"clicked!"` in the _Console_ tab at the bottom of the _Browser_ section in CodeSandbox. Clicking the square more than once will log `"clicked!"` again. Repeated console logs with the same message will not create more lines in the console. Instead, you will see an incrementing counter next to your first `"clicked!"` log.
+Şimdi bir kareye tıklarsanız CodeSandbox'taki _Browser_ bölümünün altındaki _Console_ sekmesinde `"tıklandı!"` diyen bir log görmelisiniz. Kareye birden fazla defa tıklamak yeniden `"tıklandı!"` log'layacaktır. Aynı mesajla tekrarlanan konsol log'ları, konsolda daha fazla satır oluşturmaz. Bunun yerine ilk `"tıklandı!"` log'unun yanında artan bir sayaç göreceksiniz.
-If you are following this tutorial using your local development environment, you need to open your browser's Console. For example, if you use the Chrome browser, you can view the Console with the keyboard shortcut **Shift + Ctrl + J** (on Windows/Linux) or **Option + ⌘ + J** (on macOS).
+Bu öğreticiyi kendi yerel geliştirme ortamınızda takip ediyorsanız, tarayıcınızın Console'unu açmanız gerekmektedir. Örneğin, Chrome tarayıcısını kullanıyorsanız, konsolu açmak için **Shift + Ctrl + J** (Windows/Linux için) ya da **Option + ⌘ + J** (macOS için) klavye kısayollarını kullanabilirsiniz.
-As a next step, you want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use *state*.
+Bir sonraki adımda, Square bileşeninin tıklandığını "hatırlamasını" ve "X" işareti ile doldurulmasını isteyeceksiniz. Bir şeyleri "hatırlamak" için bileşenler *state* kullanır.
-React provides a special function called `useState` that you can call from your component to let it "remember" things. Let's store the current value of the `Square` in state, and change it when the `Square` is clicked.
+React, bileşeninizin bir şeyleri "hatırlamasını" sağlamak için bileşeninizden çağırabileceğiniz `useState` adı verilen özel bir fonksiyon sağlar. Şimdi `Square`'in şu anki değerini state'te saklayalım ve `Square` tıklandığı zaman değiştirelim.
-Import `useState` at the top of the file. Remove the `value` prop from the `Square` component. Instead, add a new line at the start of the `Square` that calls `useState`. Have it return a state variable called `value`:
+Dosyanın en üstüne `useState` içe aktarın. `Square` bileşeninden `value` prop'unu kaldırın. Onun yerine, `Square` bileşeninin başına `useState` çağıran yeni bir satır ekleyin ve `value` adında bir state değişkeni döndürmesini sağlayın:
```js {1,3,4}
import { useState } from 'react';
@@ -747,9 +747,9 @@ function Square() {
//...
```
-`value` stores the value and `setValue` is a function that can be used to change the value. The `null` passed to `useState` is used as the initial value for this state variable, so `value` here starts off equal to `null`.
+`value` değeri saklar ve `setValue` değeri değiştirmek için kullanılan bir fonksiyondur. `useState`'e iletilen `null` değeri bu state değişkeni için başlangıç değeri olarak kullanılır ve bu yüzden `value` değeri `null` olarak başlar.
-Since the `Square` component no longer accepts props anymore, you'll remove the `value` prop from all nine of the Square components created by the Board component:
+`Square` bileşeni artık prop almıyor, Board bileşeni tarafından render edilen dokuz Square bileşeninin tamamından `value` prop'unu kaldıracaksınız:
```js {6-8,11-13,16-18}
// ...
@@ -776,7 +776,7 @@ export default function Board() {
}
```
-Now you'll change `Square` to display an "X" when clicked. Replace the `console.log("clicked!");` event handler with `setValue('X');`. Now your `Square` component looks like this:
+Şimdi `Square` bileşenini tıklandığında "X" gösterecek şekilde değiştirin. Olay yöneticisi içindeki `console.log("clicked!");` ifadesini `setValue('X');` ile değiştirin. Şimdi `Square` bileşeniniz şöyle gözükecektir:
```js {5}
function Square() {
@@ -797,13 +797,13 @@ function Square() {
}
```
-By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `
-Before you can implement `jumpTo`, you need the `Game` component to keep track of which step the user is currently viewing. To do this, define a new state variable called `currentMove`, defaulting to `0`:
+`jumpTo` fonksiyonunu uygulamadan önce, kullanıcının o anda hangi hamleyi görünütlediğini takip etmek için `Game` bileşenine ihtiyacınız vardır. Bunu yapmak için, varsayılan değeri `0` olan `currentMove` adında yeni bir state değişkeni tanımlayın:
```js {4}
export default function Game() {
@@ -2488,7 +2488,7 @@ export default function Game() {
}
```
-Next, update the `jumpTo` function inside `Game` to update that `currentMove`. You'll also set `xIsNext` to `true` if the number that you're changing `currentMove` to is even.
+Daha sonra, `Game` içindeki `jumpTo` fonksiyonunu `currentMove`'u güncelleyecek şekilde düzenleyin. Ayrıca, `currentMove` değerini değiştirdiğiniz sayı çift ise `xIsNext` değerini `true` olarak ayarlayacaksınız.
```js {4-5}
export default function Game() {
@@ -2501,10 +2501,10 @@ export default function Game() {
}
```
-You will now make two changes to the `Game`'s `handlePlay` function which is called when you click on a square.
+Şimdi bir kareye tıklandığında çağırılan `Game`'in `handlePlay` fonksiyonunda iki tane değişiklik yapacaksınız.
-- If you "go back in time" and then make a new move from that point, you only want to keep the history up to that point. Instead of adding `nextSquares` after all items (`...` spread syntax) in `history`, you'll add it after all items in `history.slice(0, currentMove + 1)` so that you're only keeping that portion of the old history.
-- Each time a move is made, you need to update `currentMove` to point to the latest history entry.
+- Eğer "zamanda geriye gider" ve o noktadan itibaren yeni bir hamle yaparsanız, geçmişi sadece o noktaya kadar tutmak isterseniz. `nextSquares` öğelerini `history` içindeki tüm öğelerden (`...` spread sözdizimi) sonra eklemek yerine, `history.slice(0, currentMove + 1)` içindeki tüm öğelerden sonra eklersiniz, böylece eski geçmişin yalnıza o kısmını saklarsınız.
+- Her hamle yapıldığında, `currentMove` değişkenini en son hamle girdisine işaret edecek şekilde güncellemeniz gerekir.
```js {2-4}
function handlePlay(nextSquares) {
@@ -2515,7 +2515,7 @@ function handlePlay(nextSquares) {
}
```
-Finally, you will modify the `Game` component to render the currently selected move, instead of always rendering the final move:
+Son olarak, `Game` bileşenini her zaman son hamleyi render edecek şekilde değilde seçili hamleyi render edecek şekilde güncelleyeceksiniz:
```js {5}
export default function Game() {
@@ -2528,7 +2528,7 @@ export default function Game() {
}
```
-If you click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred.
+Oyunun geçmişindeki herhangi bir hamleye tıklarsanız, tic-tac-toe tahtası o adım gerçekleştikten sonra tahtanın nasıl göründüğünü göstermek için hemen güncellenmelidir.
@@ -2560,9 +2560,9 @@ function Board({ xIsNext, squares, onPlay }) {
const winner = calculateWinner(squares);
let status;
if (winner) {
- status = 'Winner: ' + winner;
+ status = 'Kazanan: ' + winner;
} else {
- status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+ status = 'Sıradaki oyuncu: ' + (xIsNext ? 'X' : 'O');
}
return (
@@ -2608,9 +2608,9 @@ export default function Game() {
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
- description = 'Go to move #' + move;
+ description = '# numaralı hamleye git' + move;
} else {
- description = 'Go to game start';
+ description = 'Oyunun başlangıcına git';
}
return (
@@ -2699,11 +2699,11 @@ body {
-### Final cleanup {/*final-cleanup*/}
+### Son temizlik {/*final-cleanup*/}
-If you look at the code very closely, you may notice that `xIsNext === true` when `currentMove` is even and `xIsNext === false` when `currentMove` is odd. In other words, if you know the value of `currentMove`, then you can always figure out what `xIsNext` should be.
+Eğer kodu yakından incelerseniz, `currentMove` çift ise `xIsNext === true`, `currentMove` tek ise `xIsNext === false` olduğunu göreceksiniz. Diğer bir deyişle eğer `currentMove` değişkeninin değerini biliyorsanız, `xIsNext` değerinin ne olduğunu tahmin edebilirsiniz.
-There's no reason for you to store both of these in state. In fact, always try to avoid redundant state. Simplifying what you store in state reduces bugs and makes your code easier to understand. Change `Game` so that it doesn't store `xIsNext` as a separate state variable and instead figures it out based on the `currentMove`:
+Bunların her ikisini de state'te saklamanız için hiçbir neden yoktur. Aslında, her zaman gereksiz state'ten kaçınmaya çalışın. State'te sakladıklarınızı basitleştirmek hataları azaltır ve kodunuzun anlaşılmasını kolaylaştırır. `Game` bileşenini `xIsNext` değişkenini ayrı bir state olarak saklamayacak ve bunun yerine `currentMove` değişkenine göre hesaplayacak şekilde değiştirin:
```js {4,11,15}
export default function Game() {
@@ -2725,20 +2725,20 @@ export default function Game() {
}
```
-You no longer need the `xIsNext` state declaration or the calls to `setXIsNext`. Now, there's no chance for `xIsNext` to get out of sync with `currentMove`, even if you make a mistake while coding the components.
+Artık `xIsNext` state değişkenine ya da `setXIsNext` çağrısına ihtiyacanız yoktur. Artık bileşenleri kodlarken bir hata yapsanız bile `xIsNext`'in `currentMove` ile senkronizasyonunun bozulma ihtimali yoktur.
-### Wrapping up {/*wrapping-up*/}
+### Toparlama {/*wrapping-up*/}
-Congratulations! You've created a tic-tac-toe game that:
+Tebrikler! Şunları yapan bir tic-tac-toe oyunu yarattınız:
-- Lets you play tic-tac-toe,
-- Indicates when a player has won the game,
-- Stores a game's history as a game progresses,
-- Allows players to review a game's history and see previous versions of a game's board.
+- Tic-tac-toe oynamanızı sağlayan,
+- Bir oyuncunun oyunu ne zaman kazandığını gösteren,
+- Oyun ilerledikçe geçmiş hamleleri saklayan,
+- Oyuncuların geçmiş hamleleri incelemesine ve oyun tahtasının önceki durumlarını görmesine olanak tanıyan.
-Nice work! We hope you now feel like you have a decent grasp of how React works.
+Güzel iş! Umarız React'in nasıl çalıştığı hakkında hatırı sayılır bir bilgiye sahip olmuşsunuzdur.
-Check out the final result here:
+Kodun son haline göz atın:
@@ -2770,9 +2770,9 @@ function Board({ xIsNext, squares, onPlay }) {
const winner = calculateWinner(squares);
let status;
if (winner) {
- status = 'Winner: ' + winner;
+ status = 'Kazanan: ' + winner;
} else {
- status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+ status = 'Sıradaki oyuncu: ' + (xIsNext ? 'X' : 'O');
}
return (
@@ -2816,9 +2816,9 @@ export default function Game() {
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
- description = 'Go to move #' + move;
+ description = '# numaralı hamleye git' + move;
} else {
- description = 'Go to game start';
+ description = 'Oyunun başlangıcına git';
}
return (
@@ -2907,12 +2907,12 @@ body {
-If you have extra time or want to practice your new React skills, here are some ideas for improvements that you could make to the tic-tac-toe game, listed in order of increasing difficulty:
+Eğer fazladan zamanınız varsa ya da yeni React becerilerinizi geliştirmek istiyorsanız, işte tic-tac-toe oyununda yapabileceğiniz iyileştirmeler için bazı fikirler artan zorluk seviyesine göre sıralanmıştır:
-1. For the current move only, show "You are at move #..." instead of a button.
-1. Rewrite `Board` to use two loops to make the squares instead of hardcoding them.
-1. Add a toggle button that lets you sort the moves in either ascending or descending order.
-1. When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
-1. Display the location for each move in the format (row, col) in the move history list.
+1. Yalnızca geçerli hamle için, bir buton yerine "# numaralı hamledesiniz..." ifadesini gösterin.
+1. Kareleri doğrudan koda yazmak yerine iki döngü kullancak şekilde `Board` bileşenini tekrar yazın.
+1. Yapilan hamleleri artan veya azalan şekilde görüntülemenizi sağlayan bir buton ekleyin.
+1. Biri oyunu kazandığında, kazanmaya sebep olan kareleri başka bir renkle belirtin (kimse kazanmadığında, oyunun berabere bittiğini söyleyen bir mesaj gösterin).
+1. Her hamlenin konumunu hamle geçmişi listesinde (satır, sütun) biçiminde gösterin.
-Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI.
+Bu öğretici boyunca elementler, bileşenler, prop'lar ve state gibi React kavramlarını öğrendiniz. Artık bu kavramların bir oyun yaparken nasıl çalıştığını gördüğünze göre, aynı React kavramlarının bir uygulamanın kullanıcı arayüzünü yaparken nasıl çalıştığını görmek için [React'te Düşünmek](/learn/thinking-in-react) sayfasına göz atın.