{"id":16223,"date":"2024-10-21T16:03:31","date_gmt":"2024-10-21T12:33:31","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=16223"},"modified":"2024-10-21T16:03:31","modified_gmt":"2024-10-21T12:33:31","slug":"prerequisites-for-react-js","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/prerequisites-for-react-js\/","title":{"rendered":"ReactJS \u00f6\u011frenmek i\u00e7in \u00f6n ko\u015fullar"},"content":{"rendered":"<h2 id=\"%d9%85%d9%82%d8%af%d9%85%d9%87\">girii\u015f<\/h2>\n<p>React JS, a\u00e7\u0131k kaynakl\u0131 bir \u00f6n u\u00e7 k\u00fct\u00fcphanesidir. Bu k\u00fct\u00fcphanenin temel amac\u0131, web ve mobil uygulamalar i\u00e7in h\u0131zl\u0131 ve ilgi \u00e7ekici kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmakt\u0131r.<\/p>\n<p>Facebook taraf\u0131ndan geli\u015ftirilen ReactJS, web sitelerinin \u00e7ekici g\u00f6r\u00fcnmesini sa\u011flar ve \u00e7o\u011fu geli\u015ftiricinin ilgisini \u00e7eker. Ancak bir\u00e7ok geli\u015ftirici, React JS&#039;nin \u00f6n ko\u015fullar\u0131n\u0131 anlamadan do\u011frudan ReactJS&#039;ye (veya ba\u015fka bir k\u00fct\u00fcphane veya framework&#039;e) ge\u00e7me hatas\u0131na d\u00fc\u015fer. Do\u011frudan React&#039;e ge\u00e7mek, k\u00fct\u00fcphaneyi \u00f6\u011frenirken ve m\u00fclakatlarda size bir\u00e7ok sorun \u00e7\u0131karabilir.<\/p>\n<h2 id=\"%d9%be%db%8c%d8%b4-%d9%86%db%8c%d8%a7%d8%b2%d9%87%d8%a7%db%8c-%d8%b6%d8%b1%d9%88%d8%b1%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%db%8c%d8%a7%d8%af%da%af%db%8c%d8%b1%db%8c-reactjs\">ReactJS \u00f6\u011frenmek i\u00e7in temel \u00f6n ko\u015fullar<\/h2>\n<h5 id=\"html-%d9%88-css\">HTML ve CSS<\/h5>\n<p>Web&#039;in yap\u0131 ta\u015flar\u0131 HTML ve CSS&#039;dir. Web taray\u0131c\u0131n\u0131zda bir web sitesinin her bir bile\u015fenini tan\u0131mlamak i\u00e7in kullan\u0131lan dile HTML veya Hiper Metin \u0130\u015faretleme Dili denir. Sonu\u00e7 olarak, taray\u0131c\u0131n\u0131z\u0131n g\u00f6r\u00fcnt\u00fcledi\u011finiz web sayfas\u0131n\u0131 nas\u0131l d\u00fczenleyece\u011fini anlamas\u0131na yard\u0131mc\u0131 olan HTML&#039;i kullanarak ba\u015fl\u0131klar\u0131, paragraflar\u0131, ba\u011flant\u0131lar\u0131, yerle\u015ftirmeleri ve daha fazlas\u0131n\u0131 belirtebilirsiniz.<\/p>\n<p>CSS veya Basamakl\u0131 Stil Sayfalar\u0131 olarak bilinen dil, web sayfalar\u0131na g\u00f6r\u00fcn\u00fcm ve d\u00fczen kazand\u0131ran \u015feydir. Ba\u015fka bir deyi\u015fle, CSS, g\u00fczel yaz\u0131 tipleri, canl\u0131 renkler, g\u00f6z al\u0131c\u0131 arka planlar ve hatta g\u00fczel ge\u00e7i\u015fler ve 3B efektlerle \u00e7ekici web siteleri olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<p>Her \u00f6n u\u00e7 geli\u015ftiricisi hem HTML hem de CSS ile ba\u015flar. Dolay\u0131s\u0131yla, React kullanmay\u0131 \u00f6\u011frendi\u011finizde HTML ve CSS kodlamada yetkin hale gelmi\u015f olmal\u0131s\u0131n\u0131z.<\/p>\n<p>Reactjs \u00f6\u011frenmenin ilk \u00f6n ko\u015fulu, HTML ve CSS \u00f6\u011frenmeye ba\u015flamakt\u0131r. \u00d6n u\u00e7 uygulamalar\u0131 ve duyarl\u0131 web uygulamalar\u0131 i\u00e7in HTML ve CSS&#039;nin yan\u0131 s\u0131ra anlamsal HTML etiketleri olu\u015fturmay\u0131, CSS se\u00e7icileri yazmay\u0131, s\u0131n\u0131flar\u0131 ve CSS ge\u00e7ersiz k\u0131lmalar\u0131 kullanmay\u0131, kutu modelini uygulamay\u0131 ve border-box ve flexbox&#039;a ge\u00e7i\u015f yapmay\u0131 bilmeniz gerekir. .<\/p>\n<h5 id=\"%d9%85%d8%a8%d8%a7%d9%86%db%8c-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d9%88-es6\">JavaScript ve ES6 Temelleri<\/h5>\n<p>JavaScript&#039;in bir sonraki s\u00fcr\u00fcm\u00fc olan ECMAScript 6 veya ES6, bir\u00e7ok de\u011fi\u015fiklik ve yeni \u00f6zellik getiriyor. ES6&#039;n\u0131n muhte\u015fem yeni \u00f6zellikleri ve yeni JavaScript s\u00f6zdizimi sayesinde kodunuz daha modern ve okunabilir olacak. Daha az kodla daha fazlas\u0131n\u0131 yapabilirsiniz. Mod\u00fcller, \u015fablon dizeleri, s\u0131n\u0131f y\u0131k\u0131c\u0131lar\u0131 ve flash i\u015flevleri gibi ES6&#039;daki harika yeni \u00f6zelliklerden baz\u0131lar\u0131n\u0131 \u00f6\u011frenece\u011fiz.<\/p>\n<p>React \u00f6\u011frenmeden \u00f6nce ES6&#039;ya hakim olmal\u0131s\u0131n\u0131z \u00e7\u00fcnk\u00fc kancalar art\u0131k s\u0131n\u0131f tabanl\u0131 bile\u015fenlerin yerini ald\u0131. Kancalar\u0131n ES6 \u00f6zelliklerini kapsaml\u0131 bir \u015fekilde kulland\u0131\u011f\u0131n\u0131 fark edeceksiniz.<\/p>\n<p>E\u011fer ok fonksiyonlar\u0131n\u0131 yazmakta zorluk \u00e7ekiyorsan\u0131z React sizin i\u00e7in zorlay\u0131c\u0131 olacakt\u0131r \u00e7\u00fcnk\u00fc bir\u00e7ok kanca, ok fonksiyonlar\u0131n\u0131 birbirinin i\u00e7ine yerle\u015ftirmenizi gerektirir ve bu da kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir.<\/p>\n<p>React JS, ES6&#039;y\u0131 tam olarak destekledi\u011finden, ES6&#039;y\u0131 \u00f6\u011frenmek ve anlamak, React JS ve Javascript geli\u015ftiricisi olarak hayat\u0131n\u0131z\u0131 iyile\u015ftirecektir \u00e7\u00fcnk\u00fc React JS kodunu okumay\u0131 ve yazmay\u0131 \u00e7ok daha kolay hale getirir.<\/p>\n<h5 id=\"git-%d9%88-cli-%d8%b1%d8%a7%d8%a8%d8%b7-%d8%ae%d8%b7-%d9%81%d8%b1%d9%85%d8%a7%d9%86\">Git ve CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc)<\/h5>\n<p>Yaz\u0131l\u0131m geli\u015ftirme s\u00fcrecinde Git olduk\u00e7a \u00f6nemli ve etkili bir ara\u00e7t\u0131r.<\/p>\n<p>Git, \u00f6z\u00fcnde uygulama geli\u015ftirme s\u0131ras\u0131nda kaynak kodu de\u011fi\u015fikliklerini izlemek i\u00e7in kullan\u0131lan da\u011f\u0131t\u0131lm\u0131\u015f bir s\u00fcr\u00fcm kontrol sistemidir. Git, geli\u015ftiriciler aras\u0131ndaki i\u015f birli\u011fini kolayla\u015ft\u0131rmak i\u00e7in olu\u015fturulmu\u015f olsa bile, herhangi bir dosya sistemindeki ilerlemeyi izlemek i\u00e7in kullan\u0131labilir.<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  width=\"2560\"  height=\"1775\"  class=\"aligncenter wp-image-16226 size-full pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 2560px) 100vw, 2560px\"  data-pk-src=\"https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-scaled.webp\"  data-pk-srcset=\"https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-scaled.webp 2560w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-300x208.webp 300w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-1024x710.webp 1024w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-768x533.webp 768w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-1536x1065.webp 1536w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-2048x1420.webp 2048w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-110x76.webp 110w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-200x139.webp 200w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-380x264.webp 380w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-255x177.webp 255w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-550x381.webp 550w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-800x555.webp 800w, https:\/\/cdn.itpiran.net\/2024\/10\/21155026\/1-1160x804.webp 1160w\" ><\/p>\n<p>Dosyalar\u0131n\u0131z\u0131n s\u00fcr\u00fcm\u00fcn\u00fc takip etmek i\u00e7in push, pull, append, commit vb. gibi t\u00fcm komutlar\u0131 nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 \u00f6\u011frenin. Ayr\u0131ca birle\u015ftirme, dalland\u0131rma ve birle\u015ftirme \u00e7ak\u0131\u015fmalar\u0131n\u0131 nas\u0131l y\u00f6netece\u011finizi de \u00f6\u011frenin.<\/p>\n<p>CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc), React&#039;teki her i\u015flemi ger\u00e7ekle\u015ftirmenize yard\u0131mc\u0131 olacakt\u0131r. Paket y\u00fckleme, NPM kullanma, React uygulamalar\u0131 olu\u015fturup \u00e7al\u0131\u015ft\u0131rma gibi bir\u00e7ok farkl\u0131 g\u00f6rev i\u00e7in kullan\u0131labildi\u011finden, CLI&#039;yi kullanmaya al\u0131\u015fmal\u0131s\u0131n\u0131z.<\/p>\n<h5 id=\"%d9%85%d8%af%db%8c%d8%b1-%d8%a8%d8%b3%d8%aa%d9%87-node-npm\">Paket Y\u00f6neticisi (Node + Npm)<\/h5>\n<p>ReactJS kullan\u0131rken, birden fazla k\u00fc\u00e7\u00fck yaz\u0131l\u0131m paketi y\u00fcklemek \u00f6nemlidir. Node paketleri, gerekli t\u00fcm dosyalar\u0131 i\u00e7eren JavaScript k\u00fct\u00fcphaneleridir. Mod\u00fcller ise Node projelerine dahil edilen JavaScript k\u00fct\u00fcphaneleridir. Paketlerde iki \u015fey vard\u0131r... JS dosyalar\u0131 ve package.json dosyalar\u0131. Bu paketleri kurmak i\u00e7in \u00e7ok iyi bir y\u00fckleyiciye ihtiyac\u0131n\u0131z var \u00e7\u00fcnk\u00fc ba\u011f\u0131ml\u0131l\u0131klar konusunda endi\u015felenmeden uygulamay\u0131 indirip kurman\u0131z\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<p>Node Paket Y\u00f6neticisi (NPM) tam da bu noktada devreye girerek JavaScript uygulamalar\u0131n\u0131 kurman\u0131za ve y\u00f6netmenize yard\u0131mc\u0131 olur. NPM&#039;yi, \u00f6nce Node.js&#039;yi y\u00fckleyerek kurabilirsiniz. NPM, Node.js&#039;yi y\u00fckledi\u011finizde otomatik olarak kurulur.<\/p>\n<p>Nodejs&#039;i resmi sitesinden indirebilirsiniz. Buraya t\u0131klay\u0131n.<\/p>\n<p>React&#039;ta yeni bir tek sayfal\u0131k uygulama olu\u015fturmaya ba\u015flaman\u0131n en iyi yolu, React \u00f6\u011frenmek i\u00e7in uygun bir ortam olan Create React App&#039;i kullanmakt\u0131r.<\/p>\n<p>A\u015fa\u011f\u0131daki komutlar sizin i\u00e7in \u00f6rnek bir proje olu\u015fturacakt\u0131r. Ba\u015flamak i\u00e7in \u015fu ad\u0131mlar\u0131 izleyebilirsiniz:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>npx create-react-app my-app\r\ncd my-app\r\nnpm start<\/code><\/pre>\n<\/div>\n<p>Dolay\u0131s\u0131yla, React&#039;e ba\u015flamadan \u00f6nce, NPM (Node Paket Y\u00f6neticisi) kay\u0131t defteri ve paket y\u00fckleme tekniklerine a\u015fina olmal\u0131s\u0131n\u0131z. K\u0131sacas\u0131, NPM kay\u0131t defteri, geli\u015ftiricilerin yaz\u0131l\u0131m geli\u015ftirmek i\u00e7in ihtiya\u00e7 duyduklar\u0131 yaz\u0131l\u0131mlar\u0131 edindikleri yerdir.<\/p>\n<h5 id=\"%d9%85%d8%aa%d8%ba%db%8c%d8%b1%d9%87%d8%a7%db%8c-es6-let-%d9%88-const\">ES6 De\u011fi\u015fkenleri \u2013 Let ve Const<\/h5>\n<p>ES6&#039;dan \u00f6nce geli\u015ftiriciler de\u011fi\u015fkenleri var anahtar s\u00f6zc\u00fc\u011f\u00fcyle veya anahtar s\u00f6zc\u00fc\u011f\u00fc olmadan tan\u0131ml\u0131yordu. Ancak her \u015fey de\u011fi\u015fti!<\/p>\n<p>JavaScript, de\u011fi\u015fkenleri tan\u0131mlamak i\u00e7in let ve const adl\u0131 iki yeni anahtar s\u00f6zc\u00fc\u011f\u00fcn eklendi\u011fi ES6 ile modern \u00e7a\u011fa ad\u0131m att\u0131. Bu anahtar s\u00f6zc\u00fckler, bir de\u011fi\u015fkenin nerede ve kullan\u0131l\u0131p kullan\u0131lamayaca\u011f\u0131n\u0131 belirlemek i\u00e7in kullan\u0131lan kapsamlar\u0131 bak\u0131m\u0131ndan farkl\u0131l\u0131k g\u00f6sterir. De\u011fi\u015fkenler bir fonksiyonun i\u00e7inde, bir blo\u011fun i\u00e7inde veya bir fonksiyon ve blo\u011fun d\u0131\u015f\u0131nda bulunabilir.<\/p>\n<p>var: Fonksiyon kapsam d\u00fczeyi \u2013 Bu anahtar s\u00f6zc\u00fck, fonksiyonlar\u0131n i\u00e7inde bildirilen de\u011fi\u015fkenlere d\u0131\u015far\u0131dan eri\u015fime izin vermez.<\/p>\n<p>let: Blok kapsam d\u00fczeyi \u2013 let anahtar s\u00f6zc\u00fc\u011f\u00fc, de\u011fi\u015fkenlerin bildirim kapsam\u0131 d\u0131\u015f\u0131nda eri\u015filebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>const: Blok d\u00fczeyinde kapsam \u2013 const anahtar s\u00f6zc\u00fc\u011f\u00fc, let anahtar s\u00f6zc\u00fc\u011f\u00fc kullan\u0131larak bildirilen de\u011fi\u015fkenlere benzer. Bir sabitin de\u011feri yeniden bildirim veya yeniden tahsis yoluyla de\u011fi\u015ftirilemez.<\/p>\n<h5 id=\"arrow-functions\">Ok Fonksiyonlar\u0131<\/h5>\n<p>Ok fonksiyonlar\u0131, JavaScript&#039;in ES6 s\u00fcr\u00fcm\u00fcndeki yeni bir \u00f6zelliktir. Normal fonksiyonlara k\u0131yasla, fonksiyonlar\u0131 daha basit bir \u015fekilde yazman\u0131za olanak tan\u0131rlar.<\/p>\n<ul>\n<li>Kodu basitle\u015ftirir ve okunmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n<li>Ba\u011flamsal &quot;bu&quot;nun en b\u00fcy\u00fck faydas\u0131, i\u015flevleri &quot;ba\u011flama&quot; ihtiyac\u0131n\u0131 ortadan kald\u0131rmas\u0131d\u0131r.<\/li>\n<li>Ok fonksiyonlar\u0131 g\u00fcn\u00fcm\u00fczdeki t\u00fcm taray\u0131c\u0131lar taraf\u0131ndan desteklenmektedir.<\/li>\n<\/ul>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>let x = (x, y) =&gt; x * y;<\/code><\/pre>\n<\/div>\n<h5 id=\"exports-and-imports\">\u0130hracat ve \u0130thalat<\/h5>\n<p>ES6 kullanarak JavaScript&#039;te mod\u00fcller olu\u015fturabiliriz. Bir mod\u00fcl s\u0131n\u0131flar, fonksiyonlar, de\u011fi\u015fkenler ve nesneler i\u00e7erebilir. JavaScript mod\u00fcllerini kullanarak kodunuzu farkl\u0131 dosyalara b\u00f6lebilirsiniz. B\u00f6ylece kod taban\u0131 kolayca y\u00f6netilebilir.<\/p>\n<p>T\u00fcm\u00fcn\u00fc ba\u015fka bir dosyada kullan\u0131labilir hale getirmek i\u00e7in export ve import komutlar\u0131n\u0131 kullanabiliriz. Bir mod\u00fcldeki \u00fcyelerin export ve import i\u015flemleri export ve import anahtar s\u00f6zc\u00fckleri kullan\u0131larak yap\u0131l\u0131r.<\/p>\n<h5 id=\"rest-and-spread-operator\">Dinlenme ve Yay\u0131lma Operat\u00f6r\u00fc<\/h5>\n<p>JavaScript&#039;te spread ve rest operat\u00f6rleri \u00fc\u00e7 nokta (\u2026) ile g\u00f6sterilir. Ancak, bu iki operat\u00f6r asl\u0131nda ayn\u0131 de\u011fildir. Rest ve spread operat\u00f6rleri aras\u0131ndaki temel fark, bir JavaScript dizisinin rest operat\u00f6r\u00fc kullan\u0131ld\u0131\u011f\u0131nda kullan\u0131c\u0131 taraf\u0131ndan sa\u011flanan belirli bir de\u011fer k\u00fcmesinin kalan\u0131yla doldurulmas\u0131d\u0131r. Ancak, geni\u015fletilmi\u015f bir s\u00f6zdizimi, yinelemeli bir de\u011fi\u015fkeni \u00f6\u011felerine geni\u015fletir.<\/p>\n<h5 id=\"%d8%aa%d8%ae%d8%b1%db%8c%d8%a8-%d8%b3%d8%a7%d8%ae%d8%aa%d8%a7%d8%b1-%d8%b4%db%8c-%d9%88-%d8%a2%d8%b1%d8%a7%db%8c%d9%87\">Nesne ve dizi yap\u0131s\u0131n\u0131n par\u00e7alanmas\u0131<\/h5>\n<p>Yap\u0131 \u00e7\u00f6zme, bir nesnenin veya dizinin bile\u015fenlerini ayr\u0131 ayr\u0131 a\u00e7ma i\u015flemidir. Yap\u0131 \u00e7\u00f6zme, \u00f6\u011feleri a\u00e7t\u0131ktan sonra ger\u00e7ekle\u015ftirmek istedi\u011finiz eyleme ba\u011fl\u0131 olarak de\u011fi\u015ftirmenize ve de\u011fi\u015ftirmenize olanak tan\u0131r.<\/p>\n<p>JavaScript, dizileri yok etmek i\u00e7in k\u00f6\u015feli parantezleri [] kullan\u0131r; bu da eleman\u0131 i\u00e7eren dizinin ad\u0131na atanan de\u011fi\u015fkenin ad\u0131n\u0131 saklamam\u0131z\u0131 sa\u011flar.<\/p>\n<p>Bir nesneyi yok etti\u011fimizde, nesnenin tam ad\u0131n\u0131 i\u00e7eren s\u00fcsl\u00fc parantezler kullan\u0131r\u0131z. Nesneler i\u00e7in, herhangi bir de\u011fi\u015fken ad\u0131n\u0131 kullanabildi\u011fimiz dizilerin aksine, \u00f6\u011feyi a\u00e7mak i\u00e7in yaln\u0131zca depolanan verilerin ad\u0131n\u0131 kullanabiliriz.<\/p>\n<h5 id=\"template-literals\">\u015eablon Literalleri<\/h5>\n<p>ES6&#039;da Template Literal, dinamik dizelere k\u0131yasla daha esnek bir dize olu\u015fturman\u0131za olanak tan\u0131yan yeni \u00f6zellikler sunar. Bir dize genellikle tek t\u0131rnak (&#039;) veya \u00e7ift t\u0131rnak (\u2018) ile olu\u015fturulur.<\/p>\n<p>Bir literal, backtick ( ) karakterlerini kullanarak g\u00f6m\u00fcl\u00fc ifadeleri etkinle\u015ftiren bir literal dizedir. Dize enterpolasyonu ve \u00e7ok sat\u0131rl\u0131 dizeler bunlarla kullan\u0131labilir. Bu dize daha \u00f6nce desen dizesi olarak biliniyordu.<\/p>\n<h5 id=\"map-filter-and-reduce\">Harita Filtresi ve Azaltma<\/h5>\n<p>JavaScript&#039;te \u00fc\u00e7 dizi i\u015flevi vard\u0131r: map, reduce ve filter. Her biri, yineleme s\u0131ras\u0131nda dizi \u00fczerinde bir d\u00f6n\u00fc\u015f\u00fcm veya i\u015flem ger\u00e7ekle\u015ftirir. Her biri, i\u015flevin \u00e7\u0131kt\u0131s\u0131na yan\u0131t olarak yeni bir dizi \u00fcretir.<\/p>\n<p>map() metodu kullan\u0131larak eski dizinin her bir eleman\u0131na bir fonksiyon uygulanarak bir dizi olu\u015fturulur.<\/p>\n<p>filter() y\u00f6ntemi, dizinin her bir \u00f6\u011fesine bir ko\u015ful ifadesi uygular. Ko\u015ful do\u011fru d\u00f6nd\u00fcr\u00fcrse, bir \u00f6\u011feyi \u00e7\u0131kt\u0131 dizisine iter. Ko\u015ful yanl\u0131\u015f d\u00f6nd\u00fcr\u00fcrse, \u00f6\u011feler \u00e7\u0131kt\u0131 dizisine itilmez.<\/p>\n<p>De\u011fer dizileri, reduce() y\u00f6ntemi kullan\u0131larak tek bir say\u0131ya indirgenir. Dizinin her bir eleman\u0131, \u00e7\u0131kt\u0131 de\u011ferini \u00fcretmek i\u00e7in bir indirgeyici fonksiyondan ge\u00e7irilir.<\/p>\n<h5 id=\"%da%a9%d9%84%d8%a7%d8%b3-%d9%87%d8%a7\">S\u0131n\u0131flar<\/h5>\n<p>JavaScript ES6, s\u0131n\u0131flar\u0131 yeni bir \u00f6zellik olarak sunar. Nesneler, s\u0131n\u0131flar kullan\u0131larak tasarlan\u0131r. Nesneler, s\u0131n\u0131flardan olu\u015fturulabilir.<\/p>\n<p>Bu s\u0131n\u0131f, bir evin temel prototipine benzetilebilir. Odalar, giri\u015fler vb. hakk\u0131ndaki t\u00fcm bilgileri i\u00e7erir. Evi, bu a\u00e7\u0131klamay\u0131 k\u0131lavuz olarak kullanarak in\u015fa edersiniz. Nesne ise evdir. Ayn\u0131 \u00f6zellikler kullan\u0131larak birden fazla ev in\u015fa edilebildi\u011fi i\u00e7in ayn\u0131 s\u0131n\u0131ftan birden fazla nesne \u00fcretebiliriz.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ creation of a class\r\nclass Home {\r\nconstructor(area) {\r\nthis.area = area;\r\n}\r\n}\r\n\/\/ creation of an object\r\nconst home1 = New Home(100);<\/code><\/pre>\n<\/div>\n<p>Fonksiyonel bile\u015fenleri inceleyerek ba\u015flay\u0131n. React kancalar\u0131 kullan\u0131m\u0131 daha kolayd\u0131r ve s\u0131n\u0131f tabanl\u0131 e\u015fde\u011ferlerine k\u0131yasla ayn\u0131 hedeflere ula\u015fmak i\u00e7in daha az kod sat\u0131r\u0131 gerektirir.<\/p>\n<p>Herkes uygulamas\u0131n\u0131 fonksiyonel bile\u015fenler kullanarak yeniden yazmasa da, s\u0131n\u0131f bile\u015fenlerinin de fark\u0131nda olmal\u0131s\u0131n\u0131z. \u00c7\u00fcnk\u00fc \u00e7o\u011fu uygulama s\u0131n\u0131f bile\u015fenleri kullan\u0131larak geli\u015ftirilir.<\/p>\n<p>Fonksiyonel bile\u015fenlerle kar\u015f\u0131la\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, React JS s\u0131n\u0131f bile\u015fenlerini olu\u015fturmak daha karma\u015f\u0131kt\u0131r. Bir React JS s\u0131n\u0131f\u0131n\u0131n par\u00e7as\u0131 olarak, verilerinizi y\u00f6netmek i\u00e7in olu\u015fturucular, ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6ntemleri, i\u015fleme i\u015flevleri ve hatta durum y\u00f6netimi bulacaks\u0131n\u0131z.<\/p>\n<h5 id=\"this-%d8%af%d8%b1-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1\">Bu taray\u0131c\u0131da<\/h5>\n<p>JavaScript&#039;te, bir fonksiyonun THIS anahtar s\u00f6zc\u00fc\u011f\u00fc di\u011fer dillerden biraz farkl\u0131 \u00e7al\u0131\u015f\u0131r. Ayr\u0131ca, s\u0131k\u0131 ve s\u0131k\u0131 olmayan durumlar aras\u0131nda ayr\u0131m yapar.<\/p>\n<p>THIS&#039;in de\u011feri genellikle bir fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na (\u00e7al\u0131\u015fma zaman\u0131 y\u00fcr\u00fctme) g\u00f6re belirlenir. Fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, y\u00fcr\u00fctme s\u0131ras\u0131nda atama yoluyla ayarlanamayaca\u011f\u0131 i\u00e7in her seferinde farkl\u0131 bir de\u011fere sahip olabilir. Bu fonksiyon, bind() metodu kullan\u0131larak nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na bak\u0131lmaks\u0131z\u0131n ayarlanabilir.<\/p>\n<h5 id=\"promises-and-async-%d8%af%d8%b1-%d8%a7%d9%86%d8%aa%d8%b8%d8%a7%d8%b1\">S\u00f6zler ve Asenkron Bekleme<\/h5>\n<p>JavaScript veya Node.js&#039;de i\u015flemleri y\u00f6netmenin farkl\u0131 yollar\u0131 vard\u0131r. E\u015fzamans\u0131z y\u00fcr\u00fctme s\u0131ras\u0131nda farkl\u0131 i\u015flemler e\u015f zamanl\u0131 olarak \u00e7al\u0131\u015f\u0131r ve her i\u015flemin \u00e7\u0131kt\u0131s\u0131, eri\u015fildi\u011fi anda i\u015flenir.<\/p>\n<p>NodeJS&#039;deki bir Promise, ger\u00e7ek d\u00fcnyadaki bir Promise&#039;a benzer. Bir eylemin ger\u00e7ekle\u015ftirilece\u011fine dair g\u00fcvence sa\u011flar. Bir Promise, e\u015fzamans\u0131z bir olay meydana geldikten sonra ne olaca\u011f\u0131n\u0131 kontrol eder ve olay\u0131n ger\u00e7ekle\u015ftirilip ger\u00e7ekle\u015ftirilmedi\u011fini takip eder.<\/p>\n<p>Promise&#039;ler, Async\/Await kullan\u0131larak e\u015fzamans\u0131z y\u00f6ntemlerle i\u015flenir. Promise&#039;lerin okunmas\u0131n\u0131 ve kullan\u0131lmas\u0131n\u0131 kolayla\u015ft\u0131rmak i\u00e7in kod yak\u0131n zamanda yeniden d\u00fczenlendi. Bu, onu e\u015fzamans\u0131z koda daha benzer hale getirerek e\u015fzamans\u0131z programlamay\u0131 basitle\u015ftirir.<\/p>\n<h2 id=\"%da%86%d8%b1%d8%a7-%d8%b4%d8%b1%da%a9%d8%aa-%d9%87%d8%a7-reactjs-%d8%b1%d8%a7-%d8%aa%d8%b1%d8%ac%db%8c%d8%ad-%d9%85%db%8c-%d8%af%d9%87%d9%86%d8%af%d8%9f\">\u015eirketler neden Reactjs&#039;i tercih ediyor?<\/h2>\n<ol>\n<li>Bile\u015fenler daha ak\u0131c\u0131 yaz\u0131l\u0131r \u2013 JavaScript kod verimlili\u011fi JSX ile artt\u0131r\u0131labilir.<\/li>\n<li>Verimlili\u011fi art\u0131rman\u0131n yan\u0131 s\u0131ra, ileride bak\u0131m ihtiyac\u0131n\u0131 da basitle\u015ftirir.<\/li>\n<li>Render i\u015flemi daha h\u0131zl\u0131 ger\u00e7ekle\u015fir.<\/li>\n<li>\u0130\u00e7erisinde kullan\u0131\u015fl\u0131 geli\u015ftirici ara\u00e7lar\u0131 da mevcut.<\/li>\n<li>SPA (Tek Sayfal\u0131k Ba\u015fvuru)<\/li>\n<li>Veri ba\u011flant\u0131s\u0131 tek y\u00f6nl\u00fcd\u00fcr, t\u0131pk\u0131 tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131 gibi.<\/li>\n<li>SEO dostu<\/li>\n<\/ol>\n<h2 id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87\">Sonu\u00e7<\/h2>\n<p>React JS, a\u00e7\u0131k kaynakl\u0131 bir \u00f6n u\u00e7 k\u00fct\u00fcphanesidir. Bu k\u00fct\u00fcphanenin temel amac\u0131, web ve mobil uygulamalar i\u00e7in h\u0131zl\u0131 ve ilgi \u00e7ekici kullan\u0131c\u0131 aray\u00fczleri tasarlamakt\u0131r. ReactJS i\u00e7in temel \u00f6n ko\u015fullar HTML ve CSS, JavaScript ve ES6 temelleri, Git ve CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc) ve Paket Y\u00f6neticisi&#039;dir (Node + Npm). Bilmeniz gereken tek \u015fey ES6 de\u011fi\u015fkenleri, ok fonksiyonlar\u0131, d\u0131\u015fa ve i\u00e7e aktarmalar, Rest ve Spread operat\u00f6rleri, nesne y\u0131k\u0131c\u0131lar ve diziler (JavaScript&#039;te this anahtar kelimesi). Desen alfabesi, ters t\u0131rnak i\u015faretleri kullanarak g\u00f6m\u00fcl\u00fc ifadeleri etkinle\u015ftiren bir dize sabitidir. JavaScript&#039;te \u00fc\u00e7 dizi fonksiyonu vard\u0131r: bir dizi \u00fczerinde yineleme yaparken i\u015flemler ger\u00e7ekle\u015ftirmek i\u00e7in map, reduce ve filter.<\/p>","protected":false},"excerpt":{"rendered":"Giri\u015f React JS, a\u00e7\u0131k kaynakl\u0131 bir \u00f6n u\u00e7 k\u00fct\u00fcphanesidir. Bu k\u00fct\u00fcphanenin temel amac\u0131, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmakt\u0131r\u2026","protected":false},"author":1,"featured_media":16224,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[384,435,400],"class_list":{"0":"post-16223","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-java-script","10":"tag-programming","11":"tag-react-js"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/prerequisites-for-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 React JS \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a. \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/prerequisites-for-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-21T12:33:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS\",\"datePublished\":\"2024-10-21T12:33:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\"},\"wordCount\":185,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"keywords\":[\"Java Script\",\"programming\",\"React.js\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\",\"name\":\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"datePublished\":\"2024-10-21T12:33:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tr\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ReactJS \u00f6\u011frenmek i\u00e7in \u00f6n ko\u015fullar - ITPiran Blog","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:\/\/www.itpiran.net\/blog\/tr\/tutorials\/prerequisites-for-react-js\/","og_locale":"tr_TR","og_type":"article","og_title":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 React JS \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a. \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc&hellip;","og_url":"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/prerequisites-for-react-js\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-10-21T12:33:31+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"admin","Tahmini okuma s\u00fcresi":"1 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS","datePublished":"2024-10-21T12:33:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/"},"wordCount":185,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","keywords":["Java Script","programming","React.js"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/","name":"ReactJS \u00f6\u011frenmek i\u00e7in \u00f6n ko\u015fullar - ITPiran Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","datePublished":"2024-10-21T12:33:31+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"\u0130ran S\u00fcrd\u00fcr\u00fclebilir Ticaret Haberleri ve Makaleleri","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"S\u00fcrd\u00fcr\u00fclebilir \u0130ran \u0130\u015fletmeleri Blogu","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"y\u00f6netici","url":"https:\/\/www.itpiran.net\/blog\/tr\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/16223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/comments?post=16223"}],"version-history":[{"count":2,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/16223\/revisions"}],"predecessor-version":[{"id":16227,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/16223\/revisions\/16227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/media\/16224"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/media?parent=16223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/categories?post=16223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/tags?post=16223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}