{"id":3359,"date":"2024-11-08T21:15:14","date_gmt":"2024-11-08T18:15:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/"},"modified":"2024-11-08T21:15:14","modified_gmt":"2024-11-08T18:15:14","slug":"reacte-baslangic-yeni-baslayanlar-icin-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/","title":{"rendered":"React&#8217;e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber"},"content":{"rendered":"<p>React&#8217;e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber<\/p>\n<p>React, Facebook taraf\u0131ndan geli\u015ftirilen ve g\u00fcn\u00fcm\u00fcz\u00fcn en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biri olan, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bile\u015fen tabanl\u0131 mimarisi ve sanal DOM kullan\u0131m\u0131, karma\u015f\u0131k ve dinamik uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131r\u0131r. Bu makalede, React&#8217;e yeni ba\u015flayanlar i\u00e7in temel kavramlar\u0131 ve React ile bir web uygulamas\u0131 olu\u015fturmaya ba\u015flamak i\u00e7in gereken ad\u0131mlar\u0131 ele alaca\u011f\u0131z.<\/p>\n<h2>React Nedir?<\/h2>\n<p>React, kullan\u0131c\u0131lara etkile\u015fimli ve dinamik web uygulamalar\u0131 olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 bir mimariye dayan\u0131r, bu da uygulamalar\u0131 ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir kod par\u00e7alar\u0131 olarak yap\u0131land\u0131rman\u0131za olanak tan\u0131r. Her bile\u015fen, kendi kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc, verilerini ve davran\u0131\u015f\u0131n\u0131 i\u00e7erir ve di\u011fer bile\u015fenlerle birle\u015ftirilerek daha b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar olu\u015fturabilir. <\/p>\n<p>React, uygulamalar\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn verimli ve h\u0131zl\u0131 bir \u015fekilde g\u00fcncellenmesini sa\u011flayan sanal DOM&#8217;u kullan\u0131r. Sanal DOM, uygulaman\u0131n ger\u00e7ek DOM&#8217;unun bir kopyas\u0131n\u0131 olu\u015fturur. Veriler de\u011fi\u015fti\u011finde, React sanal DOM&#8217;u g\u00fcnceller ve yaln\u0131zca ger\u00e7ek DOM&#8217;da gerekli de\u011fi\u015fiklikleri yaparak performans\u0131 art\u0131r\u0131r.<\/p>\n<h2>React&#8217;in Avantajlar\u0131<\/h2>\n<p>React&#8217;in bir\u00e7ok avantaj\u0131 vard\u0131r, bunlardan baz\u0131lar\u0131 \u015funlard\u0131r:<\/p>\n<ul>\n<li>**Bile\u015fen tabanl\u0131 mimari:** Uygulamalar\u0131 ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir kod par\u00e7alar\u0131 olarak yap\u0131land\u0131rman\u0131za olanak tan\u0131r. <\/li>\n<li>**Sanal DOM:** Uygulamalar\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn verimli ve h\u0131zl\u0131 bir \u015fekilde g\u00fcncellenmesini sa\u011flar.<\/li>\n<li>**Tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131:** Verilerin yaln\u0131zca bir y\u00f6nde akmas\u0131n\u0131 sa\u011flar, bu da uygulamalar\u0131n daha kolay y\u00f6netilmesini ve hata ay\u0131klamas\u0131n\u0131 sa\u011flar.<\/li>\n<li>**Geni\u015f bir topluluk ve kaynak yelpazesi:**  React&#8217;i \u00f6\u011frenmek ve kullanmak i\u00e7in bir\u00e7ok kaynak ve topluluk deste\u011fi mevcuttur.<\/li>\n<li>**Mobil uygulamalar i\u00e7in kullan\u0131labilir:** React Native ile mobil uygulamalar da geli\u015ftirebilirsiniz.<\/li>\n<\/ul>\n<h2>React&#8217;e Ba\u015flarken<\/h2>\n<p>React&#8217;e ba\u015flamak i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyebilirsiniz:<\/p>\n<h3>1. React Geli\u015ftirme Ortam\u0131n\u0131 Kurma<\/h3>\n<p>React uygulamalar\u0131 geli\u015ftirmek i\u00e7in bir Node.js ve npm (Node Package Manager) ortam\u0131na ihtiyac\u0131n\u0131z vard\u0131r. Node.js&#8217;yi <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\">https:\/\/nodejs.org\/<\/a> adresinden indirebilirsiniz. <\/p>\n<p>npm, Node.js ile birlikte gelir.  Npm, React ve di\u011fer ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklemek i\u00e7in kullan\u0131lacakt\u0131r.<\/p>\n<h3>2. Create React App ile Yeni Bir Proje Olu\u015fturma<\/h3>\n<p>Create React App, React uygulamalar\u0131 olu\u015fturmak i\u00e7in kullan\u0131lan bir komut sat\u0131r\u0131 arac\u0131d\u0131r. Bu ara\u00e7, yeni bir React projesi olu\u015fturmak i\u00e7in gereken t\u00fcm yap\u0131land\u0131rmay\u0131 sa\u011flar. Yeni bir React projesi olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n<p>&#8220;`bash<br \/>\nnpx create-react-app my-app<br \/>\n&#8220;`<\/p>\n<p>Bu komut, &#8220;my-app&#8221; ad\u0131nda yeni bir proje klas\u00f6r\u00fc olu\u015fturacakt\u0131r. Projeyi \u00e7al\u0131\u015ft\u0131rmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n<p>&#8220;`bash<br \/>\ncd my-app<br \/>\nnpm start<br \/>\n&#8220;`<\/p>\n<p>Bu komut, uygulamay\u0131 yerel olarak http:\/\/localhost:3000 adresinde \u00e7al\u0131\u015ft\u0131racakt\u0131r.<\/p>\n<h3>3. \u0130lk React Bile\u015fenini Olu\u015fturma<\/h3>\n<p>React uygulamalar\u0131, bile\u015fenlerden olu\u015fur.  Bir bile\u015fen, uygulaman\u0131n bir b\u00f6l\u00fcm\u00fcn\u00fc temsil eden bir JavaScript fonksiyonu veya s\u0131n\u0131f\u0131d\u0131r.<\/p>\n<p>Bir React bile\u015feni olu\u015fturmak i\u00e7in &#8220;src&#8221; klas\u00f6r\u00fcndeki &#8220;App.js&#8221; dosyas\u0131n\u0131 a\u00e7\u0131n ve a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n<p>&#8220;`javascript<br \/>\nimport React from &#8216;react&#8217;;<\/p>\n<p>function App() {<br \/>\n  return (<\/p>\n<div>\n      Merhaba D\u00fcnya!\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default App;<br \/>\n&#8220;`<\/p>\n<p>Bu kod, &#8220;Merhaba D\u00fcnya!&#8221; mesaj\u0131n\u0131 g\u00f6steren basit bir bile\u015fen olu\u015fturur.<\/p>\n<h3>4. Bile\u015fenleri Render Etme<\/h3>\n<p>Bile\u015fenleri render etmek, taray\u0131c\u0131da g\u00f6r\u00fcn\u00fcr hale getirmek anlam\u0131na gelir.  React&#8217;te, bir bile\u015feni render etmek i\u00e7in `ReactDOM.render()` fonksiyonu kullan\u0131l\u0131r.<\/p>\n<p>Bile\u015feni render etmek i\u00e7in &#8220;public\/index.html&#8221; dosyas\u0131n\u0131 a\u00e7\u0131n ve a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n<p>&#8220;`html<br \/>\n<!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n  <head><br \/>\n    <meta charset=\"utf-8\" \/>\n    <link rel=\"icon\" href=\"%PUBLIC_URL%\/favicon.ico\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/><br \/>\n    <meta name=\"theme-color\" content=\"#000000\" \/><br \/>\n    <meta\n      name=\"description\"\n      content=\"Web site description\"\n    \/>\n    <link rel=\"apple-touch-icon\" href=\"%PUBLIC_URL%\/logo192.png\" \/>\n    <link rel=\"manifest\" href=\"%PUBLIC_URL%\/manifest.json\" \/>\n    <title>React Uygulamas\u0131<\/title><br \/>\n  <\/head><br \/>\n  <body><\/p>\n<div id=\"root\"><\/div>\n<p>    <script src=\"%PUBLIC_URL%\/index.js\"><\/script><br \/>\n  <\/body><br \/>\n<\/html><br \/>\n&#8220;`<\/p>\n<p>Bu kod, React bile\u015feninin render edilece\u011fi &#8220;root&#8221; ad\u0131nda bir div olu\u015fturur. <\/p>\n<h3>5. Verileri Ge\u00e7me ve Durum Y\u00f6netimi<\/h3>\n<p>React bile\u015fenlerine veriler, `props` arac\u0131l\u0131\u011f\u0131yla ge\u00e7ilir.  `props`, bile\u015fen taraf\u0131ndan al\u0131nan ve render i\u015flemi s\u0131ras\u0131nda kullan\u0131lan de\u011fi\u015fmez verilerdir. <\/p>\n<p>Bir bile\u015fene veriler ge\u00e7mek i\u00e7in, bile\u015feni \u00e7a\u011f\u0131r\u0131rken `props` olarak verileri belirtmeniz yeterlidir. <\/p>\n<p>Bile\u015fenler ayr\u0131ca kendi durumlar\u0131n\u0131 (`state`) da y\u00f6netebilirler. Durum, bile\u015fenin zaman i\u00e7inde de\u011fi\u015febilen verilerini temsil eder. <\/p>\n<p>Durum y\u00f6netmek i\u00e7in, `useState` hook&#8217;unu kullanabilirsiniz. `useState`, bile\u015fenin durumunu ve durumunu g\u00fcncelleme fonksiyonunu d\u00f6nd\u00fcren bir hook&#8217;tur.<\/p>\n<p>A\u015fa\u011f\u0131daki \u00f6rnekte, bir saya\u00e7 bile\u015feni olu\u015fturulur. Bu bile\u015fen, sayac\u0131n de\u011ferini ve sayac\u0131n de\u011ferini art\u0131rmak i\u00e7in bir fonksiyonu i\u00e7erir.<\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState } from &#8216;react&#8217;;<\/p>\n<p>function Counter() {<br \/>\n  const [count, setCount] = useState(0);<\/p>\n<p>  return (<\/p>\n<div>\n      Sayac: {count}<br \/>\n      <button onClick={() => setCount(count + 1)}>Artt\u0131r<\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default Counter;<br \/>\n&#8220;`<\/p>\n<h3>6. Bile\u015fenlerin Birlikte \u00c7al\u0131\u015fmas\u0131<\/h3>\n<p>React uygulamalar\u0131, farkl\u0131 bile\u015fenleri bir araya getirerek olu\u015fturulur. Bir bile\u015fen, di\u011fer bile\u015fenleri render ederek kullanabilir. <\/p>\n<p>A\u015fa\u011f\u0131daki \u00f6rnekte, &#8220;Header&#8221; ve &#8220;Content&#8221; ad\u0131nda iki bile\u015fen tan\u0131mlan\u0131r.  &#8220;App&#8221; bile\u015feni, &#8220;Header&#8221; ve &#8220;Content&#8221; bile\u015fenlerini render eder. <\/p>\n<p>&#8220;`javascript<br \/>\nimport React from &#8216;react&#8217;;<br \/>\nimport Header from &#8216;.\/Header&#8217;;<br \/>\nimport Content from &#8216;.\/Content&#8217;;<\/p>\n<p>function App() {<br \/>\n  return (<\/p>\n<div>\n      <Header \/><br \/>\n      <Content \/>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default App;<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnek, bile\u015fenlerin nas\u0131l bir araya getirilerek daha b\u00fcy\u00fck uygulamalar olu\u015fturulabilece\u011fini g\u00f6sterir.<\/p>\n<h2>React&#8217;i Daha Derine \u0130ncelemek<\/h2>\n<p>React&#8217;e ba\u015flamak i\u00e7in bu temel bilgiler yeterli olsa da, daha ileri d\u00fczey konular\u0131 \u00f6\u011frenmek i\u00e7in daha fazla kaynak mevcuttur. <\/p>\n<ul>\n<li>Resmi React Belgeleri: <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener\">https:\/\/reactjs.org\/docs\/getting-started.html<\/a><\/li>\n<li>React \u00d6\u011freticileri: <a href=\"https:\/\/www.freecodecamp.org\/learn\/front-end-development-libraries\/react\/getting-started-with-react\" target=\"_blank\" rel=\"noopener\">https:\/\/www.freecodecamp.org\/learn\/front-end-development-libraries\/react\/getting-started-with-react<\/a><\/li>\n<li>React Toplulu\u011fu Forumlar\u0131: <a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/reactjs\" target=\"_blank\" rel=\"noopener\">https:\/\/stackoverflow.com\/questions\/tagged\/reactjs<\/a><\/li>\n<\/ul>\n<p>React, web uygulamalar\u0131 olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir ara\u00e7t\u0131r.  Bu makalede ele al\u0131nan temel bilgilerle, React ile kendi web uygulaman\u0131z\u0131 olu\u015fturmaya ba\u015flayabilirsiniz.<\/p>\n<p>Daha fazla bilgi i\u00e7in blogumu ziyaret edebilirsiniz: <a href=\"https:\/\/fatihsoysal.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/fatihsoysal.com\/<\/a><\/p>\n<h2>#Etiketler<\/h2>\n<p>#React #JavaScript #WebGeli\u015ftirme #FrontEnd #Bile\u015fenler #SanalDOM #DurumY\u00f6netimi #Props #Hooklar #\u00d6\u011fretici #Ba\u015flang\u0131\u00e7 #Geli\u015ftirme #Uygulama #Kaynaklar #Topluluk #Belgeler #FreeCodeCamp #StackOverflow #FatihSoysal<\/p>\n","protected":false},"excerpt":{"rendered":"React&#8217;e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber React, Facebook taraf\u0131ndan geli\u015ftirilen ve g\u00fcn\u00fcm\u00fcz\u00fcn en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biri&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-3359","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&#039;e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber<\/title>\n<meta name=\"description\" content=\"React, Facebook taraf\u0131ndan geli\u015ftirilen ve g\u00fcn\u00fcm\u00fcz\u00fcn en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biri olan, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bile\u015fen tabanl\u0131 mimarisi ve sanal DOM kullan\u0131m\u0131, karma\u015f\u0131k ve dinamik uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131r\u0131r. Bu makalede, React&#039;e yeni ba\u015flayanlar i\u00e7in temel kavramlar\u0131 ve React ile bir web uygulamas\u0131 olu\u015fturmaya ba\u015flamak i\u00e7in gereken ad\u0131mlar\u0131 ele alaca\u011f\u0131z.\" \/>\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\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React&#039;e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"React, Facebook taraf\u0131ndan geli\u015ftirilen ve g\u00fcn\u00fcm\u00fcz\u00fcn en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biri olan, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bile\u015fen tabanl\u0131 mimarisi ve sanal DOM kullan\u0131m\u0131, karma\u015f\u0131k ve dinamik uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131r\u0131r. Bu makalede, React&#039;e yeni ba\u015flayanlar i\u00e7in temel kavramlar\u0131 ve React ile bir web uygulamas\u0131 olu\u015fturmaya ba\u015flamak i\u00e7in gereken ad\u0131mlar\u0131 ele alaca\u011f\u0131z.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-08T18:15:14+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=\"5 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React&#8217;e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber\",\"datePublished\":\"2024-11-08T18:15:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/\"},\"wordCount\":1060,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/\",\"name\":\"React'e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-11-08T18:15:14+00:00\",\"description\":\"React, Facebook taraf\u0131ndan geli\u015ftirilen ve g\u00fcn\u00fcm\u00fcz\u00fcn en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biri olan, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bile\u015fen tabanl\u0131 mimarisi ve sanal DOM kullan\u0131m\u0131, karma\u015f\u0131k ve dinamik uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131r\u0131r. Bu makalede, React'e yeni ba\u015flayanlar i\u00e7in temel kavramlar\u0131 ve React ile bir web uygulamas\u0131 olu\u015fturmaya ba\u015flamak i\u00e7in gereken ad\u0131mlar\u0131 ele alaca\u011f\u0131z.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React&#8217;e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber\"}]},{\"@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'e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber","description":"React, Facebook taraf\u0131ndan geli\u015ftirilen ve g\u00fcn\u00fcm\u00fcz\u00fcn en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biri olan, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bile\u015fen tabanl\u0131 mimarisi ve sanal DOM kullan\u0131m\u0131, karma\u015f\u0131k ve dinamik uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131r\u0131r. Bu makalede, React'e yeni ba\u015flayanlar i\u00e7in temel kavramlar\u0131 ve React ile bir web uygulamas\u0131 olu\u015fturmaya ba\u015flamak i\u00e7in gereken ad\u0131mlar\u0131 ele alaca\u011f\u0131z.","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\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"React'e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber","og_description":"React, Facebook taraf\u0131ndan geli\u015ftirilen ve g\u00fcn\u00fcm\u00fcz\u00fcn en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biri olan, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bile\u015fen tabanl\u0131 mimarisi ve sanal DOM kullan\u0131m\u0131, karma\u015f\u0131k ve dinamik uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131r\u0131r. Bu makalede, React'e yeni ba\u015flayanlar i\u00e7in temel kavramlar\u0131 ve React ile bir web uygulamas\u0131 olu\u015fturmaya ba\u015flamak i\u00e7in gereken ad\u0131mlar\u0131 ele alaca\u011f\u0131z.","og_url":"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-11-08T18:15:14+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"5 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React&#8217;e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber","datePublished":"2024-11-08T18:15:14+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/"},"wordCount":1060,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/","name":"React'e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-11-08T18:15:14+00:00","description":"React, Facebook taraf\u0131ndan geli\u015ftirilen ve g\u00fcn\u00fcm\u00fcz\u00fcn en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biri olan, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bile\u015fen tabanl\u0131 mimarisi ve sanal DOM kullan\u0131m\u0131, karma\u015f\u0131k ve dinamik uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131r\u0131r. Bu makalede, React'e yeni ba\u015flayanlar i\u00e7in temel kavramlar\u0131 ve React ile bir web uygulamas\u0131 olu\u015fturmaya ba\u015flamak i\u00e7in gereken ad\u0131mlar\u0131 ele alaca\u011f\u0131z.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/reacte-baslangic-yeni-baslayanlar-icin-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React&#8217;e Ba\u015flang\u0131\u00e7: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber"}]},{"@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\/3359","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=3359"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3359\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=3359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=3359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=3359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}