Şimdi herhangi bir kareye tıkladığımızda, tarayıcınızın devtools konsolunda bir alert mesajı görüntülenecektir.
\n\n\nNot:
\nDaha az kod yazmak ve
\nthis‘in kafa karıştırıcı kullanımından kaçınmak için, butona tıklanması gibi olay fonksiyonlarında, arrow function kullanacağız:\nclass Square extends React.Component {\n render() {\n return (\n <button className=\"square\" onClick={() => console.log('click')}> {this.props.value}\n </button>\n );\n }\n}Farkedeceğiniz üzere,
\nonClick={() => console.log('click')}kısmında butonunonClickprop’una bir fonksiyon ataması gerçekleştiriyoruz. Bu fonksiyon sadece butona tıkladığımızda çalışıyor. Genellikle bir yazılımcı hatası olarak parantezli ok() =>ifadesinin unutulması yerine direkt olarakonClick={console.log('click')}ifadesinin yazılması gerçekleşebiliyor. Bu durumda tıklama anında gerçekleşmesi istenen olay yanlış bir şekilde çalışarak, bileşen tekrar render edildiğinde gerçekleşmiş oluyor.
Sonraki adımda Square bileşeninin, tıklandığı durumu “hatırlamasını” ve “X” işareti ile doldurulmasını sağlayacağız. Bir şeyleri “hatırlamak” için bileşenler state (durum)‘u kullanırlar.
\nReact bileşenleri, constructor (yapıcı) fonksiyonlarında this.state‘e atama yaparak bir state’e sahip olurlar. React bileşeni içerisinde tanımlanan this.state özelliğinin erişim belirleyicisi private olarak düşünülmelidir. Çünkü sadece o bileşene özeldir ve diğer bileşenler tarafından direkt olarak erişilemezler.
Şimdi Square’in mevcut değerini this.state içerisinde saklayalım ve Square’e tıklandığında değiştirelim. Bunun için öncelikle Square sınıfına bir constructor ekleyeceğiz ve içerisinde state’in başlangıç değerlerini oluşturacağız:
class Square extends React.Component {\n constructor(props) { super(props); this.state = { value: null, }; }\n render() {\n return (\n <button className=\"square\" onClick={() => console.log('click')}>\n {this.props.value}\n </button>\n );\n }\n}\n\nNot:
\nJavaScript class’larında, alt sınıfın constructor’ını oluştururken her zaman
\nsuperfonksiyonunu çağırmanız gerekmektedir.constructormetodu olan her bir React sınıf bileşeninde,constructormetodusuper(props)çağrısı ile başlamalıdır.
Şimdi, Square’e tıklanıldığında, state’indeki value değerinin render metodunda görüntülenebilmesi için aşağıdaki adımları izleyelim:
- \n
<button>etiketi içerisinde yer alanthis.props.valueyerinethis.state.valueyazalım. \n() => alert()event handler’ını() => this.setState({value: 'X'})ile değiştirelim. \n- Okunabilirliği arttırmak için
classNameveonClickprop’larını ayrı satırlara alalım. \n
Bu değişikliklerden sonra Square’in render metodundan dönen <button> etiketi aşağıdaki gibi görüntülenecektir:
class Square extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: null,\n };\n }\n\n render() {\n return (\n <button\n className=\"square\" onClick={() => this.setState({value: 'X'})} >\n {this.state.value} </button>\n );\n }\n}Square’in render metodundaki onClick metodundan, this.setState‘in çağrılmasını sağladık. Bu sayede Square’deki <button> elemanına her tıklandığında React, Square bileşenini tekrar render edecektir. Güncelleme sonrasında Square’in this.state.value değerine 'X' ataması gerçekleşecektir, ve bu sayede oyun tahtasında ‘X”i göreceğiz. Herhangi bir Square bileşenine tıklandığı anda içerisinde ‘X’ görüntülenecektir.
Bir bileşenteki setState fonksiyonunu çağırdığınızda, React otomatik olarak içerisindeki alt bileşenleri de güncellemiş oluyor.
Kodun bu kısma kadar olan son halini görüntülemek için tıklayınız
\nGeliştirici Araçları
\nChrome ve Firefox için React Devtools eklentisi sayesinde herhangi bir React bileşen ağacını, tarayıcınızın geliştirici araçları kısmından görüntüleyebilirsiniz.
\n\n \n \n \n \n![\"React](\"/static/41330fe61a925e2c3009be675bdb96a9/f2205/devtools.png\" "\\"\\"")
\n \n \n \n \n \nReact DevTools, React bileşenlerinizin state’ini ve prop’larını kontrol etmenize olanak tanır.
\nReact DevTools kurulumundan sonra, sayfa içerisindeki herhangi bir elemana sağ tıklayarak çıkan menüde “İncele“‘yi seçerseniz, geliştirici araçlarını açabilir, ve devamında en sağda yer alan React sekmesinde (“⚛️ Components” and “⚛️ Profiler”) incelemelerinizi yürütebilirsiniz. Bileşen ağacını incelemek için “⚛️ Components” tabına bakın.
\nEklentinin CodePen ile çalışabilmesi için harici olarak birkaç adım daha vardır:
\n- \n
- CodePen’e e-posta adresiniz ile giriş yapınız veya kayıt olunuz (spam’lerin engellenmesi için gereklidir). \n
- “Fork” butonuna basınız. \n
- “Change View“‘a tıklayarak devamında “Debug mode“‘u seçiniz. \n
- Açılan yeni sekmede, Devtools içerisinde React sekmesi yer alacaktır. \n
Oyunun Tamamlanması
\nArtık tic-tac-toe oyunumuz için temel kod bloklarına sahibiz. Oyunun tamamlanması için tahta üzerinde “X” ve “O“‘ların birbiri ardına yerleştirilmesi gerekiyor. Sonrasında oyunda bir kazananın belirlenmesi için değişiklikler yapılmasına ihtiyaç var.
\nState’in Yukarı Taşınması
\nŞu an her bir Square bileşeni oyunun state’ini değiştirebiliyor. Kazananı belirleyebilmemiz için, 9 square’in de değerine ihtiyacımız var.
\nBunu gerçekleştirmek için Board’un, her bir Square’e, kendi state’inin ne olduğunu sorması gerektiğini düşünebiliriz. Bu yöntem her ne kadar React’te uygulanabilir olsa da, yapmanızı tavsiye etmiyoruz. Çünkü bu şekilde yazılan kod; anlaşılabilirlikten uzak olacak, hataların oluşmasına daha müsait hale gelecek ve kodu refactor etmek istediğimizde bize çok daha büyük zorluklar çıkaracaktır. Bu nedenle, her bir Square sınıfında, kendi state’inin tutulmasının yerine, üst bileşen olan Board bileşeninde oyunun tüm state’ini tutmak en iyi çözümdür. Bunun sonucunda Board bileşeni, her bir Square’e neyi göstermesi gerektiğini prop’lar aracılığıyla aktarır (daha önce de prop’lar aracılığıyla her bir Square’e bir sayı atamıştık).
\nBu örnekteki gibi, birçok alt bileşenden verilerin toplanması veya iki çocuğun birbirleri arasında iletişim kurabilmesi için, üst bileşende paylaşımlı bir state oluşturmanız gerekmektedir. Üst bileşen, prop’lar aracılığıyla state’ini alt bileşenlere aktarabilir. Bu sayede alt bileşenler hem birbirleri arasında hem de üst bileşen ile senkronize hale gelirler.
\nReact bileşenleri refactor edilirken, state’in yukarı taşınması çok yaygın bir durumdur. Şimdi bu fırsatı değerlendirelim ve işe koyulalım.
\nBoard’a bir constructor ekleyelim ve Board’un başlangıç state’ine bir dizi atayarak içerisinde 9 adet null değerinin bulunmasını sağlayalım. 9 kareye, 9 adet null karşılık gelecektir:
\nclass Board extends React.Component {\n constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; }\n renderSquare(i) {\n return <Square value={i} />;\n }Daha sonra Board’u doldurdukça, this.state.squares dizisinin içeriği aşağıdaki gibi görünmeye başlayacaktır:
[\n 'O', null, 'X',\n 'X', 'X', 'O',\n 'O', null, null,\n]Board’un renderSquare metodu aşağıdaki gibi görünüyor:
renderSquare(i) {\n return <Square value={i} />;\n }Projeye başladığımızda, 0’dan 8’e kadar olan sayıları her bir karede göstermek için, Board’daki value prop’unu alt bileşenlere aktarmıştık. Bir diğer önceki aşamada ise sayıların yerine mevcut Square bileşeninin kendi state’i tarafından belirlenen “X” işaretinin almasını sağlamıştık. İşte bu nedenle Square bileşeni, Board tarafından kendisine gönderilen value prop’unu göz ardı ediyor.
Şimdi prop aktarma mekanizmasını tekrar kullanacağız. Bunun için her bir Square’e kendi mevcut değerini ('X', 'O', or null) atamak için Board bileşeninde değişiklik yapalım. Board’un constructor’ında halihazırda tanımladığımız bir squares dizisi bulunuyor. Board’un renderSquare metodunu, bu diziden verileri alacak şekilde değiştirelim:
renderSquare(i) {\n return <Square value={this.state.squares[i]} />; }Kodun bu kısma kadar olan son halini görüntülemek için tıklayınız
\nArtık her bir Square bileşeni value prop’unu alacak ve ‘X’, ‘O’ veya boş square’ler için null değerini edinecektir.
Şimdi Square’e tıklandığında ne olacağına karar vermemiz gerekiyor. Board bileşeni artık hangi Square’in doldurulacağına karar verebildiğine göre, Square’e tıklandığında Board bileşeninin state’inin güncellenmesini sağlamalıyız. State her bir bileşene private olduğundan dolayı Square üzerinden direkt olarak Board’un state’ini değiştiremeyiz.
\nBoard’un state’inin gizliliğini korumak için, Board’dan Square’e bir fonksiyon aktarmamız gerekiyor. Square’e her tıklama anında bu fonksiyonun otomatik olarak çağrısı gerçekleşecektir. Şimdi Board’un renderSquare metodunu aşağıdaki şekilde değiştirelim:
renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)} />\n );\n }\n\nNot
\nKodun okunabilirliği için geri dönüş elemanını birçok satıra böldük ve parantezler ekledik. Bu sayede JavaScript,
\nreturn‘den sonra otomatik olarak bir noktalı virgül eklemeyecek ve bundan dolayı kodun bozulması engellenmiş hale gelecektir.
Artık Board’dan Square’e, value ve onClick olmak üzere iki tane prop gönderiyoruz. Square’e tıklandığında ise prop olarak gelen onClick fonksiyonu çağrılmasına ihtiyacımız var. Bunun için Square’e aşağıdaki değişiklikleri uygulamamız gerekiyor:
- \n
- Square’in
rendermetodu içerisinde yer alanthis.state.valueyerinethis.props.valueyazınız. \n - Yine Square’in
rendermetodundakithis.setState()yerinethis.props.onClick()yazınız. \n - Square artık oyunun state’ini değiştirmeyeceği için, Square’in
constructormetodunu siliniz. \n
Bu değişikliklerin ardından, Square bileşeni aşağıdaki gibi görüntülenecektir:
\nclass Square extends React.Component { render() { return (\n <button\n className=\"square\"\n onClick={() => this.props.onClick()} >\n {this.props.value} </button>\n );\n }\n}Artık Square’e tıklandığında, Board tarafından aktarılan onClick fonksiyonu çağrılacaktır. Bunun nasıl gerçekleştiğini açıklayalım:
- \n
- HTML’de varsayılan olan
<button>bileşenininonClickprop’u React’e, tıklama olayını oluşturmasını söyler. \n - Butona tıklandığında React, Square’in
render()metodunda tanımlananonClickfonksiyonunu çalıştırır. \n - Bu fonksiyon ise,
this.props.onClick()çağrısını gerçekleştirir. Square’inonClickprop’u, Board tarafından kendisine aktarılmıştır. \n - Board, Square’e
onClick={() => this.handleClick(i)}kodunu aktardığı için, Square’e tıklandığında Board’unthis.handleClick(i)metodu çağrılır. \n - Şu an
handleClick()metodunu oluşturmadığımız için kodumuz hata verecektir. Şimdi bir kareye tıklarsanız, “this.handleClick is not a function” gibi bir şey söyleyen kırmızı bir hata ekranı görmelisiniz. \n
\n\nNot
\nHTML’deki
\n<button>elemanı varsayılan bileşen olarak geldiği için,onClickfonksiyonu, React için özel bir anlam ihtiva eder. Fakat Square gibi özel olarak yazılan bileşenlerde, prop isimlendirmesi size kalmıştır. Bu nedenle Square’inonClickprop’unu veya Board’unhandleClickmetodunu daha farklı şekillerde isimlendirebilirsiniz. Ancak React’teki isimlendirme kuralına uymak gereklidir. Bu kural şu şekildedir: olayları temsil eden prop’lar içinon[Olay], olayları handle eden metodlar için isehandle[Olay]ifadeleri kullanılır.
Square’e tıkladığımızda, handleClick‘i tanımlamadığımız için hata aldığımızdan bahsetmiştik. Gelin şimdi Board sınıfına handleClick‘i ekleyelim:
class Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n };\n }\n\n handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState({squares: squares}); }\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Next player: X';\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Kodun bu kısma kadar olan son halini görüntülemek için tıklayınız
\nBu değişikliklerden sonra, oyundaki karelere tıkladığımızda içeriğinin “X” ile doluyor olduğunu tekrar görebiliyoruz. Fakat her bir Square’in ayrı ayrı state’e sahip olması yerine, Board bileşeninde tek bir state barındırılmış hale geldi. Bu sayede Board’daki state değiştiğinde tüm Square bileşenleri otomatik olarak tekrar render edilecektir. Bunun yanında, bütün Square’lerin state’inin Board bileşeninde tutulması, gelecekte kazananı belirlememiz için önemli bir yöntem teşkil edecektir.
\nSquare bileşenleri artık state’i direkt olarak değiştirmediği için, değerleri Board bileşeninden alıyorlar ve tıklandıklarında Board’u haberdar ediyorlar. React terminolojisinde Square bileşenleri için controlled components (kontrol edilen bileşenler) adı verilir. Çünkü tüm kontrol Board bileşeninin elindedir.
\nFark edeceğiniz gibi, handleClick fonksiyonu içerisinde, halihazırda var olan squares dizisini direkt olarak değiştirmek yerine, .slice()‘ı kullanarak bir kopyasını oluşturduk ve bu kopyayı değiştirdik. Şimdi squares dizisinin neden bir kopyasını oluşturduğumuza değineceğiz.
Neden Immutability Önemlidir
\nImmutability, anlam olarak mutate (değişmek) kelimesinin zıttı olan değişmezlik kavramını oluşturmaktadır. Önceki kod örneğinde, mevcut squares dizisini değiştirmek yerine, dizinin .slice() metodu ile bir kopyasının oluşturulması gerektiğini önermiştik. Şimdi ise immutability kavramına ve immutability’i öğrenmenin neden önemli olduğuna değineceğiz.
Genellikle verinin değiştirilmesi için iki farklı yaklaşım vardır. İlk yaklaşımda, verinin değerleri direkt olarak değiştirilerek ilgili verinin değişmesi (mutate) sağlanır. İkinci yaklaşımda ise, ilgili veri kopyalanarak, kopya veri üzerinde istenen değişiklikler gerçekleştirildikten sonra, kopya verinin ana veriye atanması işlemidir.
\nMutasyon Kullanılarak Verinin Değiştirilmesi
\nvar player = {score: 1, name: 'Jeff'};\nplayer.score = 2;\n// Oyuncu nesnesinin son hali: {score: 2, name: 'Jeff'}Mutasyon Kullanılmadan Verinin Değiştirilmesi
\nvar player = {score: 1, name: 'Jeff'};\n\nvar newPlayer = Object.assign({}, player, {score: 2});\n// Şu an oyuncu nesnesi değişmedi, fakat oyuncu nesnesinden yeniOyuncu nesnesi oluşturuldu: {score: 2, name: 'Jeff'}\n\n// Object spread sözdizimini kullanarak aşağıdaki gibi de yazabilirsiniz:\n// var yeniOyuncu = {...player, score: 2};Sonuç iki durumda da aynı oldu ama direkt olarak veriyi değiştirmeden kopya üzerinde değişiklikler yapmanın aşağıdaki gibi birçok yararı vardır.
\nKarmaşık Özellikleri Basit Hale Getirir
\nImmutability sayesinde karmaşık özellikleri kodlamak çok daha kolaydır. Bu öğreticinin sonunda, tic-tac-toe oyunundaki hamlelerin geçmişini incelemeyi ve önceki hamlelere geri dönmeyi sağlayan “zaman yolculuğu” özelliğini kodlayacağız. Bu özellik sadece oyunlarda değil, birçok uygulamada ileri ve geri alma işlemlerinin kurgulanması için bir gereksinim teşkil edebilir. Direkt olarak veri mutasyonundan kaçınarak, oyunun önceki versiyonlarını oyun geçmişinde bozmadan tutabilir ve daha sonra, önceki bir versiyona geri dönmeyi sağlayabilirsiniz.
\nDeğişikliklerin Tespit Edilmesini Kolaylaştırır
\nMutable nesneler, direkt olarak değiştirilebildikleri için, değişip/değişmediklerinin tespit edilmesi güçtür. Değişikliğin tespit edilebilmesi için, nesnenin kendisi ile önceki kopyalarının karşılaştırılması ve bütün nesne ağacı üzerinde gezilmesi gereklidir.
\nImmutable nesnelerdeki değişikliklerin tespit edilmesi daha kolaydır. Immutable nesne kopyalanarak ataması yapıldığı için, ilgili değişken, öncekinden farklı bir değişkene referans edilmişse o halde nesne değişmiştir diyebiliriz.
\nTekrar Render Etme Zamanını Belirlemek
\nReact’te Immutability’nin ana faydası ise, pure component‘ler (saf/katıksız bileşenler) yapmayı kolaylaştırmasıdır. Immutable veriler, değişiklik yapıldığını kolayca tespit edebilirler. Bu sayede değişiklik olduğunda ilgili bileşenin tekrar render edilmesine yardımcı olurlar.
\nPerformansın iyileştirmesi yazısında shouldComponentUpdate() fonksiyonunun ne olduğuna ve nasıl pure component‘leri oluşturabileceğiniz hakkında bilgi edinebilirsiniz.
Fonksiyon bileşenleri
\nSquare bileşenini nasıl fonksiyon bileşeni haline getireceğimize değinelim.
\nReact’te fonksiyon bileşenleri, sadece render metodunu içerirler. İçerisinde herhangi bir state bulundurmadıkları için daha kolay bir şekilde bileşen oluşturmayı sağlarlar. React.Component‘tan türetilen bir sınıf bileşeni oluşturmak yerine, sadece propları girdi olarak alan ve render edilecek kısımları döndüren bir fonksiyon bileşeni yazabiliriz. Fonksiyon bileşenleri kısa bir şekilde yazıldığı için, sizi sınıf bileşenlerine göre daha az yorar.
Square sınıfını aşağıdaki fonksiyon ile değiştirelim:
\nfunction Square(props) {\n return (\n <button className=\"square\" onClick={props.onClick}>\n {props.value}\n </button>\n );\n}Dikkat edecek olursanız sınıf bileşeninde kullandığımız this.props ifadesi yerine sadece props‘u kullandık.
Kodun bu kısma kadar olan son halini görüntülemek için tıklayınız
\n\n\nNot
\nSquare’i, fonksiyon bileşeni olarak değiştirdiğimiz için, uzun olan
\nonClick={() => this.props.onClick()}kod parçasını,onClick={props.onClick}şeklinde yazarak daha kısa hale getirmiş olduk (her iki taraftaki parantezlerin de gittiğine dikkat ediniz). Sınıf bileşeninde gerçekthisdeğerine ulaşmak için arrow (ok) fonksiyonu kullanmıştık. Bunun aksine fonksiyon bileşenlerindethisile uğraşmanıza gerek yoktur.
Hamle Sırası Değişikliği
\nŞimdi tic-tac-toe oyunumuzdaki hatayı çözmemiz gerekiyor. Oyunun son hali ile sadece “X” eklenebiliyor ama “O” eklenemiyor.
\nOyuna varsayılan olarak “X” başlıyor. X’in ilk başlayıp/başlamayacağını Board’un constructor’ındaki başlangıç state’inde belirleyebiliriz:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }Herhangi bir oyuncu hamlesini yaptığında xIsNext (xSonrakiElemanMı) boolean değişkeninin tersini alarak hangi oyuncunun sonraki hamleyi yapacağını belirleyebiliriz. Ayrıca oyunun state’inde bu değişkeni kaydedebiliriz. Board’un handleClick fonksiyonunu, xIsNext değişkeninin tersini alacak şekilde ilgili değişikliği yapalım:
handleClick(i) {\n const squares = this.state.squares.slice();\n squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext, });\n }Bu değişiklik ile sayesinde, “X“‘ler ve “O“‘lar sırasıyla hamle yapabiliyor olacaklar.
\nAyrıca oyunda, sıradaki hamlenin kimde olduğunu gösteren metni değiştirmek için, Board’un render metodunda “status” değişkenini oluşturabiliriz:
render() {\n const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n // Kalan kısımlar değişmediBu değişikliklerden sonra Board bileşeninin son hali aşağıdaki gibi olacaktır:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }\n\n handleClick(i) {\n const squares = this.state.squares.slice(); squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); }\n\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Kodun bu kısma kadar olan son halini görüntülemek için tıklayınız
\nKazananın Belirlenmesi
\nArtık sonraki oyuncuyu görüntüleyebiliyoruz. Bundan sonraki amacımız olarak, oyunun bitmesi durumunu belirtmek için, oyunun kazanıldığını ve artık başka bir hamle kalmadığını göstermemiz gerekiyor. Bunun için, kazanan oyuncuyu belirtmek amacıyla, dosyanın sonuna yardımcı bir fonksiyon ekleyebiliriz:
\nfunction calculateWinner(squares) {\n const lines = [\n [0, 1, 2],\n [3, 4, 5],\n [6, 7, 8],\n [0, 3, 6],\n [1, 4, 7],\n [2, 5, 8],\n [0, 4, 8],\n [2, 4, 6],\n ];\n for (let i = 0; i < lines.length; i++) {\n const [a, b, c] = lines[i];\n if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {\n return squares[a];\n }\n }\n return null;\n}9 kareden oluşan bir dizi göz önüne alındığında, bu fonksiyon kazananı kontrol edecek ve uygun şekilde 'X', 'O' veya null döndürecektir.
Board’un render fonksiyonunda, calculateWinner(squares) fonksiyonunu çağırarak, ilgili oyuncunun kazanma durumunun kontrol edilmesini sağlayabiliriz. Hamleyi yapan oyuncu kazandıysa, “Winner: X” veya “Winner: O” gibi kazananı belirten bir metin görüntüleyebiliriz. Şimdi, Board’un render fonksiyonunda yer alan status değişkenini aşağıdaki şekilde değiştirelim:
render() {\n const winner = calculateWinner(this.state.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n // geriye kalan kısımlar değiştirilmediOyunda farkettiyseniz bir oyuncu, diğer oyuncunun işaretlediği karenin üstüne tekrar işaretleme yapabiliyor. Buna ek olarak oyun kazanıldığı durumda da tekrar işaretleme yapmayı engellemeliyiz. Bunun için Board’un handleClick fonksiyonunu, belirli koşullarda return edecek şekilde değiştirelim:
handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }Kodun bu kısma kadar olan son halini görüntülemek için tıklayınız
\nTebrikler. Artık çalışan bir tic-tac-toe oyununuz var. Ayrıca bu kısma kadar React’in temel özelliklerini de öğrenmiş durumdasınız. Bu nedenle aslında gerçek kazanan sizsiniz.
\nZamanda Yolculuğun Eklenmesi
\nSon çalışma olarak, oyunda önceki hamlelere gitmeyi sağayacak olan “zamanda geriye gitme” özelliğini ekleyelim.
\nHamlelerin Geçmişinin Saklanması
\nEğer squares dizisine direkt olarak elle müdahale ederek değiştirseydik, zaman yolculuğu özelliğini geliştirmemiz daha zor olurdu.
Ancak, slice() fonksiyonu yardımıyla her hamleden sonra squares dizisinin kopyasını alarak immutable olarak değiştirilmesini sağladık. Bu durum bize, squares dizisinin geçmişteki her halinin kaydedebilmemize, ve halihazırda oluşan hamleler arasında gezinebilmemize imkan sağlamış oldu.
squares dizisinin geçmiş hallerini tutabilmek için history adında başka bir dizi oluşturabiliriz. history dizisi, oyunda ilk hamleden son hamleye kadar tahtanın tüm durumlarını barındırıyor olacaktır:
history = [\n // İlk hamleden öncesi\n {\n squares: [\n null, null, null,\n null, null, null,\n null, null, null,\n ]\n },\n // İlk hamleden sonrası\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, null,\n ]\n },\n // İkinci hamleden sonrası\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, 'O',\n ]\n },\n // ...\n]Şimdi history dizisinin, hangi bileşenin state’inde yer alması gerektiğine karar vereceğiz.
State’in Yukarı Taşınması (Tekrar)
\nEn üst seviyedeki Game bileşeninin, geçmiş hamlelerin listesini görüntülemesini istiyoruz. Bunun için, Game bileşeninin history‘e erişebilmesi gerekiyor. Bunu sağlamanın yolu, history‘i Game bileşenine taşımaktan geçiyor.
history state’ini, Game bileşenine yerleştireceğimiz için, bir alt bileşen olan Board’dan squares state’ini çıkarmamız gerekiyor. State’in Yukarı Taşınması bölümünde Square bileşeninden Board bileşenine taşıma yaptığımız gibi, şimdi de Board bileşeninden Game bileşenine taşıma işlemini gerçekleştirmemiz gerekiyor. Bu sayede Game bileşeni, Board’un verisi üzerinde tamamen kontrolü ele almış olacak ve history‘deki önceki hamlelerin Board’a işlemesini bildirebilecektir.
Öncelikle, Game bileşeninin constructor’ında, state’in ilk halini oluşturmamız gerekiyor:
\nclass Game extends React.Component {\n constructor(props) { super(props); this.state = { history: [{ squares: Array(9).fill(null), }], xIsNext: true, }; }\n render() {\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board />\n </div>\n <div className=\"game-info\">\n <div>{/* status */}</div>\n <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }\n}Şimdi squares dizisini ve onClick event’ini, prop’lar aracılığıyla Game bileşeninden, Board bileşenine aktarmamız gerekiyor. Birden fazla Square için Board’da sadece bir tane click handler’ı bulunduğundan dolayı, tıklanan square’in hangisi olduğunun belirlenebilmesi için, onClick handler’ına her bir Square’in konumunu iletmemiz gerekiyor. Bu gereksinimler için Board bileşenini aşağıdaki gibi değiştirebilirsiniz:
- \n
- Board’daki
constructor‘ı siliniz. \n - Board’un
renderSquaremetodundathis.state.squares[i]yerinethis.props.squares[i]yazınız. \n - Board’un
renderSquaremetodundathis.handleClick(i)yerinethis.props.onClick(i)yazınız. \n
Board’un son hali aşağıdaki gibi olmalıdır:
\nclass Board extends React.Component {\n handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }\n\n renderSquare(i) {\n return (\n <Square\n value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />\n );\n }\n\n render() {\n const winner = calculateWinner(this.state.squares);\n let status;\n if (winner) {\n status = 'Winner: ' + winner;\n } else {\n status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Şimdi de oyun geçmişindeki son girdiyi kullanarak, oyunun son durumunun belirlenmesi ve görüntülenmesi için, Game bileşenindeki render fonksiyonunu değiştirelim:
render() {\n const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board squares={current.squares} onClick={(i) => this.handleClick(i)} /> </div>\n <div className=\"game-info\">\n <div>{status}</div> <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }Oyunun durumunu Game bileşeni render ettiği için, Board’daki render metodundan oyunun durumunu ilgilendiren kısımları çıkarabiliriz:
render() { return ( <div> <div className=\"board-row\"> {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }Son olarak, Board bileşenindeki handleClick metodunu Game bileşenine taşıyacağız. Ayrıca, Game bileşeni Board’a göre daha farklı oluşturulduğu için, handleClick metodunu da uygun şekilde değiştirmemiz gerekiyor. Bunun için Game’in handleClick metodu içerisinde, oyundaki hamleleri history dizisine ekleyeceğiz:
handleClick(i) {\n const history = this.state.history; const current = history[history.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{ squares: squares, }]), xIsNext: !this.state.xIsNext,\n });\n }\n\nNot
\nBir diziye eleman eklemek için, genellikle dizinin
\npush()metodu kullanılır. Fakatpush()‘un aksineconcat()metodu orijinal diziyi değiştirmez. Bu nedenle immutability’nin sağlanması içinconcat()fonksiyonunun kullanılması önem teşkil etmektedir.
Geldiğimiz noktada, Board bileşeni sadece renderSquare ve render metodlarına ihtiyaç duyuyor. Oyunun durumu ve handleClick metodu ise artık Game bileşeninde yer alıyor.
Kodun bu kısma kadar olan son halini görüntülemek için tıklayınız
\nGeçmiş Hamlelerin Görüntülenmesi
\ntic-tac-toe oyununun geçmişini kaydedebildiğimize göre, artık oyuncuya geçmiş hamlelerin görüntülenmesini sağlayabiliriz.
\nDaha önce React elemanlarının, birinci kalite JavaScript nesneleri olduğunu öğrenmiştik. Bu sayede React elemanlarını, uygulama içerisinde istediğimiz yere aktarabiliyoruz. Bu nedenle JavaScript mantığıyla düşündüğümüzde, React’te birden fazla elemanı render edebilmek için, React elemanlarından oluşan bir diziyi kullabiliriz.
\nJavaScript’te diziler bir map() (harita) metodu içerirler. Bu metod sayesinde verileri istenilen şekilde haritalayabilirler. Örneğin 1, 2, 3 sayılarının, iki katını alan bir dizinin oluşturulmasını sağlayabilirler:
const numbers = [1, 2, 3];\nconst doubled = numbers.map(x => x * 2); // [2, 4, 6]map metodunu kullanarak oyunun hamle geçmişini, ekranda butonlar halinde görüntülemek için React elemanlarına map edebiliriz. Ve bu butonlara tıklayarak geçmiş hamlelere atlanmasını sağlayabiliriz.
Game’in render metodunda yer alan history diziyi üzerinde map fonksiyonunun çalıştırılmasını sağlayalım:
render() {\n const history = this.state.history;\n const current = history[history.length - 1];\n const winner = calculateWinner(current.squares);\n\n const moves = history.map((step, move) => { const desc = move ? 'Go to move #' + move : 'Go to game start'; return ( <li> <button onClick={() => this.jumpTo(move)}>{desc}</button> </li> ); });\n let status;\n if (winner) {\n status = 'Winner: ' + winner;\n } else {\n status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board\n squares={current.squares}\n onClick={(i) => this.handleClick(i)}\n />\n </div>\n <div className=\"game-info\">\n <div>{status}</div>\n <ol>{moves}</ol> </div>\n </div>\n );\n }Kodun bu kısma kadar olan son halini görüntülemek için tıklayınız
\nhistory dizisinin içinde yineleme yaptığımız için, step değişkeni mevcut history elemanının değerini, move ise geçerli history elemanının dizinini (index) ifade eder. Burada sadece move ile ilgilendiğimiz için step değişkeni hiçbir şeye atanmıyor.
tic-tac-toe oyununun geçmişindeki her bir hamle için, <button> içeren bir <li> elemanı oluşturuyoruz. Butondaki onClick metodu, üzerine tıklandığında this.jumpTo() fonksiyonunu çağırıyor fakat, henüz jumpTo() metodunu oluşturmadık. Şu an, oyun içerisinde oluşan hamlelerin bir listesini görüyor olmanız lazım. Ayrıca geliştirici araçları konsolunda da aşağıdaki şekilde bir uyarı vermiş olmalıdır:
\n\nWarning:\nEach child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.
\n
Üstteki uyarının ne anlama geldiğine bakalım.
\nKey seçimi
\nBir liste görüntüledğimizde React, render edilen her bir liste elemanı için bazı bilgileri saklar. Listeyi güncellediğimizde ise listede neyin değiştiğine karar vermesi gerekir. Çünkü listenin elemanlarını eklemiş, silmiş, tekrar düzenlemiş veya güncellemiş olabilirirz.
\nÖrnek olarak bir listenin kodlarının bu şekilde olup:
\n<li>Alexa: 7 tasks left</li>\n<li>Ben: 5 tasks left</li>bu koda değiştiğini düşünelim:
\n<li>Ben: 9 tasks left</li>\n<li>Claudia: 8 tasks left</li>\n<li>Alexa: 5 tasks left</li>Bu iki kodu okuyan bir kişi, sayıların değişmesine ek olarak Alexa ile Ben’in sıralamasının değiştiğini,ve araya Claudia’nın eklendiğini farkedecektir. Ancak React bir bilgisayar programıdır, ve amacımızın ne olduğunu kestiremez. React uygulamada listeyi değiştirmemizdeki maksadımızın ne olduğunu bilemeyeceğindan dolayı, her liste eleamanını birbirinden ayırt etmek için, liste elemanlarına bir key (anahtar değer) vermemiz gerekir. Bu örnekte, alexa, ben, claudia isimlerini key olarak kullanabilirz. Fakat bu verileri veritabanından getirseydik key olarak; Alexa, Ben, ve Claudia’nın ID’lerini kullanabilirdik:
<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>Bir liste tekrar render edileceği zaman React, her liste elemanının key’ini alır ve önceki listenin elemanlarıyla karşılaştırır. Eğer yeni listede, önceki listede bulunmayan bir key varsa, React bir <li> bileşeni oluşturur. Eğer önceki listede bulunan bir key, yeni listede bulunmuyorsa React, ilgili <li>‘yi yok eder. Eğer iki key eşleşiyorsa, eski liste elemanı yeni listeye taşınır. Render etme aşamaları arasında, state’in korunması amacıyla key’ler, her bir bileşenin kimliği hakkında React’e bilgi sunar. Bu sayede eğer bir bileşenin key’i değiştiyse, ilgili bileşen React tarafından yok edilir ve yeni bir state ile tekrar oluşturulur.
React’teki key kelimesi özeldir ve React içerisinde rezerve edilmiş kelimeler arasındadır (ref de rezerve edilmiştir, fakat daha gelişmiş bir özelliktir). Bir eleman oluşturulduğunda React, elemanın key özellğini alır ve direkt olarak return edilen elemanın üzerinde saklar. key, props‘a ait gibi görünse de, this.props.key kullanılarak erişilemez. Çünkü key özelliği, React’in otomatik olarak hangi bileşeni güncelleyeceğine karar vermesi için tasarlanmıştır. Bu nedenle props bir bileşenin, key‘i hakkında bilgi edinemez.
Dinamik listeler oluştururken, benzersiz key değerleri atamanız kesinlikle tavsiye edilir. Eğer uygun key değerine sahip değilseniz, verinizi gözden geçirerek uygun bir id değerin bulmak mantıklı olacaktır.
\nEğer bir key ataması yapmazsanız React, ekranda bir uyarı görüntüler ve varsayılan olarak ilgili liste elemanının index’ini key olarak kullanır. Dizinin indeksini key olarak kullanmak, liste elemanlarına ekleme/çıkarma veya tekrar sıralama yapılırken problem oluşturabilir. key={i} ataması yapmak uyarının susturulmasını sağlar fakat dizi indeksleri üzerindeki problemi gidermiş olmaz. Bu nedenle birçok durum için bu kullanım önerilmez.
Key’lerin uygulama içerisinde global olarak benzersiz olmasına gerek yoktur. Sadece bulunduğu bileşenin içerisinde yer alan diğer list elemanları arasında benzersiz olması yeterlidir.
\nZaman Yolculuğunun Kodlanması
\ntic-tac-toe oyununun geçmişinde, her bir geçmiş hamlenin benzersiz bir ID’si bulunmaktadır. Bu ID’ler, ardışık hamle sayılarından oluşurlar. Hamleler asla silinmezler, ortadan eklenmezler ve tekrar sıralanmazlar. Bu nedenle key olarak hamle index’inin kullanılması bu durum için uygundur.
\nGame bileşenindeki render metoduna <li key={move}> olacak şekilde key’imizi ekleyelim ve bu sayede React’in key hakkındaki uyarısını kaldıralım:
const moves = history.map((step, move) => {\n const desc = move ?\n 'Go to move #' + move :\n 'Go to game start';\n return (\n <li key={move}> <button onClick={() => this.jumpTo(move)}>{desc}</button>\n </li>\n );\n });Kodun bu kısma kadar olan son halini görüntülemek için tıklayınız
\nListe elemanlarındaki butonlara tıklamak, jumpTo metodu bulunmadığı için bir hata oluşturur. jumpTo‘yu kodlamadan önce, mevcut durumda hangi adımın görüntülendiğini belirtmek için Game bileşeninin state’ine stepNumber değişkenini eklememiz gerekiyor.
Game’in constructor‘ındaki başlangıç state’ine stepNumber: 0‘ı ekleyelim:
class Game extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n history: [{\n squares: Array(9).fill(null),\n }],\n stepNumber: 0, xIsNext: true,\n };\n }Sonra, Game’in içerisinde stepNumber değişkenini güncelleyecek olan jumpTo metodunu oluşturalım. Ayrıca değiştirdiğimiz stepNumber değişkeni çift ise xIsNext değişkenine true’yu atayalım:
handleClick(i) {\n // Bu metot değişmedi\n }\n\n jumpTo(step) { this.setState({ stepNumber: step, xIsNext: (step % 2) === 0, }); }\n render() {\n // Bu metot değişmedi\n }jumpTo metodunda dikkat edilmesi gereken, state’in history özelliğini güncellemedik. Bunun nedeni, state güncellemelerinin birleştirilmesi veya daha basit bir deyişle React’ın yalnızca setState yönteminde belirtilen özellikleri güncellemesi ve kalan durumu olduğu gibi bırakmasıdır. Daha fazla bilgi için dokümanın geri kalanına bakınız.
Şimdi, oyundaki bir kareye tıklandığında çağrılan handleClick metodunda birkaç değişiklik yapalım.
Artık eklediğimiz stepNumber değişkeni, kullanıcının mevcut hamlesini gösteriyor. Yeni bir hamle yaptıktan sonra, stepNumber değerini güncellememiz için this.setState() çağrısına stepNumber: history.length‘i eklememiz gerekiyor. Bu sayede, yeni bir hamle yapıldıktan sonra, sürekli aynı hamleyi görüntülemekten dolayı oluşan takılmayı engellemiş oluyoruz.
Ayrıca oyun geçmişine atama yapmak için this.state.history yerine this.state.history.slice(0, this.state.stepNumber + 1) yazacağız. Bu sayede, “zamanda geriye döndüğümüzde” o noktadan devam edebileceğiz, ve gelecekte yaptığımız hamleler işe yaramaz hale geleceğinden dolayı bu hamlelerin de slice() ile oyun tahtasından atılmasını sağlamış olacağız:
handleClick(i) {\n const history = this.state.history.slice(0, this.state.stepNumber + 1); const current = history[history.length - 1];\n const squares = current.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{\n squares: squares\n }]),\n stepNumber: history.length, xIsNext: !this.state.xIsNext,\n });\n }Son olarak, Game bileşeninin render metodunda, her zaman yapılan son hamlenin render edilmesi yerine, stepNumber‘a göre mevcut seçilen hamlenin render edilmesini sağlayacağız:
render() {\n const history = this.state.history;\n const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares);\n\n // Kalan kısımlar değişmediOyun geçmişinde herhangi bir adıma tıkladığımızda, tic-tac-toe tahtası o adım bittikten sonraki halini alacak şekilde anında güncellenecektir.
\nKodun bu kısma kadar olan son halini görüntülemek için tıklayınız
\nSonuç Olarak
\nTebrikler, bir tic-tac-toe oyunu kodladınız. Bu oyun:
\n- \n
- Kendisinden de bekleyeceğiniz gibi bir tic-tac-toe oynamanızı sağlar, \n
- Bir oyuncu kazandığında bunu gösterir, \n
- Oyun ilerledikçe oyun geçmişini saklar, \n
- Oyunculara oyun geçmişini görüntüleyebilmelerini ve oyun tahtasının önceki versiyonlarına gidebilmelerini sağlar. \n
İyi iş çıkardınız. Umarız artık React’in nasıl çalıştığını öğrenmişsinizdir.
\nKodun son haline buradan bakabilirsiniz.
\nEğer biraz daha boş vaktiniz varsa ve yeni edindiğiniz React yetenekleriniz ile ilgili pratik yapmak istiyorsanız, aşağıda zorluk derecesine göre sıralanmış işler sayesinde, tic-tac-toe oyununuzu geliştirerek daha ileriye götürebilirsiniz:
\n- \n
- Oyun geçmişinde, her hamlenin konumunun “(satır,sütun)” formatına göre görüntülenmesi. \n
- Oyun geçmişi listesinde tıklanan liste elemanının, seçili olarak işaretlenmesi. \n
- Board’daki karelerin, elle hardcoded olarak kodlanmasının yerine iki for döngüsü kullanılarak Board bileşeninin düzenlenmesi. \n
- Bir buton eklenerek, tıklandığında oyun geçmişinin artan veya azalan şekilde sıralanmasının sağlanması. \n
- Bir kişi kazandığında, kazanmasına vesile olan 3 karenin renklendirilerek vurgulanması. \n
- Eğer hiç kazanan yoksa, berabere mesajının görüntülenmesi. \n
Bu öğreticide, React konseptleri olan elemanlar, bileşenler, prop’lar, ve state’e değindik. Bu konular hakkında daha detaylı bir açıklama için dokümanın geri kalanını inceleyebilirsiniz. Bileşen tanımlama hakkında daha fazla bilgi almak için React.Component API dokümanını inceleyebilirsiniz.