{"id":3369,"date":"2024-11-08T23:45:20","date_gmt":"2024-11-08T20:45:20","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/"},"modified":"2024-11-08T23:45:20","modified_gmt":"2024-11-08T20:45:20","slug":"react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/","title":{"rendered":"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!"},"content":{"rendered":"<p>React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!<\/p>\n<p>Merhaba arkada\u015flar! Bug\u00fcn sizlere React ile nas\u0131l sa\u011flam bir Pok\u00e9mon oyunu geli\u015ftirebilece\u011fimiz hakk\u0131nda bir rehber haz\u0131rlad\u0131m. Bu yaz\u0131da, bir oyun geli\u015ftirmek i\u00e7in React&#8217;in nas\u0131l kullan\u0131labilece\u011fini, SOLID prensiplerine g\u00f6re kodun nas\u0131l d\u00fczenlenebilece\u011fini ve farkl\u0131 \u00f6zellikleri nas\u0131l uygulayabilece\u011fimizi inceleyece\u011fiz.<\/p>\n<h2>Ba\u015flang\u0131\u00e7: Projenizi Kurmak<\/h2>\n<p>\u00d6ncelikle yeni bir React projesi olu\u015fturarak i\u015fe ba\u015flayaca\u011f\u0131z. Bunu yapmak i\u00e7in  terminalinizde  a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n<p>&#8220;`bash<br \/>\nnpx create-react-app pokemon-game<br \/>\n&#8220;`<\/p>\n<p>Bu komut, gerekli t\u00fcm dosyalar\u0131 ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 i\u00e7eren yeni bir  `pokemon-game`  klas\u00f6r\u00fc olu\u015fturacakt\u0131r. Proje klas\u00f6r\u00fcne ge\u00e7in ve geli\u015ftirme sunucusunu ba\u015flat\u0131n:<\/p>\n<p>&#8220;`bash<br \/>\ncd pokemon-game<br \/>\nnpm start<br \/>\n&#8220;`<\/p>\n<p>Taray\u0131c\u0131n\u0131zda  `http:\/\/localhost:3000`  adresini ziyaret ederek projenizin \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rebilirsiniz. \u015eimdi, oyunumuzun temel yap\u0131s\u0131n\u0131 olu\u015fturmaya ba\u015flayabiliriz.<\/p>\n<h2>Oyunun Temel Yap\u0131s\u0131<\/h2>\n<p>Oyunumuzu \u00fc\u00e7 temel bile\u015fenden olu\u015fturaca\u011f\u0131z:<\/p>\n<ul>\n<li> **Oyun Alan\u0131:** Oyunun g\u00f6rsel olarak sunuldu\u011fu alan.<\/li>\n<li> **Oyuncu:** Oyunda kontrol etti\u011fimiz karakter.<\/li>\n<li> **D\u00fc\u015fman:** Oyuncunun sava\u015ft\u0131\u011f\u0131 rakip Pok\u00e9mon.<\/li>\n<\/ul>\n<p>Bu bile\u015fenler, oyunun temel i\u015flevlerini sa\u011flayacak ve daha karma\u015f\u0131k \u00f6zellikleri geli\u015ftirmek i\u00e7in bir temel olu\u015fturacakt\u0131r.<\/p>\n<h2>SOLID Prensipleri: Kodunuzun D\u00fczenli Olmas\u0131n\u0131 Sa\u011flamak<\/h2>\n<p>Oyunumuzu geli\u015ftirirken SOLID prensiplerine uymak, kodumuzun daha d\u00fczenli, \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n<h3>Single Responsibility Principle (SRP): Tek Sorumluluk Prensibi<\/h3>\n<p>Bu prensip, her bir kod par\u00e7as\u0131n\u0131n sadece tek bir sorumlulu\u011fu olmas\u0131n\u0131 vurgular. \u00d6rne\u011fin,  `Oyuncu`  bile\u015fenimiz sadece oyuncuyu temsil etmeli ve oyunun di\u011fer i\u015flevleri ile ilgilenmemelidir.<\/p>\n<h3>Open\/Closed Principle (OCP): A\u00e7\u0131k\/Kapal\u0131 Prensibi<\/h3>\n<p>Bu prensip, kodun yeni \u00f6zelliklere a\u00e7\u0131k, ancak de\u011fi\u015fikliklere kapal\u0131 olmas\u0131n\u0131 s\u00f6yler. \u00d6rne\u011fin, yeni bir  Pok\u00e9mon  t\u00fcr\u00fcn\u00fc oyuna eklemek i\u00e7in mevcut kodu de\u011fi\u015ftirmek yerine,  `Pok\u00e9mon`  s\u0131n\u0131f\u0131na yeni bir alt s\u0131n\u0131f eklemeliyiz.<\/p>\n<h3>Liskov Substitution Principle (LSP): Liskov Yerine Ge\u00e7me Prensibi<\/h3>\n<p>Bu prensip, bir alt s\u0131n\u0131f\u0131n \u00fcst s\u0131n\u0131f\u0131 yerine kullan\u0131labilmesini sa\u011flar. \u00d6rne\u011fin,  `Sald\u0131r\u0131`  s\u0131n\u0131f\u0131n\u0131n bir alt s\u0131n\u0131f\u0131 olan  `Ate\u015fSald\u0131r\u0131s\u0131`,  `Sald\u0131r\u0131`  s\u0131n\u0131f\u0131n\u0131n yerine ge\u00e7ebilmelidir.<\/p>\n<h3>Interface Segregation Principle (ISP): Aray\u00fcz Ayr\u0131m\u0131 Prensibi<\/h3>\n<p>Bu prensip, bir aray\u00fcz\u00fcn sadece kullanaca\u011f\u0131 metotlar\u0131 i\u00e7ermesini s\u00f6yler. \u00d6rne\u011fin,  `HareketEdebilen`  aray\u00fcz\u00fc, sadece  `hareketEt()`  metodunu i\u00e7ermeli ve  `sald\u0131r\u0131()`  metodunu i\u00e7ermemelidir.<\/p>\n<h3>Dependency Inversion Principle (DIP): Ba\u011f\u0131ml\u0131l\u0131k Tersine \u00c7evirme Prensibi<\/h3>\n<p>Bu prensip, y\u00fcksek seviyeli mod\u00fcllerin d\u00fc\u015f\u00fck seviyeli mod\u00fcllere ba\u011f\u0131ml\u0131 olmamas\u0131n\u0131 s\u00f6yler. \u00d6rne\u011fin,  `Oyuncu`  s\u0131n\u0131f\u0131,  `D\u00fc\u015fman`  s\u0131n\u0131f\u0131na do\u011frudan ba\u011f\u0131ml\u0131 olmamal\u0131d\u0131r. Bunun yerine, bir aray\u00fcz arac\u0131l\u0131\u011f\u0131yla etkile\u015fime girmelidir.<\/p>\n<h2>Oyunun \u00d6zelliklerini Geli\u015ftirmek<\/h2>\n<p>\u015eimdi oyunumuz i\u00e7in baz\u0131 temel \u00f6zellikleri geli\u015ftirelim.<\/p>\n<h3>Oyun Alan\u0131<\/h3>\n<p>Oyun alan\u0131n\u0131  `App.js`  dosyas\u0131nda olu\u015fturabiliriz. Bu alanda, oyuncunun hareket etti\u011fi ve d\u00fc\u015fman\u0131n g\u00f6r\u00fcnd\u00fc\u011f\u00fc bir alan olacakt\u0131r.<\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState } from &#8216;react&#8217;;<\/p>\n<p>function App() {<br \/>\n  const [oyuncuKonumu, setOyuncuKonumu] = useState({ x: 0, y: 0 });<br \/>\n  const [d\u00fc\u015fmanKonumu, setD\u00fc\u015fmanKonumu] = useState({ x: 5, y: 5 });<\/p>\n<p>  const hareketEt = (direction) => {<br \/>\n    switch (direction) {<br \/>\n      case &#8216;yukar\u0131&#8217;:<br \/>\n        setOyuncuKonumu({ &#8230;oyuncuKonumu, y: oyuncuKonumu.y &#8211; 1 });<br \/>\n        break;<br \/>\n      case &#8216;a\u015fa\u011f\u0131&#8217;:<br \/>\n        setOyuncuKonumu({ &#8230;oyuncuKonumu, y: oyuncuKonumu.y + 1 });<br \/>\n        break;<br \/>\n      case &#8216;sol&#8217;:<br \/>\n        setOyuncuKonumu({ &#8230;oyuncuKonumu, x: oyuncuKonumu.x &#8211; 1 });<br \/>\n        break;<br \/>\n      case &#8216;sa\u011f&#8217;:<br \/>\n        setOyuncuKonumu({ &#8230;oyuncuKonumu, x: oyuncuKonumu.x + 1 });<br \/>\n        break;<br \/>\n      default:<br \/>\n        break;<br \/>\n    }<br \/>\n  };<\/p>\n<p>  return (<\/p>\n<div>\n<div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(10, 1fr)',\n          gridTemplateRows: 'repeat(10, 1fr)',\n          width: '400px',\n          height: '400px',\n          border: '1px solid black',\n        }}\n      ><\/p>\n<div\n          style={{\n            position: 'absolute',\n            left: oyuncuKonumu.x * 40 + 'px',\n            top: oyuncuKonumu.y * 40 + 'px',\n            width: '40px',\n            height: '40px',\n            backgroundColor: 'blue',\n          }}\n        \/><\/p>\n<div\n          style={{\n            position: 'absolute',\n            left: d\u00fc\u015fmanKonumu.x * 40 + 'px',\n            top: d\u00fc\u015fmanKonumu.y * 40 + 'px',\n            width: '40px',\n            height: '40px',\n            backgroundColor: 'red',\n          }}\n        \/>\n      <\/div>\n<p>      <button onClick={() => hareketEt(&#8216;yukar\u0131&#8217;)}>Yukar\u0131<\/button><br \/>\n      <button onClick={() => hareketEt(&#8216;a\u015fa\u011f\u0131&#8217;)}>A\u015fa\u011f\u0131<\/button><br \/>\n      <button onClick={() => hareketEt(&#8216;sol&#8217;)}>Sol<\/button><br \/>\n      <button onClick={() => hareketEt(&#8216;sa\u011f&#8217;)}>Sa\u011f<\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default App;<br \/>\n&#8220;`<\/p>\n<p>Bu kod, 10&#215;10 boyutunda bir \u0131zgara olu\u015fturur ve oyuncunun ve d\u00fc\u015fman\u0131n konumunu temsil etmek i\u00e7in iki kare ekler. Ayr\u0131ca, oyuncunun hareket etmesini sa\u011flayan d\u00f6rt d\u00fc\u011fme ekler.<\/p>\n<h3>Oyuncu<\/h3>\n<p>Oyuncuyu temsil etmek i\u00e7in  `Oyuncu`  bile\u015fenini olu\u015fturabiliriz. Bu bile\u015fen, oyuncunun konumu ve hareket etme fonksiyonlar\u0131n\u0131 i\u00e7erecektir.<\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState } from &#8216;react&#8217;;<\/p>\n<p>function Oyuncu() {<br \/>\n  const [konum, setKonum] = useState({ x: 0, y: 0 });<\/p>\n<p>  const hareketEt = (direction) => {<br \/>\n    switch (direction) {<br \/>\n      case &#8216;yukar\u0131&#8217;:<br \/>\n        setKonum({ &#8230;konum, y: konum.y &#8211; 1 });<br \/>\n        break;<br \/>\n      case &#8216;a\u015fa\u011f\u0131&#8217;:<br \/>\n        setKonum({ &#8230;konum, y: konum.y + 1 });<br \/>\n        break;<br \/>\n      case &#8216;sol&#8217;:<br \/>\n        setKonum({ &#8230;konum, x: konum.x &#8211; 1 });<br \/>\n        break;<br \/>\n      case &#8216;sa\u011f&#8217;:<br \/>\n        setKonum({ &#8230;konum, x: konum.x + 1 });<br \/>\n        break;<br \/>\n      default:<br \/>\n        break;<br \/>\n    }<br \/>\n  };<\/p>\n<p>  return (<\/p>\n<div\n      style={{\n        position: 'absolute',\n        left: konum.x * 40 + 'px',\n        top: konum.y * 40 + 'px',\n        width: '40px',\n        height: '40px',\n        backgroundColor: 'blue',\n      }}\n    \/><br \/>\n  );<br \/>\n}<\/p>\n<p>export default Oyuncu;<br \/>\n&#8220;`<\/p>\n<p>Bu kod, oyuncunun konumunu  `konum`  de\u011fi\u015fkeninde saklar ve  `hareketEt()`  fonksiyonu arac\u0131l\u0131\u011f\u0131yla hareket etmesini sa\u011flar.<\/p>\n<h3>D\u00fc\u015fman<\/h3>\n<p>D\u00fc\u015fman\u0131 temsil etmek i\u00e7in  `D\u00fc\u015fman`  bile\u015fenini olu\u015fturabiliriz. Bu bile\u015fen, d\u00fc\u015fman\u0131n konumunu, g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve sald\u0131r\u0131 fonksiyonlar\u0131n\u0131 i\u00e7erecektir.<\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState } from &#8216;react&#8217;;<\/p>\n<p>function D\u00fc\u015fman() {<br \/>\n  const [konum, setKonum] = useState({ x: 5, y: 5 });<\/p>\n<p>  return (<\/p>\n<div\n      style={{\n        position: 'absolute',\n        left: konum.x * 40 + 'px',\n        top: konum.y * 40 + 'px',\n        width: '40px',\n        height: '40px',\n        backgroundColor: 'red',\n      }}\n    \/><br \/>\n  );<br \/>\n}<\/p>\n<p>export default D\u00fc\u015fman;<br \/>\n&#8220;`<\/p>\n<p>Bu kod, d\u00fc\u015fman\u0131n konumunu  `konum`  de\u011fi\u015fkeninde saklar ve k\u0131rm\u0131z\u0131 bir kare olarak g\u00f6r\u00fcnt\u00fcler.<\/p>\n<h2>Sava\u015f Sistemi<\/h2>\n<p>Oyunumuzda bir sava\u015f sistemi geli\u015ftirmek i\u00e7in  `Sava\u015f`  bile\u015fenini olu\u015fturabiliriz. Bu bile\u015fen, oyuncunun ve d\u00fc\u015fman\u0131n sald\u0131r\u0131lar\u0131n\u0131 ve sava\u015f sonucunu y\u00f6netecektir.<\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState } from &#8216;react&#8217;;<\/p>\n<p>function Sava\u015f() {<br \/>\n  const [oyuncuSa\u011fl\u0131\u011f\u0131, setOyuncuSa\u011fl\u0131\u011f\u0131] = useState(100);<br \/>\n  const [d\u00fc\u015fmanSa\u011fl\u0131\u011f\u0131, setD\u00fc\u015fmanSa\u011fl\u0131\u011f\u0131] = useState(100);<\/p>\n<p>  const oyuncuSald\u0131r\u0131 = () => {<br \/>\n    setD\u00fc\u015fmanSa\u011fl\u0131\u011f\u0131(d\u00fc\u015fmanSa\u011fl\u0131\u011f\u0131 &#8211; 10);<br \/>\n  };<\/p>\n<p>  const d\u00fc\u015fmanSald\u0131r\u0131 = () => {<br \/>\n    setOyuncuSa\u011fl\u0131\u011f\u0131(oyuncuSa\u011fl\u0131\u011f\u0131 &#8211; 10);<br \/>\n  };<\/p>\n<p>  return (<\/p>\n<div>\n<h2>Sava\u015f<\/h2>\n<p>Oyuncu Sa\u011fl\u0131\u011f\u0131: {oyuncuSa\u011fl\u0131\u011f\u0131}<\/p>\n<p>D\u00fc\u015fman Sa\u011fl\u0131\u011f\u0131: {d\u00fc\u015fmanSa\u011fl\u0131\u011f\u0131}<\/p>\n<p>      <button onClick={oyuncuSald\u0131r\u0131}>Sald\u0131r\u0131<\/button><br \/>\n      <button onClick={d\u00fc\u015fmanSald\u0131r\u0131}>D\u00fc\u015fman Sald\u0131r\u0131<\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default Sava\u015f;<br \/>\n&#8220;`<\/p>\n<p>Bu kod, oyuncunun ve d\u00fc\u015fman\u0131n sa\u011fl\u0131\u011f\u0131n\u0131 saklar ve sald\u0131r\u0131 butonlar\u0131 arac\u0131l\u0131\u011f\u0131yla sa\u011fl\u0131k de\u011ferlerini g\u00fcnceller.<\/p>\n<h2>Ek \u00d6zellikler<\/h2>\n<p>Oyunumuzu daha ilgi \u00e7ekici hale getirmek i\u00e7in baz\u0131 ek \u00f6zellikler ekleyebiliriz.<\/p>\n<h3>Pok\u00e9mon Se\u00e7imi<\/h3>\n<p>Oyuncunun ba\u015flang\u0131\u00e7ta bir Pok\u00e9mon se\u00e7mesini sa\u011flamak i\u00e7in  `Pok\u00e9monSe\u00e7imi`  bile\u015fenini olu\u015fturabiliriz.<\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState } from &#8216;react&#8217;;<\/p>\n<p>function Pok\u00e9monSe\u00e7imi() {<br \/>\n  const [se\u00e7ilenPok\u00e9mon, setSe\u00e7ilenPok\u00e9mon] = useState(null);<br \/>\n  const pokemonlar = [&#8216;Pikachu&#8217;, &#8216;Bulbasaur&#8217;, &#8216;Charmander&#8217;];<\/p>\n<p>  const se\u00e7 = (pokemon) => {<br \/>\n    setSe\u00e7ilenPok\u00e9mon(pokemon);<br \/>\n  };<\/p>\n<p>  return (<\/p>\n<div>\n<h2>Pok\u00e9mon Se\u00e7<\/h2>\n<p>      {pokemonlar.map((pokemon) => (<br \/>\n        <button key={pokemon} onClick={() => se\u00e7(pokemon)}><br \/>\n          {pokemon}<br \/>\n        <\/button><br \/>\n      ))}<br \/>\n      {se\u00e7ilenPok\u00e9mon &#038;&#038; <\/p>\n<p>Se\u00e7ilen Pok\u00e9mon: {se\u00e7ilenPok\u00e9mon}<\/p>\n<p>}\n    <\/p><\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default Pok\u00e9monSe\u00e7imi;<br \/>\n&#8220;`<\/p>\n<p>Bu kod, oyuncunun  `pokemonlar`  dizisinden bir Pok\u00e9mon se\u00e7mesini sa\u011flar.<\/p>\n<h3>Hareketler<\/h3>\n<p>Oyuncunun farkl\u0131 sald\u0131r\u0131lar kullanabilmesi i\u00e7in  `Hareketler`  bile\u015fenini olu\u015fturabiliriz.<\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState } from &#8216;react&#8217;;<\/p>\n<p>function Hareketler() {<br \/>\n  const [se\u00e7ilenHareket, setSe\u00e7ilenHareket] = useState(null);<br \/>\n  const hareketler = [&#8216;Ate\u015f Topu&#8217;, &#8216;Elektrik \u015eoku&#8217;, &#8216;Yaprak K\u0131l\u0131c\u0131&#8217;];<\/p>\n<p>  const se\u00e7 = (hareket) => {<br \/>\n    setSe\u00e7ilenHareket(hareket);<br \/>\n  };<\/p>\n<p>  return (<\/p>\n<div>\n<h2>Hareketler<\/h2>\n<p>      {hareketler.map((hareket) => (<br \/>\n        <button key={hareket} onClick={() => se\u00e7(hareket)}><br \/>\n          {hareket}<br \/>\n        <\/button><br \/>\n      ))}<br \/>\n      {se\u00e7ilenHareket &#038;&#038; <\/p>\n<p>Se\u00e7ilen Hareket: {se\u00e7ilenHareket}<\/p>\n<p>}\n    <\/p><\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default Hareketler;<br \/>\n&#8220;`<\/p>\n<p>Bu kod, oyuncunun  `hareketler`  dizisinden bir hareket se\u00e7mesini sa\u011flar.<\/p>\n<h3>Ses ve G\u00f6rseller<\/h3>\n<p>Oyunumuzu daha etkile\u015fimli hale getirmek i\u00e7in ses efektleri ve g\u00f6rseller ekleyebiliriz.<\/p>\n<p>Ses efektleri i\u00e7in  `Howler.js`  k\u00fct\u00fcphanesini kullanabiliriz.  G\u00f6rseller i\u00e7in ise kendi resimlerimizi veya \u00fccretsiz kaynaklardan yararlanabiliriz.  Daha fazla bilgi i\u00e7in  <a href=\"https:\/\/howlerjs.com\/\">Howler.js<\/a>  ve  <a href=\"https:\/\/pixabay.com\/\">Pixabay<\/a>  sitelerini ziyaret edebilirsiniz.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Bu makalede, React ile nas\u0131l sa\u011flam bir Pok\u00e9mon oyunu geli\u015ftirebilece\u011fimizi g\u00f6rd\u00fck. SOLID prensiplerine uymak, kodumuzun d\u00fczenli, \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flad\u0131. Ayr\u0131ca, oyunun temel yap\u0131s\u0131n\u0131, sava\u015f sistemini ve ek \u00f6zellikleri geli\u015ftirdik. Oyunumuza daha fazla \u00f6zellik ekleyerek ve g\u00f6rsel unsurlar\u0131 geli\u015ftirerek daha da ilgin\u00e7 hale getirebiliriz.<\/p>\n<p>Umar\u0131m bu rehber size faydal\u0131 olmu\u015ftur. Oyun geli\u015ftirmek i\u00e7in React&#8217;in g\u00fc\u00e7l\u00fc bir ara\u00e7 oldu\u011funu unutmay\u0131n! Kendi oyununuzu geli\u015ftirmek i\u00e7in  <a href=\"https:\/\/fatihsoysal.com\/\">fatihsoysal.com<\/a>  sitesini ziyaret edebilir ve daha fazla bilgi edinebilirsiniz.<\/p>\n<p>#Etiketler<br \/>\nReact, Pok\u00e9mon, Oyun Geli\u015ftirme, SOLID Prensipleri, JavaScript, Web Geli\u015ftirme, E\u011flence, Oyun, Kodlama, Programlama, Yaz\u0131l\u0131m, Uygulama, Web, Mobil, Teknoloji,  Howler.js, Pixabay<\/p>\n","protected":false},"excerpt":{"rendered":"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131! Merhaba arkada\u015flar! Bug\u00fcn sizlere React ile nas\u0131l sa\u011flam&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3369","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!<\/title>\n<meta name=\"description\" content=\"Merhaba arkada\u015flar! Bug\u00fcn sizlere React ile nas\u0131l sa\u011flam bir Pok\u00e9mon oyunu geli\u015ftirebilece\u011fimiz hakk\u0131nda bir rehber haz\u0131rlad\u0131m. Bu yaz\u0131da, bir oyun geli\u015ftirmek i\u00e7in React&#039;in nas\u0131l kullan\u0131labilece\u011fini, SOLID prensiplerine g\u00f6re kodun nas\u0131l d\u00fczenlenebilece\u011fini ve farkl\u0131 \u00f6zellikleri nas\u0131l uygulayabilece\u011fimizi inceleyece\u011fiz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!\" \/>\n<meta property=\"og:description\" content=\"Merhaba arkada\u015flar! Bug\u00fcn sizlere React ile nas\u0131l sa\u011flam bir Pok\u00e9mon oyunu geli\u015ftirebilece\u011fimiz hakk\u0131nda bir rehber haz\u0131rlad\u0131m. Bu yaz\u0131da, bir oyun geli\u015ftirmek i\u00e7in React&#039;in nas\u0131l kullan\u0131labilece\u011fini, SOLID prensiplerine g\u00f6re kodun nas\u0131l d\u00fczenlenebilece\u011fini ve farkl\u0131 \u00f6zellikleri nas\u0131l uygulayabilece\u011fimizi inceleyece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-08T20:45:20+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!\",\"datePublished\":\"2024-11-08T20:45:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/\"},\"wordCount\":1345,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/\",\"name\":\"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-11-08T20:45:20+00:00\",\"description\":\"Merhaba arkada\u015flar! Bug\u00fcn sizlere React ile nas\u0131l sa\u011flam bir Pok\u00e9mon oyunu geli\u015ftirebilece\u011fimiz hakk\u0131nda bir rehber haz\u0131rlad\u0131m. Bu yaz\u0131da, bir oyun geli\u015ftirmek i\u00e7in React'in nas\u0131l kullan\u0131labilece\u011fini, SOLID prensiplerine g\u00f6re kodun nas\u0131l d\u00fczenlenebilece\u011fini ve farkl\u0131 \u00f6zellikleri nas\u0131l uygulayabilece\u011fimizi inceleyece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!","description":"Merhaba arkada\u015flar! Bug\u00fcn sizlere React ile nas\u0131l sa\u011flam bir Pok\u00e9mon oyunu geli\u015ftirebilece\u011fimiz hakk\u0131nda bir rehber haz\u0131rlad\u0131m. Bu yaz\u0131da, bir oyun geli\u015ftirmek i\u00e7in React'in nas\u0131l kullan\u0131labilece\u011fini, SOLID prensiplerine g\u00f6re kodun nas\u0131l d\u00fczenlenebilece\u011fini ve farkl\u0131 \u00f6zellikleri nas\u0131l uygulayabilece\u011fimizi inceleyece\u011fiz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/","og_locale":"tr_TR","og_type":"article","og_title":"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!","og_description":"Merhaba arkada\u015flar! Bug\u00fcn sizlere React ile nas\u0131l sa\u011flam bir Pok\u00e9mon oyunu geli\u015ftirebilece\u011fimiz hakk\u0131nda bir rehber haz\u0131rlad\u0131m. Bu yaz\u0131da, bir oyun geli\u015ftirmek i\u00e7in React'in nas\u0131l kullan\u0131labilece\u011fini, SOLID prensiplerine g\u00f6re kodun nas\u0131l d\u00fczenlenebilece\u011fini ve farkl\u0131 \u00f6zellikleri nas\u0131l uygulayabilece\u011fimizi inceleyece\u011fiz.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-11-08T20:45:20+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"7 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!","datePublished":"2024-11-08T20:45:20+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/"},"wordCount":1345,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/","url":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/","name":"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-11-08T20:45:20+00:00","description":"Merhaba arkada\u015flar! Bug\u00fcn sizlere React ile nas\u0131l sa\u011flam bir Pok\u00e9mon oyunu geli\u015ftirebilece\u011fimiz hakk\u0131nda bir rehber haz\u0131rlad\u0131m. Bu yaz\u0131da, bir oyun geli\u015ftirmek i\u00e7in React'in nas\u0131l kullan\u0131labilece\u011fini, SOLID prensiplerine g\u00f6re kodun nas\u0131l d\u00fczenlenebilece\u011fini ve farkl\u0131 \u00f6zellikleri nas\u0131l uygulayabilece\u011fimizi inceleyece\u011fiz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-saglam-bir-pokemon-oyunu-gelistirmek-bir-gelistiricinin-macerasi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React ile Sa\u011flam Bir Pok\u00e9mon Oyunu Geli\u015ftirmek: Bir Geli\u015ftiricinin Maceras\u0131!"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=3369"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3369\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=3369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=3369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=3369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}