React, a\u00e7\u0131k kaynakl\u0131, kullan\u0131c\u0131lara ara y\u00fcz yaratmak i\u00e7in kullan\u0131lan JavaScript k\u00fct\u00fcphanelerinden biridir. Bu ara y\u00fczlerin yarat\u0131lmas\u0131 i\u00e7in yeniden kullan\u0131lmas\u0131 gereken bile\u015fenler, component isimli yap\u0131lar taraf\u0131ndan kullan\u0131lmaktad\u0131r.<\/p>\n\n\n\n
Google ara y\u00fcz\u00fcn\u00fc inceledi\u011finizde kar\u015f\u0131n\u0131za, logo, arama butonu, arama kutusu ve dil se\u00e7ene\u011fi gibi g\u00f6rseller \u00e7\u0131kar. Bunlar yeniden kullan\u0131lma \u00f6zelli\u011fi olan, birden fazla ara y\u00fcz\u00fcn ortak bile\u015fenidir. Bu g\u00f6rsellerin yarat\u0131lmas\u0131nda ve kullan\u0131c\u0131n\u0131n hizmetine sunulmas\u0131nda Reacht\u2019in etkisi \u00e7ok b\u00fcy\u00fckt\u00fcr.\u00a0\u00a0<\/p>\n\n\n\n
React\u2019in ortaya \u00e7\u0131k\u0131\u015f hik\u00e2yesine bakt\u0131\u011f\u0131n\u0131zda, 2011 y\u0131l\u0131na gitmeniz gerekir. S\u00f6z konusu d\u00f6nemde Facebook \u00fczerinden XHP ismi ile bir JavaScript portu yay\u0131nlanm\u0131\u015ft\u0131r. Bu port PHP\u2019nin i\u00e7ine yerle\u015ftirilmi\u015ftir. XHP, bile\u015fen olu\u015fturarak kullan\u0131c\u0131 taraf\u0131ndan gelen bilgileri temizleme sorumlulu\u011funu da PHP\u2019den alan bir yap\u0131ya sahiptir. Bu geli\u015fmeler olurken Facebook, inan\u0131lmaz bir h\u0131zla y\u00fckseli\u015fe ge\u00e7mi\u015ftir. Bu geli\u015fim devam etti\u011fi s\u00fcrece daha kontroll\u00fc bir sisteme ihtiya\u00e7 duyulmu\u015ftur. Bir Facebook \u00e7al\u0131\u015fan\u0131 olan Jordan Walke, XHP\u2019den esinlenerek FaxJS ismi ile React\u2019\u0131n ilk versiyonunu ortaya \u00e7\u0131karm\u0131\u015ft\u0131r.<\/p>\n\n\n\n
React, ilk ortaya \u00e7\u0131kt\u0131\u011f\u0131 d\u00f6nemde yanl\u0131\u015f stratejiler nedeniyle pop\u00fcler olamam\u0131\u015ft\u0131r. Fakat ya\u015fanan geli\u015fmeler \u0131\u015f\u0131\u011f\u0131nda g\u00fcn\u00fcm\u00fczde en \u00e7ok tercih edilen k\u00fct\u00fcphanelerden biri halini alm\u0131\u015ft\u0131r. React, \u00f6zellikle Airbnb ve Netflix gibi b\u00fcy\u00fck \u015firketlerin ilgisini \u00e7ekmeyi ba\u015farm\u0131\u015ft\u0131r. Y\u0131llar i\u00e7erisinde geli\u015fimini s\u00fcrd\u00fcren React, g\u00fcn\u00fcm\u00fczde stabil bir yap\u0131ya kavu\u015fmu\u015ftur.\u00a0<\/p>\n\n\n\n
HTML kodlar\u0131n\u0131n JavaScript\u2019e nas\u0131l yaz\u0131ld\u0131\u011f\u0131n\u0131 biliyorsan\u0131z, React\u2019\u0131 \u00f6\u011frenmek \u00e7ok kolay olacakt\u0131r. \u00c7\u00fcnk\u00fc sistemin \u00e7al\u0131\u015fma mant\u0131\u011f\u0131 ayn\u0131d\u0131r. React, bir element fonksiyonu olu\u015fturulmas\u0131 ile \u00e7al\u0131\u015fmaya ba\u015flar. Bunun basit bir \u00f6rne\u011fini a\u015fa\u011f\u0131da g\u00f6rebilirsiniz:<\/p>\n\n\n\n
React.createElement(\u201cdiv\u201d, { className: \u201cred\u201d }, \u201cChildren Text\u201d);<\/p>\n\n\n\n
React.createElement(MyCounter, { count: 3 + 5 });<\/p>\n\n\n\n
Yukar\u0131daki \u00f6rnekten anla\u015f\u0131laca\u011f\u0131 \u00fczere HTML \u00fczerindeki s\u00f6z dizimi, XML bile\u015fenleri ile \u00e7ok benzer \u00f6zellikler g\u00f6stermektedir. Fakat genel olarak kullan\u0131lan DOM s\u0131n\u0131f\u0131n\u0131n kullan\u0131lmas\u0131 yerine React classname kullan\u0131lmas\u0131 daha do\u011frudur.<\/p>\n\n\n\n
JSX etiketlerine bakt\u0131\u011f\u0131n\u0131zda bir etiket ad\u0131 ve niteliklerinin oldu\u011funu g\u00f6rebilirsiniz. JSX diziliminde yer alan t\u0131rnak i\u015faretleri, dizinlerin temsilidir. Bu elementler, JavaScript ile benzer \u00f6zellikler g\u00f6sterir. Bunun yan\u0131nda say\u0131sal de\u011ferler ve ifadelerin kesinlikle k\u00fcme parantezi kullan\u0131larak yaz\u0131lmas\u0131 gerekir. K\u0131saca ifade etmek gerekirse React, HTML ve JavaScript\u2019in kar\u0131\u015f\u0131m\u0131 olarak ifade edilebilir.\u00a0\u00a0<\/p>\n\n\n\n
Genel olarak React, JavaScript yerine JSX kullan\u0131larak yaz\u0131lan kod dizilimidir. Bu da React bile\u015fenlerinin daha kolay olu\u015fturulmas\u0131n\u0131 sa\u011flar. Standart bir JavaScript bile\u015feni ile de React bile\u015feni olu\u015fturulabilir. Fakat emin olun bu \u015fekilde kod dizilimleri \u00e7ok karma\u015f\u0131k olacakt\u0131r.<\/p>\n\n\n\n
React kullanmak i\u00e7in bir\u00e7ok neden s\u0131ralanabilir. S\u00f6z konusu nedenlerden dikkat \u00e7ekenleri \u015fu \u015fekilde s\u0131ralayabiliriz:<\/p>\n\n\n\n
React \u00e7al\u0131\u015fmalar\u0131n\u0131zda altyap\u0131 ihtiya\u00e7lar\u0131n\u0131z i\u00e7in hosting<\/a><\/strong> \u00e7\u00f6z\u00fcmlerini inceleyebilir, s\u0131n\u0131rs\u0131z hosting<\/strong><\/a> paketlerinde \u00f6zg\u00fcrce kodlaman\u0131n keyfini \u00e7\u0131karabilirsiniz. <\/p><\/blockquote>\n\n\n\n
React\u2019in \u00d6ne \u00c7\u0131kan \u00d6zellikleri<\/span><\/h2>\n\n\n\n
React\u2019in \u00f6ne \u00e7\u0131kan ve kullan\u0131c\u0131ya b\u00fcy\u00fck avantajlar sa\u011flayan \u00f6zelliklerini \u015fu \u015fekilde s\u0131ralayabiliriz:<\/p>\n\n\n\n
- React, esas\u0131nda Facebook taraf\u0131ndan tan\u0131t\u0131lm\u0131\u015f bir sistemdir.<\/li>
- Sistem, d\u00fcnyan\u0131n \u00f6nde gelen \u015firketleri taraf\u0131ndan yayg\u0131n olarak kullan\u0131lmaktad\u0131r.<\/li>
- React, bir JavaScript k\u00fct\u00fcphanesi gibi d\u00fc\u015f\u00fcn\u00fclmelidir.<\/li>
- Bir framework olmasa da React, bir framework g\u00f6revi g\u00f6r\u00fcr.<\/li>
- React\u2019\u0131n tek ba\u015f\u0131na \u00e7al\u0131\u015fmas\u0131 i\u00e7in bir k\u0131s\u0131m y\u00f6netim ara\u00e7lar\u0131na ihtiya\u00e7 vard\u0131r.<\/li>
- React\u2019te daha iyi bir sayfa optimizasyonu sa\u011flamak i\u00e7in sanal DOM tercih edilir.<\/li>
- React kullan\u0131m\u0131 olduk\u00e7a kolay olmakla birlikte SEO dostudur.<\/li>
- Sistemin bile\u015feni yeniden kullan\u0131labilir olmas\u0131n\u0131 destekler.<\/li>
- React, JSX\u2019i daha iyi bir performans ortaya koydu\u011fu i\u00e7in de\u011fil, kod yaz\u0131m\u0131n\u0131 kolayla\u015ft\u0131rd\u0131\u011f\u0131 i\u00e7in tercih edilir.<\/li><\/ul>\n\n\n\n
React, kullan\u0131c\u0131 ara y\u00fczleri olu\u015fturmak maksad\u0131yla 2011 y\u0131l\u0131nda Facebook taraf\u0131ndan geli\u015ftirilmi\u015f bir k\u00fct\u00fcphanedir. Geli\u015ftiriciler bu sistemi kullan\u0131rken her defas\u0131nda uzun ve zorlay\u0131c\u0131 JavaScript kodlar\u0131 yazmaya ihtiya\u00e7 duymu\u015flard\u0131r. Bir framework olmamas\u0131na ra\u011fmen React neden bu kadar pop\u00fcler hale gelmi\u015ftir sorusuna cevap verirken a\u015fa\u011f\u0131daki kavramlar\u0131 incelemenizde fayda vard\u0131r.<\/p>\n\n\n\n
Virtual DOM<\/span><\/h3>\n\n\n\n
Web sitesinin iskeleti, HTML ile yaz\u0131l\u0131r. HTML ile yaz\u0131lan her bir yap\u0131 birer DOM (document object model) modelidir. E\u011fer bu modelde bir de\u011fi\u015fiklik ya da g\u00fcncelleme yap\u0131lmas\u0131 gerekirse HTML ile bu i\u015flemler ger\u00e7ekle\u015ftirilebilir.<\/p>\n\n\n\n
HTML ile sayfa yap\u0131s\u0131n\u0131n de\u011fi\u015ftirilmesi statik sayfalarda bir soruna neden olmaz. Fakat dinamik sayfalarda bu durum sorun te\u015fkil edebilir. Statik olarak nitelendirilen sayfalar, kullan\u0131c\u0131 ile etkile\u015fime ge\u00e7meyen, JavaScript\u2019ten \u00f6nceki sayfalar\u0131 ifade eder. JavaScript ile birlikte dinamik sayfalar hayat\u0131m\u0131zda yer edinmeye ba\u015flam\u0131\u015ft\u0131r. Bunun kullan\u0131m\u0131 artt\u0131k\u00e7a trafik de bu kapsamda artm\u0131\u015ft\u0131r.<\/p>\n\n\n\n
JSX kullan\u0131c\u0131lar\u0131, g\u00fcncellemeleri React ve JSX ile ger\u00e7ekle\u015ftirebilir. Bu t\u00fcr g\u00fcncellemeler, \u201cVirtual DOM\u201d isminde bir hayali element ile yap\u0131l\u0131r. DOM\u2019da ne zaman bir de\u011fi\u015fiklik ya\u015fansa React bu hayali DOM elementinin de g\u00fcncellemesi sa\u011flan\u0131r.\u00a0<\/p>\n\n\n\n
DOM sistemini bir al\u0131\u015fveri\u015f sepeti gibi d\u00fc\u015f\u00fcnebilirsiniz. Al\u0131\u015fveri\u015fe gitti\u011finizde al\u0131\u015fveri\u015f sepetine att\u0131\u011f\u0131n\u0131z her bir \u00fcr\u00fcn ya da de\u011fi\u015ftirdi\u011finiz \u00fcr\u00fcnler i\u00e7in yeni bir sepet kullan\u0131lmas\u0131, ciddi bir zaman kayb\u0131na neden olur. Bu da sistemin yava\u015flamas\u0131 demektir. \u0130\u015flemlerin h\u0131zl\u0131 y\u00fcr\u00fcmesi ve sepetin her zaman g\u00fcncel tutulmas\u0131 i\u00e7in sanal bir DOM ihtiyac\u0131 vard\u0131r. Bu sayede hem performans hem de toplam kazan\u00e7 artacakt\u0131r.\u00a0<\/p>\n\n\n\n
JSX<\/span><\/h3>\n\n\n\n
React uygulamalar\u0131 iki \u015fekilde yaz\u0131labilir. Bunlar JavaScript ya da JSX \u015feklindedir. Bu yaz\u0131m \u015fekillerinden genellikle JSX tercih edilir. Bu tercihin ana nedeni, JavaScript ile kullan\u0131c\u0131 ara y\u00fczlerinin yaz\u0131lmas\u0131n\u0131n zor olmas\u0131d\u0131r. JSX, HTML\u2019ye benzeyen bir kod yap\u0131s\u0131na sahiptir. Bu nedenle verinin kontrol edilmesine yard\u0131mc\u0131 olur. JSX, React ile bile\u015fenler yarat\u0131rken kullan\u0131c\u0131ya b\u00fcy\u00fck kolayl\u0131k sa\u011flar.<\/p>\n\n\n\n
Bile\u015fenler<\/span><\/h3>\n\n\n\n
Bile\u015fenler, React\u2019\u0131n \u00e7al\u0131\u015fma bloklar\u0131 gibi de\u011ferlendirilebilir. Bile\u015fenler sayesinde uygulama ara y\u00fczleri tekrar kullan\u0131labilir ve birbirinden ba\u011f\u0131ms\u0131z \u015fekilde kullan\u0131labilir. Bu y\u00f6n\u00fcyle sistem b\u00f6l ve y\u00f6net mant\u0131\u011f\u0131 ile \u00e7al\u0131\u015f\u0131r. Bile\u015fenleri temelde iki ayr\u0131 b\u00f6l\u00fcme ay\u0131rabiliriz:<\/p>\n\n\n\n
- Class Based Components\u00a0<\/li>
- Function Based Components\u00a0<\/li><\/ul>\n\n\n\n
Bu iki bile\u015fen sayesinde sistem i\u00e7erisindeki yap\u0131lar\u0131n birbirine veri aktar\u0131m\u0131 sa\u011flanabilir.<\/p>\n\n\n\n
React, Vue ve Angular\u2019\u0131n Farklar\u0131 Nelerdir?<\/span><\/h2>\n\n\n\n
Rakipleri olarak sayabilece\u011fimiz Vue JS ve Angular sistemlerinin aksine React, bir t\u00fcr k\u00fct\u00fcphanedir. Vue JS ve Angular birer framework\u2019t\u00fcr. React, ara y\u00fcz, g\u00f6rsel ve g\u00f6r\u00fcnen k\u0131s\u0131mla ilgilenir. Veri taban\u0131 ya da form do\u011frulamas\u0131 gibi web sayfas\u0131n\u0131n g\u00f6r\u00fcnmeyen k\u0131sm\u0131 ile ilgilenmez. Framework\u2019lar ise web sayfas\u0131n\u0131n t\u00fcm ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamaya y\u00f6nelik par\u00e7alar\u0131n tamam\u0131n\u0131 i\u00e7inde bulundurur.<\/p>\n\n\n\n
React Kitapl\u0131klar\u0131<\/span><\/h2>\n\n\n\n
React, \u00f6zellikle son y\u0131llarda olduk\u00e7a pop\u00fcler hale gelmi\u015ftir. Bu anlamda react kitapl\u0131klar\u0131n\u0131n da b\u00fcy\u00fck geli\u015fme g\u00f6sterdi\u011fini s\u00f6yleyebiliriz. S\u00f6z konusu kitapl\u0131klar\u0131 kullanarak i\u015finizi \u00e7ok daha pratik ve h\u0131zl\u0131 \u015fekilde \u00e7\u00f6z\u00fcme ula\u015ft\u0131rabilirsiniz. En \u00e7ok i\u015finize yarayaca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm\u00fcz 5 \u00f6nemli kitapl\u0131k \u015funlard\u0131r:<\/p>\n\n\n\n
- Tepki anl\u0131k g\u00f6r\u00fcnt\u00fc<\/li>
- Tepki kask<\/li>
- React use<\/li>
- React renk<\/li>
- Tepki y\u00fckleme iskeleti<\/li><\/ul>\n\n\n\n
React kitapl\u0131k t\u00fcrleri sadece yukar\u0131da say\u0131lanlarla s\u0131n\u0131rl\u0131 de\u011fildir. Kullan\u0131c\u0131n\u0131n i\u015fini kolayla\u015ft\u0131rmak i\u00e7in geli\u015ftirilmi\u015f y\u00fczlerce kitapl\u0131k vard\u0131r. Yukar\u0131da say\u0131lanlar pop\u00fcler olan kitapl\u0131klar olsa da siz k\u00fc\u00e7\u00fck bir ara\u015ft\u0131rma ile farkl\u0131 kitapl\u0131klardan da istifade edebilirsiniz.\u00a0<\/p>\n\n\n\n
React \u00e7al\u0131\u015fmalar\u0131n\u0131zda altyap\u0131 ihtiya\u00e7lar\u0131n\u0131z i\u00e7in hosting<\/a><\/strong> \u00e7\u00f6z\u00fcmlerini inceleyebilir, s\u0131n\u0131rs\u0131z hosting<\/strong><\/a> paketlerinde \u00f6zg\u00fcrce kodlaman\u0131n keyfini \u00e7\u0131karabilirsiniz.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"React, a\u00e7\u0131k kaynakl\u0131, kullan\u0131c\u0131lara ara y\u00fcz yaratmak i\u00e7in kullan\u0131lan JavaScript k\u00fct\u00fcphanelerinden biridir. Bu ara y\u00fczlerin yarat\u0131lmas\u0131 i\u00e7in yeniden…\n","protected":false},"author":7,"featured_media":31396,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[652],"tags":[1363],"class_list":{"0":"post-31395","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-nedir","8":"tag-react"},"_links":{"self":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/31395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/comments?post=31395"}],"version-history":[{"count":0,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/31395\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media\/31396"}],"wp:attachment":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media?parent=31395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/categories?post=31395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/tags?post=31395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}