{"id":40220,"date":"2026-02-25T12:41:08","date_gmt":"2026-02-25T09:41:08","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=40220"},"modified":"2026-02-25T12:41:08","modified_gmt":"2026-02-25T09:41:08","slug":"react-ile-baslangic-modern-web-uygulamalari-gelistirmeye-adim-adim-giris","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-ile-baslangic-modern-web-uygulamalari-gelistirmeye-adim-adim-giris\/","title":{"rendered":"React ile Ba\u015flang\u0131\u00e7: Modern Web Uygulamalar\u0131 Geli\u015ftirmeye Ad\u0131m Ad\u0131m Giri\u015f"},"content":{"rendered":"

<\/p>\n

React ile Ba\u015flang\u0131\u00e7: Modern Web Uygulamalar\u0131 Geli\u015ftirmeye Ad\u0131m Ad\u0131m Giri\u015f<\/h2>\n

React, modern web geli\u015ftirme d\u00fcnyas\u0131nda en pop\u00fcler ve g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanelerinden biridir. Facebook taraf\u0131ndan geli\u015ftirilen ve a\u00e7\u0131k kaynak olarak sunulan React, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleri (UI) olu\u015fturmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Geli\u015ftiricilere bildirimsel, bile\u015fen tabanl\u0131 bir yakla\u015f\u0131m sunarak, etkile\u015fimli ve dinamik web uygulamalar\u0131 geli\u015ftirmeyi kolayla\u015ft\u0131r\u0131r. Bu kapsaml\u0131 makale, React’e yeni ba\u015flayanlar i\u00e7in temel kavramlardan ileri d\u00fczey konulara kadar ad\u0131m ad\u0131m bir rehber sunmay\u0131 ama\u00e7lamaktad\u0131r. React’in ne oldu\u011funu, neden bu kadar pop\u00fcler oldu\u011funu, geli\u015ftirme ortam\u0131n\u0131z\u0131 nas\u0131l kuraca\u011f\u0131n\u0131z\u0131, temel bile\u015fenleri, durumu (state), \u00f6zellikleri (props) ve Hook’lar\u0131 nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131, ayr\u0131ca pratik geli\u015ftirme ipu\u00e7lar\u0131n\u0131 ve ekosistemdeki bir sonraki ad\u0131mlar\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

React \u00f6\u011frenmek, g\u00fcn\u00fcm\u00fcz web geli\u015ftirme pazar\u0131nda kendinizi konumland\u0131rmak i\u00e7in \u00f6nemli bir yetkinliktir. \u0130ster kariyerine yeni ba\u015flayan bir geli\u015ftirici olun ister mevcut becerilerinizi geni\u015fletmek isteyen deneyimli bir profesyonel, React’in sundu\u011fu olanaklar modern ve performansl\u0131 uygulamalar yaratman\u0131z i\u00e7in size kap\u0131lar a\u00e7acakt\u0131r. Bu rehberin sonunda, kendi React uygulaman\u0131z\u0131 geli\u015ftirmeye ba\u015flayacak ve bu heyecan verici k\u00fct\u00fcphanenin temel prensiplerini kavram\u0131\u015f olacaks\u0131n\u0131z.<\/p>\n

React Nedir ve Neden \u00d6nemlidir?<\/h3>\n

React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan bir JavaScript k\u00fct\u00fcphanesidir. Bir “framework” de\u011fil, daha \u00e7ok bir “k\u00fct\u00fcphane” olarak adland\u0131r\u0131l\u0131r \u00e7\u00fcnk\u00fc genellikle sadece UI katman\u0131na odaklan\u0131r ve routing, state y\u00f6netimi gibi di\u011fer i\u015flevler i\u00e7in ek k\u00fct\u00fcphanelerle birlikte kullan\u0131l\u0131r. Ancak, geni\u015f ekosistemi ve yayg\u0131n kullan\u0131m\u0131 nedeniyle \u00e7o\u011fu zaman bir framework gibi alg\u0131lan\u0131r.<\/p>\n

React’in temel \u00f6zellikleri ve avantajlar\u0131 \u015funlard\u0131r:<\/p>\n

Bildirimsel (Declarative) Yakla\u015f\u0131m<\/h4>\n

React, kullan\u0131c\u0131 aray\u00fczlerini bildirimsel bir \u015fekilde tan\u0131mlaman\u0131za olanak tan\u0131r. Bu, uygulaman\u0131z\u0131n belirli bir anda nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fini belirtmeniz anlam\u0131na gelir, React ise DOM’u bu duruma getirmek i\u00e7in gerekli t\u00fcm g\u00fcncellemeleri otomatik olarak halleder. Geleneksel imperatif yakla\u015f\u0131mlarda oldu\u011fu gibi ad\u0131m ad\u0131m DOM manip\u00fclasyonu yapmak yerine, uygulaman\u0131z\u0131n durumunu tan\u0131mlars\u0131n\u0131z ve React bu durumu UI’a yans\u0131t\u0131r. Bu, kodunuzu daha \u00f6ng\u00f6r\u00fclebilir ve hata ay\u0131klamay\u0131 daha kolay hale getirir.<\/p>\n

Bile\u015fen Tabanl\u0131 (Component-Based) Mimari<\/h4>\n

React’in kalbinde bile\u015fenler (components) bulunur. Her React uygulamas\u0131, k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir bile\u015fenlerden olu\u015fur. Bu bile\u015fenler, kendi mant\u0131klar\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcmlerini kaps\u00fcller. \u00d6rne\u011fin, bir Button<\/code> bile\u015feni, bir Navbar<\/code> bile\u015feni veya bir ProductCard<\/code> bile\u015feni olu\u015fturabilirsiniz. Bu mod\u00fcler yap\u0131, kodun yeniden kullan\u0131labilirli\u011fini art\u0131r\u0131r, bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r ve b\u00fcy\u00fck projelerde geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r. Bile\u015fenler bir araya gelerek daha karma\u015f\u0131k UI’lar olu\u015fturur.<\/p>\n

Sanal DOM (Virtual DOM)<\/h4>\n

Performans, modern web uygulamalar\u0131 i\u00e7in kritik \u00f6neme sahiptir. React, bu sorunu Sanal DOM (Virtual DOM) ad\u0131 verilen bir mekanizma ile \u00e7\u00f6zer. Sanal DOM, ger\u00e7ek DOM’un hafif bir kopyas\u0131d\u0131r ve bellekte tutulur. Bir bile\u015fenin durumu de\u011fi\u015fti\u011finde, React \u00f6nce Sanal DOM’u g\u00fcnceller. Ard\u0131ndan, g\u00fcncellenmi\u015f Sanal DOM’u \u00f6nceki haliyle kar\u015f\u0131la\u015ft\u0131r\u0131r ve yaln\u0131zca ger\u00e7ek DOM’da de\u011fi\u015fen k\u0131s\u0131mlar\u0131 minimum d\u00fczeyde ve en verimli \u015fekilde g\u00fcnceller. Bu “diffing” ve “reconciliation” s\u00fcreci, do\u011frudan DOM manip\u00fclasyonundan \u00e7ok daha h\u0131zl\u0131d\u0131r ve uygulama performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n

Tek Y\u00f6nl\u00fc Veri Ak\u0131\u015f\u0131<\/h4>\n

React’te veri ak\u0131\u015f\u0131 genellikle tek y\u00f6nl\u00fcd\u00fcr (“top-down”). Ebeveyn bile\u015fenler, alt bile\u015fenlere “props” (\u00f6zellikler) arac\u0131l\u0131\u011f\u0131yla veri iletir. Bu, verilerin nas\u0131l de\u011fi\u015fti\u011fini ve uygulaman\u0131zda nerede kullan\u0131ld\u0131\u011f\u0131n\u0131 takip etmeyi kolayla\u015ft\u0131r\u0131r, b\u00f6ylece hatalar\u0131 bulmak ve gidermek daha basit hale gelir. Durum g\u00fcncellemeleri genellikle bir bile\u015fenin kendi i\u00e7inde veya bir \u00fcst bile\u015fen taraf\u0131ndan tetiklenir ve bu g\u00fcncellemeler alt bile\u015fenlere yay\u0131l\u0131r.<\/p>\n

Geni\u015f Ekosistem ve Topluluk Deste\u011fi<\/h4>\n

React, d\u00fcnyan\u0131n en b\u00fcy\u00fck ve en aktif geli\u015ftirici topluluklar\u0131ndan birine sahiptir. Bu, bol miktarda dok\u00fcmantasyon, \u00f6\u011fretici, \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphane ve ara\u00e7 oldu\u011fu anlam\u0131na gelir. Bir sorunla kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131zda, b\u00fcy\u00fck olas\u0131l\u0131kla \u00e7\u00f6z\u00fcm\u00fc zaten internette bulabilirsiniz. Ayr\u0131ca, React Router (routing i\u00e7in), Redux (state y\u00f6netimi i\u00e7in), Next.js (sunucu taraf\u0131 renderlama i\u00e7in) gibi bir\u00e7ok tamamlay\u0131c\u0131 k\u00fct\u00fcphane ve ara\u00e7, React’in yeteneklerini geni\u015fletir ve geli\u015ftiricilere kapsaml\u0131 bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n

Bu nedenlerden dolay\u0131 React, Facebook, Instagram, Netflix, Airbnb gibi bir\u00e7ok b\u00fcy\u00fck \u015firketin tercih etti\u011fi bir teknolojidir ve modern web geli\u015ftirme d\u00fcnyas\u0131nda vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir.<\/p>\n

React Geli\u015ftirme Ortam\u0131n\u0131 Kurma<\/h3>\n

React ile \u00e7al\u0131\u015fmaya ba\u015flamadan \u00f6nce, gerekli ara\u00e7lar\u0131 bilgisayar\u0131n\u0131za kurman\u0131z ve bir geli\u015ftirme ortam\u0131 olu\u015fturman\u0131z gerekir. Bu s\u00fcre\u00e7, genellikle olduk\u00e7a basittir.<\/p>\n

\u00d6nko\u015fullar<\/h4>\n

React uygulamalar\u0131 geli\u015ftirmek i\u00e7in birka\u00e7 temel araca ihtiyac\u0131n\u0131z olacak:<\/p>\n

* Node.js ve npm\/yarn:<\/strong> React uygulamalar\u0131 JavaScript ile yaz\u0131l\u0131r ve Node.js \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131n\u0131 gerektirir. Node.js’i y\u00fckledi\u011finizde, npm (Node Package Manager) de otomatik olarak kurulur. Alternatif olarak, yarn<\/code> paket y\u00f6neticisini de kullanabilirsiniz, ki bu bazen daha h\u0131zl\u0131 olabilir. Node.js’i resmi web sitesinden (nodejs.org) indirip kurabilirsiniz. Kurulumdan sonra terminalinizde node -v<\/code> ve npm -v<\/code> (veya yarn -v<\/code>) komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rarak do\u011fru \u015fekilde kurulup kurulmad\u0131\u011f\u0131n\u0131 kontrol edebilirsiniz.
\n* Metin D\u00fczenleyici\/IDE:<\/strong> Kod yazmak i\u00e7in bir metin d\u00fczenleyiciye ihtiyac\u0131n\u0131z olacak. Visual Studio Code (VS Code), React geli\u015ftiricileri aras\u0131nda en pop\u00fcler se\u00e7eneklerden biridir. Geni\u015f eklenti deste\u011fi, ak\u0131ll\u0131 kod tamamlama, hata ay\u0131klama \u00f6zellikleri ve entegre terminali ile harika bir geli\u015ftirme deneyimi sunar. Di\u011fer pop\u00fcler se\u00e7enekler aras\u0131nda WebStorm ve Sublime Text bulunur.
\n* Modern Web Taray\u0131c\u0131s\u0131:<\/strong> Uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131rmak ve hata ay\u0131klamak i\u00e7in Chrome, Firefox veya Edge gibi modern bir web taray\u0131c\u0131s\u0131na ihtiyac\u0131n\u0131z olacak. Bu taray\u0131c\u0131lar\u0131n geli\u015ftirici ara\u00e7lar\u0131 (Developer Tools) React uygulamalar\u0131n\u0131 incelemek ve hata ay\u0131klamak i\u00e7in vazge\u00e7ilmezdir.<\/p>\n

Proje Olu\u015fturma Y\u00f6ntemleri<\/h4>\n

React projesi olu\u015fturman\u0131n birka\u00e7 yolu vard\u0131r. Yeni ba\u015flayanlar i\u00e7in en uygun olan create-react-app<\/code> veya Vite<\/code>‘dir.<\/p>\n

Create React App (CRA)<\/h5>\n

create-react-app<\/code>, React ekibi taraf\u0131ndan desteklenen ve tek bir komutla tam yap\u0131land\u0131r\u0131lm\u0131\u015f bir React geli\u015ftirme ortam\u0131 olu\u015fturan resmi bir ara\u00e7t\u0131r. Webpack, Babel gibi ara\u00e7lar\u0131 sizin i\u00e7in yap\u0131land\u0131r\u0131r, b\u00f6ylece hemen kod yazmaya ba\u015flayabilirsiniz.<\/p>\n

Kurulum ve \u0130lk \u00c7al\u0131\u015ft\u0131rma:<\/strong>
\nTerminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n

npx create-react-app my-react-app\ncd my-react-app\nnpm start<\/code><\/pre>\n
*   npx create-react-app my-react-app<\/code>: Bu komut, my-react-app<\/code> ad\u0131nda yeni bir React projesi olu\u015fturur. npx<\/code>, npm<\/code> ile birlikte gelen bir ara\u00e7t\u0131r ve paketleri yerel olarak y\u00fcklemeden \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r.
\n*   cd my-react-app<\/code>: Proje dizinine ge\u00e7i\u015f yapar.
\n*   npm start<\/code>: Geli\u015ftirme sunucusunu ba\u015flat\u0131r. Bu komutu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, uygulaman\u0131z genellikle http:\/\/localhost:3000<\/code> adresinde otomatik olarak taray\u0131c\u0131n\u0131zda a\u00e7\u0131lacakt\u0131r. Kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikler kaydedildi\u011finde, taray\u0131c\u0131 sayfa yenilemeye gerek kalmadan otomatik olarak g\u00fcncellenecektir (hot reloading).<\/p>\n
Proje Yap\u0131s\u0131:<\/strong>
\ncreate-react-app<\/code> ile olu\u015fturulan tipik bir React projesi \u015fu dizin yap\u0131s\u0131na sahiptir:<\/p>\n
*   node_modules\/<\/code><\/strong>: Projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 i\u00e7eren klas\u00f6r. Bu klas\u00f6r\u00fc manuel olarak de\u011fi\u015ftirmemelisiniz.
\n*   public\/<\/code><\/strong>: Statik dosyalar\u0131 (HTML, resimler, manifest dosyas\u0131 vb.) i\u00e7erir. index.html<\/code> ana HTML dosyan\u0131zd\u0131r ve React uygulaman\u0131z buraya enjekte edilir.
\n*   src\/<\/code><\/strong>: React uygulaman\u0131z\u0131n ana kodunu i\u00e7eren klas\u00f6r. T\u00fcm bile\u015fenleriniz, stil dosyalar\u0131n\u0131z ve JavaScript mant\u0131\u011f\u0131n\u0131z burada bulunur.
\n    *   index.js<\/code>: Uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. React uygulaman\u0131z\u0131 DOM’a ba\u011flar.
\n    *   App.js<\/code>: Ana uygulama bile\u015feninizdir. Uygulaman\u0131z\u0131n iskeletini olu\u015fturur.
\n    *   App.css<\/code>, index.css<\/code>: Stil dosyalar\u0131.
\n    *   logo.svg<\/code>: Varsay\u0131lan logo.
\n*   package.json<\/code><\/strong>: Projenizin meta verilerini (ad\u0131, s\u00fcr\u00fcm\u00fc), ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve komut dosyalar\u0131n\u0131 (scripts) tan\u0131mlar.
\n*   README.md<\/code><\/strong>: Projeniz hakk\u0131nda bilgi i\u00e7eren dosya.<\/p>\n
Vite (Alternatif)<\/h5>\n
Son zamanlarda create-react-app<\/code>‘e h\u0131zl\u0131 bir alternatif olarak Vite<\/code> (Frans\u0131zca “h\u0131zl\u0131” anlam\u0131na gelir) pop\u00fclerlik kazanm\u0131\u015ft\u0131r. Geli\u015ftirme sunucusunu ve \u00fcretim derlemelerini \u00e7ok daha h\u0131zl\u0131 ba\u015flatmas\u0131yla bilinir. B\u00fcy\u00fck projelerde veya daha modern bir derleme deneyimi arayanlar i\u00e7in harika bir se\u00e7enektir.<\/p>\n
Kurulum ve \u0130lk \u00c7al\u0131\u015ft\u0131rma:<\/strong><\/p>\n
npm create vite@latest my-react-app -- --template react\ncd my-react-app\nnpm install\nnpm run dev<\/code><\/pre>\n
Vite de benzer bir proje yap\u0131s\u0131 sunar ancak daha minimalisttir ve index.html<\/code> dosyas\u0131n\u0131 public<\/code> yerine do\u011frudan proje k\u00f6k\u00fcnde tutar.<\/p>\n
Yeni ba\u015flayanlar i\u00e7in create-react-app<\/code> genellikle yeterlidir, ancak h\u0131z ve modern ara\u00e7lara a\u015final\u0131k kazanmak isterseniz Vite’yi de deneyebilirsiniz.<\/p>\n
React’in Temel Kavramlar\u0131<\/h3>\n
React’in g\u00fcc\u00fcn\u00fc anlamak i\u00e7in, temel yap\u0131 ta\u015flar\u0131n\u0131 ve \u00e7al\u0131\u015fma prensiplerini iyi kavramak \u00f6nemlidir.<\/p>\n
Bile\u015fenler (Components)<\/h4>\n
Daha \u00f6nce de belirtildi\u011fi gibi, bile\u015fenler React uygulamalar\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131d\u0131r. Bir bile\u015fen, kendi ba\u015f\u0131na bir UI par\u00e7as\u0131n\u0131 temsil eden ve kendi mant\u0131\u011f\u0131na, durumuna (state) ve g\u00f6r\u00fcn\u00fcm\u00fcne sahip olan ba\u011f\u0131ms\u0131z, yeniden kullan\u0131labilir bir kod blo\u011fudur. React’te iki t\u00fcr bile\u015fen vard\u0131r:<\/p>\n
*   Fonksiyonel Bile\u015fenler (Functional Components):<\/strong> Modern React’in odak noktas\u0131d\u0131r ve genellikle tercih edilirler. Bunlar, JavaScript fonksiyonlar\u0131d\u0131r ve React Hook’lar\u0131 sayesinde durum (state) ve ya\u015fam d\u00f6ng\u00fcs\u00fc \u00f6zellikleri gibi yeteneklere sahip olabilirler. Bir fonksiyonel bile\u015fen, kendisine gelen props<\/code>‘lar\u0131 al\u0131r ve bir JSX (JavaScript XML) d\u00f6nd\u00fcr\u00fcr.<\/p>\n
import React from 'react';\n\n    function Selamlama(props) {\n      return ;\n    }\n\n    \/\/ Kullan\u0131m\u0131\n    \/\/ <\/code><\/pre>\n
*   S\u0131n\u0131f Bile\u015fenleri (Class Components):<\/strong> Daha eski React versiyonlar\u0131nda yayg\u0131n olarak kullan\u0131l\u0131rlard\u0131. React.Component<\/code> s\u0131n\u0131f\u0131ndan miras al\u0131rlar ve render()<\/code> metodu i\u00e7inde JSX d\u00f6nd\u00fcr\u00fcrler. Durum (state) ve ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na sahiptirler. React Hook’lar\u0131n\u0131n ortaya \u00e7\u0131kmas\u0131yla birlikte, s\u0131n\u0131f bile\u015fenleri yeni projelerde daha az tercih edilmektedir.<\/p>\n
import React, { Component } from 'react';\n\n    class SelamlamaSinif extends Component {\n      render() {\n        return ;\n      }\n    }\n\n    \/\/ Kullan\u0131m\u0131\n    \/\/ <\/code><\/pre>\n
Bu makalede, modern React geli\u015ftirme prati\u011fine uygun olarak \u00e7o\u011funlukla fonksiyonel bile\u015fenlere odaklanaca\u011f\u0131z.<\/p>\n
JSX Nedir?<\/h4>\n
JSX (JavaScript XML), React ile kullan\u0131c\u0131 aray\u00fczlerini tan\u0131mlamak i\u00e7in kullan\u0131lan bir s\u00f6zdizimi uzant\u0131s\u0131d\u0131r. JavaScript kodu i\u00e7inde HTML benzeri etiketler yazman\u0131za olanak tan\u0131r. JSX, taray\u0131c\u0131lar taraf\u0131ndan do\u011frudan anla\u015f\u0131lamaz; Babel gibi bir derleyici taraf\u0131ndan standart JavaScript’e d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr.<\/p>\n
Neden JSX?<\/strong>
\n*   Okunabilirlik:<\/strong> HTML’e benzer yap\u0131s\u0131 sayesinde, UI’\u0131n nas\u0131l g\u00f6r\u00fcnece\u011fini anlamak daha kolayd\u0131r.
\n*   Tan\u0131d\u0131k Yap\u0131:<\/strong> Web geli\u015ftiricileri i\u00e7in HTML’e benzerli\u011fi sayesinde \u00f6\u011frenmesi kolayd\u0131r.
\n*   G\u00fc\u00e7l\u00fc JavaScript Entegrasyonu:<\/strong> JavaScript ifadelerini {}<\/code> s\u00fcsl\u00fc parantezler i\u00e7inde do\u011frudan JSX i\u00e7ine g\u00f6mebilirsiniz. Bu, dinamik i\u00e7erik olu\u015fturmay\u0131 ve ko\u015fullu renderlama gibi i\u015flemleri kolayla\u015ft\u0131r\u0131r.<\/p>\n
JSX Kurallar\u0131:<\/strong>
\n*   Tek K\u00f6k Element:<\/strong> Her JSX ifadesi, tek bir k\u00f6k element d\u00f6nd\u00fcrmelidir. Birden fazla element d\u00f6nd\u00fcrmeniz gerekiyorsa, bunlar\u0131 bir div<\/code> veya React’in Fragment<\/code>‘\u0131 (<>...<\/><\/code>) i\u00e7ine almal\u0131s\u0131n\u0131z.<\/p>\n
\/\/ Hatal\u0131\n    \/\/ return (\n    \/\/   \n    \/\/   
Paragraf<\/p>\n    \/\/ );\n\n    \/\/ Do\u011fru\n    return (\n      
\n        \n        
Paragraf<\/p>\n      <\/div>\n    );\n\n    \/\/ Veya Fragment ile\n    return (\n      <>\n        \n        
Paragraf<\/p>\n      <\/>\n    );<\/code><\/pre>\n
*   camelCase \u00d6zellikler:<\/strong> HTML’deki class<\/code> veya for<\/code> gibi baz\u0131 \u00f6zellikler JavaScript’te \u00f6zel anlamlara sahip oldu\u011fu i\u00e7in JSX’te className<\/code> ve htmlFor<\/code> gibi camelCase isimlerle kullan\u0131l\u0131r. Stil \u00f6zelliklerini de JavaScript nesneleri olarak camelCase ile yazars\u0131n\u0131z: <\/p>\n
<\/div>\n
<\/code>.
\n*   JavaScript \u0130fadeleri:<\/strong> JSX i\u00e7inde JavaScript ifadelerini kullanmak i\u00e7in s\u00fcsl\u00fc parantezler ({}<\/code>) kullan\u0131n.<\/p>\n
const ad = \"Alice\";\n    const sayi = 5;\n\n    function topla(a, b) {\n      return a + b;\n    }\n\n    return (\n      
\n        
Merhaba, {ad}!<\/p>\n        
5 + 3 = {topla(5, 3)}<\/p>\n        
Say\u0131 {sayi % 2 === 0 ? \"\u00e7ift\" : \"tek\"}.<\/p>\n      <\/div>\n    );<\/code><\/pre>\n
Props (Properties)<\/h4>\n
Props, React bile\u015fenleri aras\u0131nda veri aktar\u0131m\u0131 yapmak i\u00e7in kullan\u0131lan mekanizmad\u0131r. “Properties” kelimesinin k\u0131saltmas\u0131d\u0131r ve ebeveyn bile\u015fenlerden alt bile\u015fenlere veri iletmek i\u00e7in kullan\u0131l\u0131r. Props’lar, bir bile\u015fene d\u0131\u015far\u0131dan gelen ve bile\u015fen taraf\u0131ndan de\u011fi\u015ftirilemeyen (immutable) verilerdir. Bu, React’in tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131 prensibinin temelini olu\u015fturur.<\/p>\n
import React from 'react';\n\nfunction KullaniciKarti(props) {\n  return (\n    
\n      
{props.isim}<\/h2>\n      
Ya\u015f: {props.yas}<\/p>\n      
Meslek: {props.meslek}<\/p>\n    <\/div>\n  );\n}\n\nfunction Uygulama() {\n  return (\n    
\n      \n      \n    <\/div>\n  );\n}\n\nexport default Uygulama;<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, Uygulama<\/code> bile\u015feni KullaniciKarti<\/code> bile\u015fenine isim<\/code>, yas<\/code> ve meslek<\/code> prop’lar\u0131n\u0131 iletiyor. KullaniciKarti<\/code> bile\u015feni bu prop’lar\u0131 kendi i\u00e7inde kullanarak i\u00e7eri\u011fini olu\u015fturuyor.<\/p>\n
Destructuring ile Props Kullan\u0131m\u0131:<\/strong>
\nFonksiyonel bile\u015fenlerde props’lar\u0131 do\u011frudan fonksiyon parametresi olarak destructuring (yap\u0131 bozma) ile almak yayg\u0131n ve daha okunakl\u0131 bir y\u00f6ntemdir:<\/p>\n
function KullaniciKarti({ isim, yas, meslek }) { \/\/ props yerine do\u011frudan isim, yas, meslek\n  return (\n    
\n      
{isim}<\/h2>\n      
Ya\u015f: {yas}<\/p>\n      
Meslek: {meslek}<\/p>\n    <\/div>\n  );\n}<\/code><\/pre>\n
children<\/code> prop’u:<\/strong>
\nBaz\u0131 durumlarda, bir bile\u015fenin a\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f etiketleri aras\u0131na i\u00e7erik yerle\u015ftirmek isteyebilirsiniz. Bu i\u00e7erik, bile\u015fenin children<\/code> prop’u olarak otomatik olarak iletilir.<\/p>\n
function Kutu({ children }) {\n  return (\n    
\n      {children}\n    <\/div>\n  );\n}\n\nfunction Uygulama() {\n  return (\n    \n      \n      
Bu kutunun i\u00e7indeki bir paragraf.<\/p>\n    <\/Kutu>\n  );\n}<\/code><\/pre>\n
State (Durum)<\/h4>\n
State (durum), bir bile\u015fenin zamanla de\u011fi\u015febilen ve bile\u015fenin kendi i\u00e7inde y\u00f6netti\u011fi verilerdir. Kullan\u0131c\u0131 etkile\u015fimleri (t\u0131klamalar, form giri\u015fleri), a\u011f istekleri veya zamanlay\u0131c\u0131lar gibi olaylar sonucunda durum de\u011fi\u015febilir. Durum de\u011fi\u015fti\u011finde, React bile\u015feni yeniden render eder ve UI’\u0131 g\u00fcnceller.<\/p>\n
Fonksiyonel bile\u015fenlerde durumu y\u00f6netmek i\u00e7in useState<\/code> Hook’u kullan\u0131l\u0131r.<\/p>\n
useState<\/code> Hook’u:<\/strong>
\nuseState<\/code> Hook’u, fonksiyonel bile\u015fenlere durum eklemenin yoludur. \u0130ki elemanl\u0131 bir dizi d\u00f6nd\u00fcr\u00fcr: mevcut durum de\u011feri ve bu durumu g\u00fcncelleyen bir fonksiyon.<\/p>\n
import React, { useState } from 'react';\n\nfunction Sayac() {\n  \/\/ sayac<\/code> mevcut durum de\u011feri, setSayac<\/code> durumu g\u00fcncelleyen fonksiyon\n  \/\/ Ba\u015flang\u0131\u00e7 de\u011feri 0\n  const [sayac, setSayac] = useState(0);\n\n  const artir = () => {\n    setSayac(sayac + 1); \/\/ Durumu g\u00fcncelle\n  };\n\n  const azalt = () => {\n    setSayac(sayac - 1);\n  };\n\n  return (\n    
\n      
Mevcut Say\u0131: {sayac}<\/p>\n