{"id":32828,"date":"2025-10-26T10:41:02","date_gmt":"2025-10-26T07:41:02","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=32828"},"modified":"2025-10-26T10:41:02","modified_gmt":"2025-10-26T07:41:02","slug":"react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/","title":{"rendered":"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi"},"content":{"rendered":"

<\/p>\n

React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi<\/h2>\n

Giri\u015f: Neden Manuel Kurulum?<\/h3>\n

React ekosisteminde yeni bir proje ba\u015flatman\u0131n en yayg\u0131n ve \u00f6nerilen yolu, Create React App (CRA) kullanmakt\u0131r. CRA, geli\u015ftiricilere haz\u0131r bir yap\u0131land\u0131rma ile h\u0131zl\u0131ca ba\u015flamalar\u0131n\u0131 sa\u011flayan, s\u0131f\u0131r yap\u0131land\u0131rma gerektiren g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Ancak, CRA’n\u0131n sundu\u011fu bu kolayl\u0131k, bazen projenin temelini olu\u015fturan ara\u00e7lar\u0131n (Webpack, Babel gibi) nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131na dair derinlemesine bir anlay\u0131\u015f edinmeyi engeller. \u00d6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar geli\u015ftirirken veya projenin performans\u0131n\u0131, boyutunu ve derleme s\u00fcrecini ince ayar yapmak istedi\u011finizde, Webpack ve Babel gibi ara\u00e7lar\u0131n manuel olarak nas\u0131l yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131n\u0131 bilmek paha bi\u00e7ilmez bir yetenek haline gelir.<\/p>\n

Bu makale, React uygulaman\u0131z\u0131 Webpack 4 ve Babel 7 kullanarak s\u0131f\u0131rdan, ad\u0131m ad\u0131m nas\u0131l kuraca\u011f\u0131n\u0131z\u0131 detayl\u0131 bir \u015fekilde a\u00e7\u0131klayacakt\u0131r. Bu s\u00fcre\u00e7, sadece bir React projesi kurman\u0131za yard\u0131mc\u0131 olmakla kalmayacak, ayn\u0131 zamanda modern JavaScript geli\u015ftirmenin temel ta\u015flar\u0131 olan mod\u00fcl paketleyicileri ve transpiler’lar\u0131n \u00e7al\u0131\u015fma prensiplerini de anlaman\u0131z\u0131 sa\u011flayacakt\u0131r. Manuel kurulum, projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131, performans optimizasyonlar\u0131 ve \u00f6zel ihtiya\u00e7lar\u0131 \u00fczerinde tam kontrol sahibi olman\u0131z\u0131 sa\u011flar. Bu derinlemesine bilgi, gelecekte kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z karma\u015f\u0131k sorunlar\u0131 \u00e7\u00f6zme ve projenizi daha verimli hale getirme konusunda size b\u00fcy\u00fck avantaj sa\u011flayacakt\u0131r.<\/p>\n

Bu rehberde, bir React uygulamas\u0131n\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in gerekli olan t\u00fcm temel yap\u0131land\u0131rma ad\u0131mlar\u0131n\u0131 ele alaca\u011f\u0131z: proje ba\u015flatma, React ve React DOM kurulumu, Webpack’in temel bile\u015fenlerini anlama ve yap\u0131land\u0131rma (giri\u015f noktas\u0131, \u00e7\u0131kt\u0131, loader’lar, plugin’ler), Babel’i modern JavaScript ve JSX kodunu taray\u0131c\u0131lar\u0131n anlayabilece\u011fi formata d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in entegre etme ve basit bir React bile\u015feni olu\u015fturarak uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131rma. Ayr\u0131ca, CSS y\u00f6netimi gibi ek konulara da de\u011finerek kapsaml\u0131 bir kurulum deneyimi sunmay\u0131 hedefliyoruz.<\/p>\n

\u00d6n Gereksinimler<\/h3>\n

Bu rehberi takip etmek i\u00e7in a\u015fa\u011f\u0131daki \u00f6n gereksinimlere sahip olman\u0131z gerekmektedir:<\/p>\n

* Node.js ve npm\/Yarn:<\/strong> Bilgisayar\u0131n\u0131zda Node.js kurulu olmal\u0131d\u0131r. Node.js kurulumuyla birlikte npm (Node Package Manager) de otomatik olarak kurulur. \u0130ste\u011fe ba\u011fl\u0131 olarak Yarn paket y\u00f6neticisini de kullanabilirsiniz. Kurulum durumunu kontrol etmek i\u00e7in terminalinizde node -v<\/code> ve npm -v<\/code> (veya yarn -v<\/code>) komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rabilirsiniz.
\n* Temel JavaScript Bilgisi:<\/strong> ES6+ (ECMAScript 2015 ve sonras\u0131) \u00f6zelliklerine a\u015final\u0131k.
\n* Temel React Bilgisi:<\/strong> React’in temel kavramlar\u0131na (bile\u015fenler, JSX, props, state) y\u00fczeysel bir a\u015final\u0131k.
\n* Terminal\/Komut \u0130stemi Kullan\u0131m\u0131:<\/strong> Temel terminal komutlar\u0131n\u0131 (klas\u00f6r olu\u015fturma, klas\u00f6re gitme, paket y\u00fckleme vb.) kullanabilme becerisi.
\n* Metin D\u00fczenleyici:<\/strong> Visual Studio Code, Sublime Text veya Atom gibi bir kod d\u00fczenleyici.<\/p>\n

Proje Ba\u015flatma ve Temel Yap\u0131land\u0131rma<\/h3>\n

\u0130lk ad\u0131m, projemiz i\u00e7in bir klas\u00f6r olu\u015fturmak ve Node.js paket y\u00f6neticisi (npm veya Yarn) ile temel bir package.json<\/code> dosyas\u0131 olu\u015fturmakt\u0131r.<\/p>\n

1. Proje Klas\u00f6r\u00fc Olu\u015fturma:<\/strong>
\n Terminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131rarak yeni bir proje klas\u00f6r\u00fc olu\u015fturun ve i\u00e7ine girin:<\/p>\n

mkdir my-react-webpack-app\n    cd my-react-webpack-app<\/code><\/pre>\n
2.  package.json Dosyas\u0131 Olu\u015fturma:<\/strong>
\n    \u015eimdi, projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve betiklerini y\u00f6netecek olan package.json<\/code> dosyas\u0131n\u0131 olu\u015fturun. -y<\/code> bayra\u011f\u0131, t\u00fcm varsay\u0131lan sorular\u0131 onaylayarak h\u0131zl\u0131ca bir dosya olu\u015fturman\u0131z\u0131 sa\u011flar.<\/p>\n
npm init -y<\/code><\/pre>\n
    Bu komut, projenizin k\u00f6k dizininde package.json<\/code> ad\u0131nda bir dosya olu\u015fturacakt\u0131r.<\/p>\n
3.  Temel Klas\u00f6r Yap\u0131s\u0131:<\/strong>
\n    Projemizin daha d\u00fczenli olmas\u0131 i\u00e7in temel bir klas\u00f6r yap\u0131s\u0131 olu\u015ftural\u0131m. src<\/code> klas\u00f6r\u00fc t\u00fcm kaynak kodlar\u0131m\u0131z\u0131, public<\/code> klas\u00f6r\u00fc statik dosyalar\u0131m\u0131z\u0131 (\u00f6rne\u011fin index.html<\/code>), dist<\/code> klas\u00f6r\u00fc ise Webpack’in derledi\u011fi \u00e7\u0131kt\u0131 dosyalar\u0131n\u0131 bar\u0131nd\u0131racakt\u0131r.<\/p>\n
mkdir src public<\/code><\/pre>\n
    Bu noktada projenizin yap\u0131s\u0131 a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcnmelidir:<\/p>\n
my-react-webpack-app\/\n    \u251c\u2500\u2500 node_modules\/ (hen\u00fcz yok, sonra olu\u015facak)\n    \u251c\u2500\u2500 public\/\n    \u251c\u2500\u2500 src\/\n    \u2514\u2500\u2500 package.json<\/code><\/pre>\n
React ve React DOM Kurulumu<\/h3>\n
\u015eimdi s\u0131ra React ve React DOM paketlerini projemize eklemeye geldi. Bu paketler, React uygulamalar\u0131 geli\u015ftirmek i\u00e7in temel yap\u0131 ta\u015flar\u0131d\u0131r.<\/p>\n
npm install react react-dom<\/code><\/pre>\n
*   react<\/code>: React’in \u00e7ekirdek k\u00fct\u00fcphanesini i\u00e7erir. Bile\u015fenler, sanal DOM ve React’in temel \u00e7al\u0131\u015fma prensipleri bu pakette yer al\u0131r.
\n*   react-dom<\/code>: React bile\u015fenlerini web taray\u0131c\u0131s\u0131nda (DOM) olu\u015fturmak i\u00e7in gerekli olan paket. ReactDOM.render()<\/code> gibi metotlar\u0131 sa\u011flar.<\/p>\n
Bu paketler, uygulaman\u0131z\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in gerekli oldu\u011fundan dependencies<\/code> (ba\u011f\u0131ml\u0131l\u0131klar) olarak kurulur.<\/p>\n
Webpack 4’\u00fc Anlamak ve Kurmak<\/h3>\n
Webpack Nedir ve Neden Kullan\u0131l\u0131r?<\/h4>\n
Webpack, modern JavaScript uygulamalar\u0131 i\u00e7in bir mod\u00fcl paketleyicidir<\/em> (module bundler). Temel g\u00f6revi, projenizdeki t\u00fcm JavaScript dosyalar\u0131n\u0131, CSS dosyalar\u0131n\u0131, resimleri ve di\u011fer statik varl\u0131klar\u0131 al\u0131p bunlar\u0131 taray\u0131c\u0131da verimli bir \u015fekilde y\u00fcklenebilecek tek veya birden fazla paket (bundle) halinde birle\u015ftirmektir.<\/p>\n
Neden Webpack’e ihtiyac\u0131m\u0131z var?<\/p>\n
*   Mod\u00fcl Y\u00f6netimi:<\/strong> Modern JavaScript geli\u015ftirme, kodu k\u00fc\u00e7\u00fck, y\u00f6netilebilir mod\u00fcllere ay\u0131rarak yap\u0131l\u0131r. Webpack, bu mod\u00fcller aras\u0131ndaki ba\u011f\u0131ml\u0131l\u0131klar\u0131 \u00e7\u00f6zerek ve bunlar\u0131 do\u011fru s\u0131rayla birle\u015ftirerek uygulaman\u0131n sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.
\n*   Performans Optimizasyonu:<\/strong> Webpack, kod b\u00f6lme (code splitting), s\u0131k\u0131\u015ft\u0131rma (minification), tree shaking (kullan\u0131lmayan kodu kald\u0131rma) gibi tekniklerle uygulaman\u0131z\u0131n y\u00fcklenme s\u00fcresini ve performans\u0131n\u0131 art\u0131r\u0131r.
\n*   Varl\u0131k Y\u00f6netimi:<\/strong> JavaScript d\u0131\u015f\u0131nda CSS, resimler, fontlar gibi farkl\u0131 dosya t\u00fcrlerini de uygulama paketine dahil edebilir ve y\u00f6netebilir.
\n*   Geli\u015ftirici Deneyimi:<\/strong> Hot Module Replacement (HMR) gibi \u00f6zelliklerle, kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikliklerin an\u0131nda taray\u0131c\u0131ya yans\u0131mas\u0131n\u0131 sa\u011flayarak geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.<\/p>\n
Webpack Kurulumu<\/h4>\n
Webpack’i projemize dev dependencies<\/code> (geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131klar\u0131) olarak kuraca\u011f\u0131z \u00e7\u00fcnk\u00fc Webpack sadece geli\u015ftirme ve derleme a\u015famas\u0131nda kullan\u0131l\u0131r, \u00fcretim ortam\u0131nda \u00e7al\u0131\u015fmaz.<\/p>\n
npm install --save-dev webpack webpack-cli webpack-dev-server<\/code><\/pre>\n
*   webpack<\/code>: Webpack’in \u00e7ekirdek k\u00fct\u00fcphanesi.
\n*   webpack-cli<\/code>: Webpack’i komut sat\u0131r\u0131ndan \u00e7al\u0131\u015ft\u0131rmak i\u00e7in gerekli aray\u00fcz.
\n*   webpack-dev-server<\/code>: Geli\u015ftirme s\u0131ras\u0131nda uygulaman\u0131z\u0131 sunan bir geli\u015ftirme sunucusu. Kodunuzda de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda otomatik olarak yeniden derler ve taray\u0131c\u0131y\u0131 yeniler (veya HMR ile sadece de\u011fi\u015fen mod\u00fcl\u00fc g\u00fcnceller).<\/p>\n
Webpack Yap\u0131land\u0131rma Dosyas\u0131: webpack.config.js<\/h4>\n
Webpack’in nas\u0131l \u00e7al\u0131\u015faca\u011f\u0131n\u0131 belirlemek i\u00e7in projenizin k\u00f6k dizininde webpack.config.js<\/code> ad\u0131nda bir dosya olu\u015fturman\u0131z gerekir. Bu dosya, Webpack’in t\u00fcm ayarlar\u0131n\u0131 i\u00e7eren bir JavaScript nesnesini d\u0131\u015fa aktar\u0131r.<\/p>\n
webpack.config.js<\/code> dosyas\u0131n\u0131 olu\u015fturun ve a\u015fa\u011f\u0131daki temel yap\u0131land\u0131rmay\u0131 ekleyin:<\/p>\n
\/\/ webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  \/\/ 1. Geli\u015ftirme veya \u00fcretim modunu belirtir.\n  \/\/ 'development' veya 'production' olabilir.\n  mode: 'development',\n\n  \/\/ 2. Uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 noktas\u0131.\n  \/\/ Webpack, ba\u011f\u0131ml\u0131l\u0131k grafi\u011fini buradan olu\u015fturmaya ba\u015flar.\n  entry: '.\/src\/index.js',\n\n  \/\/ 3. Derlenmi\u015f \u00e7\u0131kt\u0131 dosyalar\u0131n\u0131n nereye kaydedilece\u011fini belirtir.\n  output: {\n    \/\/ \u00c7\u0131kt\u0131 dosyas\u0131n\u0131n ad\u0131. [name] entry'deki anahtar\u0131 kullan\u0131r, [contenthash] ise dosya i\u00e7eri\u011fine g\u00f6re bir hash ekler.\n    filename: 'bundle.js',\n    \/\/ \u00c7\u0131kt\u0131 klas\u00f6r\u00fcn\u00fcn mutlak yolu.\n    path: path.resolve(__dirname, 'dist'),\n    \/\/ Her yeni derlemede 'dist' klas\u00f6r\u00fcn\u00fc temizler. (Webpack 5 ile birlikte geldi, Webpack 4 i\u00e7in clean-webpack-plugin kullanmal\u0131y\u0131z)\n    \/\/ clean: true,\n  },\n\n  \/\/ 4. Mod\u00fcl i\u015fleme kurallar\u0131 (loader'lar).\n  \/\/ Farkl\u0131 dosya t\u00fcrlerini (JS, CSS, resimler vb.) Webpack'in anlayabilece\u011fi mod\u00fcllere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.\n  module: {\n    rules: [\n      \/\/ Loader'lar buraya eklenecek (Babel, CSS loader'lar vb.)\n    ],\n  },\n\n  \/\/ 5. Plugin'ler.\n  \/\/ Webpack'in derleme s\u00fcreci \u00fczerinde daha geni\u015f kapsaml\u0131 g\u00f6revler yapmas\u0131n\u0131 sa\u011flar (optimizasyon, varl\u0131k y\u00f6netimi vb.).\n  plugins: [],\n\n  \/\/ 6. Geli\u015ftirme sunucusu ayarlar\u0131.\n  \/\/ webpack-dev-server i\u00e7in yap\u0131land\u0131rma.\n  devServer: {\n    port: 3000, \/\/ Uygulaman\u0131n \u00e7al\u0131\u015faca\u011f\u0131 port\n    open: true, \/\/ Sunucu ba\u015flat\u0131ld\u0131\u011f\u0131nda taray\u0131c\u0131y\u0131 otomatik a\u00e7\n    hot: true, \/\/ Hot Module Replacement (HMR) etkinle\u015ftirir\n  },\n};<\/code><\/pre>\n
Bu temel yap\u0131y\u0131 ad\u0131m ad\u0131m inceleyelim:<\/p>\n
*   path<\/code> mod\u00fcl\u00fc<\/strong>: Node.js’in yerle\u015fik bir mod\u00fcl\u00fcd\u00fcr ve dosya yollar\u0131yla \u00e7al\u0131\u015fmak i\u00e7in kullan\u0131l\u0131r. path.resolve(__dirname, 'dist')<\/code> ifadesi, ge\u00e7erli dizinin (__dirname<\/code>) alt\u0131ndaki dist<\/code> klas\u00f6r\u00fcn\u00fcn mutlak yolunu verir. Bu, farkl\u0131 i\u015fletim sistemlerinde yol sorunlar\u0131 ya\u015famamak i\u00e7in \u00f6nemlidir.
\n*   mode<\/code><\/strong>: Webpack’in \u00e7al\u0131\u015fma modunu belirtir. development<\/code> (geli\u015ftirme) modu daha h\u0131zl\u0131 derleme ve hata ay\u0131klama i\u00e7in optimize edilmi\u015ftir, production<\/code> (\u00fcretim) modu ise \u00e7\u0131kt\u0131y\u0131 optimize eder (minify, tree shaking vb.).
\n*   entry<\/code><\/strong>: Webpack’in uygulaman\u0131z\u0131n ba\u011f\u0131ml\u0131l\u0131k grafi\u011fini olu\u015fturmaya ba\u015flayaca\u011f\u0131 ana giri\u015f noktas\u0131n\u0131 belirtir. React uygulamam\u0131z i\u00e7in genellikle src\/index.js<\/code> olacakt\u0131r.
\n*   output<\/code><\/strong>: Webpack’in derlenmi\u015f \u00e7\u0131kt\u0131 dosyalar\u0131n\u0131 nereye kaydedece\u011fini ve adlar\u0131n\u0131 nas\u0131l verece\u011fini belirtir. filename<\/code> derlenmi\u015f JavaScript dosyas\u0131n\u0131n ad\u0131n\u0131, path<\/code> ise \u00e7\u0131kt\u0131 klas\u00f6r\u00fcn\u00fcn mutlak yolunu tan\u0131mlar.<\/p>\n
HTML \u015eablonu Olu\u015fturma: html-webpack-plugin<\/h4>\n
Webpack, JavaScript dosyalar\u0131m\u0131z\u0131 derler, ancak taray\u0131c\u0131n\u0131n bunlar\u0131 y\u00fckleyebilmesi i\u00e7in bir HTML dosyas\u0131na ihtiyac\u0131m\u0131z var. html-webpack-plugin<\/code>, Webpack’in derlenmi\u015f JavaScript paketini otomatik olarak bir HTML dosyas\u0131na enjekte etmesini sa\u011flar.<\/p>\n
1.  Plugin Kurulumu:<\/strong><\/p>\n
npm install --save-dev html-webpack-plugin<\/code><\/pre>\n
2.  public\/index.html<\/code> Dosyas\u0131 Olu\u015fturma:<\/strong>
\n    public<\/code> klas\u00f6r\u00fcnde index.html<\/code> ad\u0131nda basit bir HTML dosyas\u0131 olu\u015fturun. Bu dosya, React uygulamas\u0131n\u0131n ba\u011flanaca\u011f\u0131 k\u00f6k DOM \u00f6\u011fesini i\u00e7erecektir.<\/p>\n
\n    \n    \n    \n        \n        \n        React Webpack App<\/title>\n    <\/head>\n    <body>\n        <div id=\"root\"><\/div>\n        <!-- Webpack, bundle.js dosyas\u0131n\u0131 buraya otomatik olarak ekleyecektir -->\n    <\/body>\n    <\/html><\/code><\/pre>\n<p>3.  <strong><code>webpack.config.js<\/code> Entegrasyonu:<\/strong><br \/>\n    \u015eimdi <code>html-webpack-plugin<\/code>‘i <code>webpack.config.js<\/code> dosyan\u0131za dahil edin:<\/p>\n<pre><code class=\"language-javascript\">\/\/ webpack.config.js\n    const path = require('path');\n    const HtmlWebpackPlugin = require('html-webpack-plugin'); \/\/ Plugin'i i\u00e7eri aktar\n\n    module.exports = {\n      mode: 'development',\n      entry: '.\/src\/index.js',\n      output: {\n        filename: 'bundle.js',\n        path: path.resolve(__dirname, 'dist'),\n      },\n      module: {\n        rules: [],\n      },\n      plugins: [\n        new HtmlWebpackPlugin({\n          template: '.\/public\/index.html', \/\/ Kullan\u0131lacak HTML \u015fablonu\n          filename: 'index.html',          \/\/ \u00c7\u0131kt\u0131 dosyas\u0131n\u0131n ad\u0131 (dist klas\u00f6r\u00fcnde)\n        }),\n      ],\n      devServer: {\n        port: 3000,\n        open: true,\n        hot: true,\n      },\n    };<\/code><\/pre>\n<p>    <code>plugins<\/code> dizisine <code>new HtmlWebpackPlugin()<\/code> \u00f6rne\u011fini ekleyerek, Webpack’e <code>public\/index.html<\/code> dosyas\u0131n\u0131 \u015fablon olarak kullanmas\u0131n\u0131 ve derlenmi\u015f <code>bundle.js<\/code> dosyas\u0131n\u0131 otomatik olarak bu \u015fablona enjekte etmesini s\u00f6yl\u00fcyoruz.<\/p>\n<h4>Geli\u015ftirme Sunucusu: webpack-dev-server<\/h4>\n<p><code>webpack-dev-server<\/code> paketi, geli\u015ftirme s\u00fcrecinizi b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131ran bir HTTP sunucusu sa\u011flar. Kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikleri alg\u0131lar ve uygulaman\u0131z\u0131 otomatik olarak yeniden derleyip taray\u0131c\u0131y\u0131 yeniler.<\/p>\n<p><code>webpack.config.js<\/code> dosyas\u0131nda <code>devServer<\/code> objesi zaten tan\u0131mlanm\u0131\u015ft\u0131:<\/p>\n<pre><code class=\"language-javascript\">devServer: {\n  port: 3000, \/\/ Uygulaman\u0131n \u00e7al\u0131\u015faca\u011f\u0131 port\n  open: true, \/\/ Sunucu ba\u015flat\u0131ld\u0131\u011f\u0131nda taray\u0131c\u0131y\u0131 otomatik a\u00e7\n  hot: true,  \/\/ Hot Module Replacement (HMR) etkinle\u015ftirir\n},<\/code><\/pre>\n<p>*   <code>port<\/code>: Uygulaman\u0131z\u0131n eri\u015filebilir olaca\u011f\u0131 port numaras\u0131n\u0131 belirler.<br \/>\n*   <code>open<\/code>: <code>true<\/code> olarak ayarland\u0131\u011f\u0131nda, sunucu ba\u015flat\u0131ld\u0131\u011f\u0131nda taray\u0131c\u0131n\u0131z\u0131 otomatik olarak a\u00e7ar.<br \/>\n*   <code>hot<\/code>: Hot Module Replacement (HMR) \u00f6zelli\u011fini etkinle\u015ftirir. HMR, uygulaman\u0131n tamam\u0131n\u0131 yenilemeden, sadece de\u011fi\u015fen mod\u00fclleri g\u00fcncelleyerek geli\u015ftirme deneyimini iyile\u015ftirir.<\/p>\n<h4>package.json Scriptleri<\/h4>\n<p>Webpack komutlar\u0131n\u0131 daha kolay \u00e7al\u0131\u015ft\u0131rmak i\u00e7in <code>package.json<\/code> dosyan\u0131za baz\u0131 betikler ekleyelim.<\/p>\n<p><code>package.json<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve <code>scripts<\/code> b\u00f6l\u00fcm\u00fcn\u00fc a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"my-react-webpack-app\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"start\": \"webpack-dev-server --config webpack.config.js --mode development\",\n    \"build\": \"webpack --config webpack.config.js --mode production\"\n  },\n  \"keywords\": [],\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"dependencies\": {\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"html-webpack-plugin\": \"^5.6.0\",\n    \"webpack\": \"^4.46.0\",\n    \"webpack-cli\": \"^3.3.12\",\n    \"webpack-dev-server\": \"^3.11.3\"\n  }\n}<\/code><\/pre>\n<p>*   <code>npm start<\/code>: <code>webpack-dev-server<\/code>‘\u0131 <code>development<\/code> modunda ba\u015flat\u0131r. Bu, geli\u015ftirme s\u0131ras\u0131nda kullanaca\u011f\u0131n\u0131z komuttur.<br \/>\n*   <code>npm run build<\/code>: Webpack’i <code>production<\/code> modunda \u00e7al\u0131\u015ft\u0131r\u0131r. Bu, uygulaman\u0131z\u0131n da\u011f\u0131t\u0131ma haz\u0131r, optimize edilmi\u015f bir s\u00fcr\u00fcm\u00fcn\u00fc <code>dist<\/code> klas\u00f6r\u00fcne derler.<\/p>\n<h3>Babel 7 ile Modern JavaScript Deste\u011fi<\/h3>\n<h4>Babel Nedir ve Neden \u0130htiya\u00e7 Duyar\u0131z?<\/h4>\n<p>Babel, bir <em>JavaScript derleyicisidir<\/em> veya <em>transpiler’\u0131d\u0131r<\/em>. Temel g\u00f6revi, modern JavaScript (ES6+, JSX, TypeScript vb.) kodunu al\u0131p, eski taray\u0131c\u0131lar\u0131n ve ortamlar\u0131n anlayabilece\u011fi eski JavaScript (ES5) koduna d\u00f6n\u00fc\u015ft\u00fcrmektir.<\/p>\n<p>Neden Babel’e ihtiyac\u0131m\u0131z var?<\/p>\n<p>*   <strong>Taray\u0131c\u0131 Uyumlulu\u011fu:<\/strong> Yeni JavaScript \u00f6zellikleri s\u00fcrekli olarak eklenir, ancak t\u00fcm taray\u0131c\u0131lar bu \u00f6zellikleri ayn\u0131 anda desteklemez. Babel, kodunuzu geriye d\u00f6n\u00fck uyumlu hale getirerek geni\u015f bir taray\u0131c\u0131 deste\u011fi sa\u011flar.<br \/>\n*   <strong>JSX Deste\u011fi:<\/strong> React’in en belirgin \u00f6zelliklerinden biri JSX’tir. JSX, JavaScript i\u00e7inde HTML benzeri s\u00f6z dizimi kullanman\u0131z\u0131 sa\u011flar. Taray\u0131c\u0131lar JSX’i do\u011frudan anlayamaz. Babel, JSX kodunu taray\u0131c\u0131lar\u0131n anlayabilece\u011fi standart JavaScript (yani <code>React.createElement()<\/code> \u00e7a\u011fr\u0131lar\u0131na) d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<br \/>\n*   <strong>Geli\u015ftirici Verimlili\u011fi:<\/strong> Geli\u015ftiricilerin en yeni JavaScript \u00f6zelliklerini ve s\u00f6z dizimini (\u00f6rne\u011fin arrow functions, async\/await, spread operat\u00f6r\u00fc) kullanmas\u0131na olanak tan\u0131r, bu da daha temiz, daha okunabilir ve daha verimli kod yazmay\u0131 sa\u011flar.<\/p>\n<h4>Babel Kurulumu<\/h4>\n<p>Babel’i ve React ile \u00e7al\u0131\u015fmak i\u00e7in gerekli olan \u00f6n ayarlar\u0131 (presets) ve loader’\u0131 kural\u0131m:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev @babel\/core babel-loader @babel\/preset-env @babel\/preset-react<\/code><\/pre>\n<p>*   <code>@babel\/core<\/code>: Babel’in \u00e7ekirdek motoru.<br \/>\n*   <code>babel-loader<\/code>: Webpack’in Babel’i kullanarak JavaScript dosyalar\u0131n\u0131 i\u015flemesini sa\u011flayan loader.<br \/>\n*   <code>@babel\/preset-env<\/code>: JavaScript’in en son \u00f6zelliklerini hedef taray\u0131c\u0131lara g\u00f6re otomatik olarak d\u00f6n\u00fc\u015ft\u00fcren bir Babel \u00f6n ayar\u0131. Hangi taray\u0131c\u0131lar\u0131 hedefledi\u011finizi belirterek sadece gerekli d\u00f6n\u00fc\u015f\u00fcmleri yapar.<br \/>\n*   <code>@babel\/preset-react<\/code>: JSX s\u00f6z dizimini ve React’e \u00f6zg\u00fc di\u011fer \u00f6zellikleri standart JavaScript’e d\u00f6n\u00fc\u015ft\u00fcren bir Babel \u00f6n ayar\u0131.<\/p>\n<h4>Babel Yap\u0131land\u0131rmas\u0131: .babelrc veya babel.config.js<\/h4>\n<p>Babel’in hangi \u00f6n ayarlar\u0131 ve eklentileri kullanaca\u011f\u0131n\u0131 belirtmek i\u00e7in projenizin k\u00f6k dizininde <code>.babelrc<\/code> ad\u0131nda bir dosya olu\u015fturman\u0131z veya <code>babel.config.js<\/code> kullanman\u0131z gerekir. <code>.babelrc<\/code> daha basittir ve k\u00fc\u00e7\u00fck projeler i\u00e7in yeterlidir.<\/p>\n<p><code>.babelrc<\/code> dosyas\u0131n\u0131 olu\u015fturun:<\/p>\n<pre><code class=\"language-json\">\/\/ .babelrc\n{\n  \"presets\": [\n    \"@babel\/preset-env\",\n    \"@babel\/preset-react\"\n  ]\n}<\/code><\/pre>\n<p>Bu yap\u0131land\u0131rma, Babel’e <code>@babel\/preset-env<\/code> (modern JavaScript \u00f6zelliklerini d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in) ve <code>@babel\/preset-react<\/code> (JSX’i ve React’e \u00f6zg\u00fc di\u011fer \u00f6zellikleri d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in) kullanmas\u0131n\u0131 s\u00f6yler.<\/p>\n<h4>Webpack ile Babel Entegrasyonu<\/h4>\n<p>\u015eimdi <code>babel-loader<\/code>‘\u0131 <code>webpack.config.js<\/code> dosyan\u0131zdaki <code>module.rules<\/code> dizisine ekleyerek Webpack’in JavaScript\/JSX dosyalar\u0131n\u0131 Babel ile i\u015flemesini sa\u011flayal\u0131m.<\/p>\n<p><code>webpack.config.js<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve <code>module.rules<\/code> b\u00f6l\u00fcm\u00fcn\u00fc g\u00fcncelleyin:<\/p>\n<pre><code class=\"language-javascript\">\/\/ webpack.config.js\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  mode: 'development',\n  entry: '.\/src\/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  module: {\n    rules: [\n      {\n        test: \/\\.(js|jsx)$\/, \/\/ .js veya .jsx uzant\u0131l\u0131 dosyalar\u0131 hedefle\n        exclude: \/node_modules\/, \/\/ node_modules klas\u00f6r\u00fcndeki dosyalar\u0131 hari\u00e7 tut\n        use: {\n          loader: 'babel-loader', \/\/ babel-loader kullan\n        },\n      },\n    ],\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: '.\/public\/index.html',\n      filename: 'index.html',\n    }),\n  ],\n  devServer: {\n    port: 3000,\n    open: true,\n    hot: true,\n  },\n};<\/code><\/pre>\n<p>*   <strong><code>test: \/\\.(js|jsx)$\/<\/code><\/strong>: Bu kural\u0131n <code>.js<\/code> veya <code>.jsx<\/code> uzant\u0131l\u0131 dosyalara uygulanaca\u011f\u0131n\u0131 belirtir.<br \/>\n*   <strong><code>exclude: \/node_modules\/<\/code><\/strong>: <code>node_modules<\/code> klas\u00f6r\u00fcndeki dosyalar\u0131 Babel’in i\u015flemesinden hari\u00e7 tutar\u0131z. Bu, derleme s\u00fcresini h\u0131zland\u0131r\u0131r ve gereksiz d\u00f6n\u00fc\u015f\u00fcmleri \u00f6nler, \u00e7\u00fcnk\u00fc genellikle bu paketler zaten derlenmi\u015f JavaScript i\u00e7erir.<br \/>\n*   <strong><code>use: { loader: 'babel-loader' }<\/code><\/strong>: E\u015fle\u015fen dosyalar i\u00e7in <code>babel-loader<\/code>‘\u0131n kullan\u0131laca\u011f\u0131n\u0131 belirtir. <code>babel-loader<\/code>, <code>.babelrc<\/code> dosyas\u0131ndaki yap\u0131land\u0131rmay\u0131 otomatik olarak kullanacakt\u0131r.<\/p>\n<h3>CSS ve Stil Y\u00f6netimi<\/h3>\n<p>React uygulamalar\u0131nda stil y\u00f6netimi i\u00e7in \u00e7e\u015fitli y\u00f6ntemler bulunur. En temel y\u00f6ntem, CSS dosyalar\u0131n\u0131 do\u011frudan import etmek ve Webpack arac\u0131l\u0131\u011f\u0131yla i\u015flemek. Bunun i\u00e7in <code>style-loader<\/code> ve <code>css-loader<\/code>‘a ihtiyac\u0131m\u0131z var.<\/p>\n<h4>CSS Loader ve Style Loader<\/h4>\n<p>1.  <strong>Loader Kurulumu:<\/strong><\/p>\n<pre><code class=\"language-bash\">npm install --save-dev style-loader css-loader<\/code><\/pre>\n<p>    *   <code>css-loader<\/code>: CSS dosyalar\u0131n\u0131 okur ve <code>@import<\/code> ve <code>url()<\/code> ifadelerini \u00e7\u00f6zerek bunlar\u0131 JavaScript mod\u00fcllerine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<br \/>\n    *   <code>style-loader<\/code>: <code>css-loader<\/code> taraf\u0131ndan d\u00f6n\u00fc\u015ft\u00fcr\u00fclen CSS’i al\u0131r ve derlenmi\u015f JavaScript paketi arac\u0131l\u0131\u011f\u0131yla DOM’a (genellikle <code><\/p>\n<style><\/code> etiketleri i\u00e7ine) enjekte eder.<\/p>\n<p>2.  <strong><code>webpack.config.js<\/code> Entegrasyonu:<\/strong><br \/>\n    <code>webpack.config.js<\/code> dosyas\u0131ndaki <code>module.rules<\/code> dizisine yeni bir kural ekleyin:<\/p>\n<pre><code class=\"language-javascript\">\/\/ webpack.config.js\n    \/\/ ...\n    module: {\n      rules: [\n        {\n          test: \/\\.(js|jsx)$\/,\n          exclude: \/node_modules\/,\n          use: {\n            loader: 'babel-loader',\n          },\n        },\n        {\n          test: \/\\.css$\/, \/\/ .css uzant\u0131l\u0131 dosyalar\u0131 hedefle\n          use: ['style-loader', 'css-loader'], \/\/ style-loader ve css-loader kullan\n        },\n      ],\n    },\n    \/\/ ...<\/code><\/pre>\n<p>    <strong>\u00d6nemli:<\/strong> <code>use<\/code> dizisindeki loader'lar sa\u011fdan sola do\u011fru \u00e7al\u0131\u015f\u0131r. Yani \u00f6nce <code>css-loader<\/code> CSS dosyas\u0131n\u0131 i\u015fler, ard\u0131ndan <code>style-loader<\/code> i\u015flenmi\u015f CSS'i DOM'a enjekte eder.<\/p>\n<h4>\u00dcretim \u0130\u00e7in CSS \u00c7\u0131karma: mini-css-extract-plugin<\/h4>\n<p>Geli\u015ftirme ortam\u0131nda <code>style-loader<\/code> kullanmak harikad\u0131r, \u00e7\u00fcnk\u00fc CSS de\u011fi\u015fiklikleri an\u0131nda yans\u0131r. Ancak \u00fcretim ortam\u0131nda, CSS'in JavaScript paketi i\u00e7ine g\u00f6m\u00fclmesi yerine ayr\u0131 bir <code>.css<\/code> dosyas\u0131na \u00e7\u0131kar\u0131lmas\u0131 genellikle daha iyi bir performansa yol a\u00e7ar. Bu, taray\u0131c\u0131n\u0131n CSS'i paralel olarak y\u00fcklemesini ve \u00f6nbelle\u011fe almas\u0131n\u0131 sa\u011flar. Bunun i\u00e7in <code>mini-css-extract-plugin<\/code>'i kullanaca\u011f\u0131z.<\/p>\n<p>1.  <strong>Plugin Kurulumu:<\/strong><\/p>\n<pre><code class=\"language-bash\">npm install --save-dev mini-css-extract-plugin<\/code><\/pre>\n<p>2.  <strong><code>webpack.config.js<\/code> Entegrasyonu:<\/strong><br \/>\n    <code>mini-css-extract-plugin<\/code>'i <code>webpack.config.js<\/code> dosyan\u0131za dahil edin ve CSS kural\u0131n\u0131 <code>mode<\/code>'a g\u00f6re ko\u015fullu hale getirin:<\/p>\n<pre><code class=\"language-javascript\">\/\/ webpack.config.js\n    const path = require('path');\n    const HtmlWebpackPlugin = require('html-webpack-plugin');\n    const MiniCssExtractPlugin = require('mini-css-extract-plugin'); \/\/ Plugin'i i\u00e7eri aktar\n\n    module.exports = (env, argv) => { \/\/ env ve argv parametrelerini alarak mode'a eri\u015febiliriz\n      const isDevelopment = argv.mode === 'development';\n\n      return {\n        mode: argv.mode, \/\/ Komut sat\u0131r\u0131ndan gelen mode'u kullan\n        entry: '.\/src\/index.js',\n        output: {\n          filename: 'bundle.js',\n          path: path.resolve(__dirname, 'dist'),\n        },\n        module: {\n          rules: [\n            {\n              test: \/\\.(js|jsx)$\/,\n              exclude: \/node_modules\/,\n              use: {\n                loader: 'babel-loader',\n              },\n            },\n            {\n              test: \/\\.css$\/,\n              use: [\n                isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader, \/\/ Geli\u015ftirmede style-loader, \u00fcretimde MiniCssExtractPlugin\n                'css-loader',\n              ],\n            },\n          ],\n        },\n        plugins: [\n          new HtmlWebpackPlugin({\n            template: '.\/public\/index.html',\n            filename: 'index.html',\n          }),\n          !isDevelopment && new MiniCssExtractPlugin({ \/\/ Sadece \u00fcretim modunda \u00e7al\u0131\u015ft\u0131r\n            filename: '[name].[contenthash].css',\n            chunkFilename: '[id].[contenthash].css',\n          }),\n        ].filter(Boolean), \/\/ false de\u011ferlerini diziden filtrele\n        devServer: {\n          port: 3000,\n          open: true,\n          hot: true,\n        },\n      };\n    };<\/code><\/pre>\n<p>    Yukar\u0131daki de\u011fi\u015fikliklerde:<br \/>\n    *   <code>module.exports<\/code> bir fonksiyona d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc. Bu, Webpack'in <code>env<\/code> (ortam de\u011fi\u015fkenleri) ve <code>argv<\/code> (komut sat\u0131r\u0131 arg\u00fcmanlar\u0131) parametrelerine eri\u015fmemizi sa\u011flar. <code>argv.mode<\/code> ile mevcut modu (<code>development<\/code> veya <code>production<\/code>) kontrol edebiliriz.<br \/>\n    *   <code>isDevelopment<\/code> de\u011fi\u015fkeni, mevcut modun geli\u015ftirme olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.<br \/>\n    *   CSS kural\u0131nda, <code>isDevelopment<\/code> durumuna g\u00f6re <code>style-loader<\/code> veya <code>MiniCssExtractPlugin.loader<\/code> kullan\u0131l\u0131r.<br \/>\n    *   <code>plugins<\/code> dizisinde, <code>MiniCssExtractPlugin<\/code> sadece <code>isDevelopment<\/code> <code>false<\/code> oldu\u011funda (yani \u00fcretim modunda) eklenir. <code>filter(Boolean)<\/code> metodu, <code>false<\/code> olan plugin'leri (geli\u015ftirme modunda <code>MiniCssExtractPlugin<\/code>'in sonucu <code>false<\/code> olacakt\u0131r) diziden temizler.<\/p>\n<p>    Bu sayede, <code>npm start<\/code> ile geli\u015ftirme yaparken CSS'iniz h\u0131zl\u0131ca enjekte edilirken, <code>npm run build<\/code> ile \u00fcretim derlemesi yap\u0131ld\u0131\u011f\u0131nda CSS'iniz ayr\u0131 bir dosyaya \u00e7\u0131kar\u0131lacakt\u0131r.<\/p>\n<h3>\u0130lk React Bile\u015fenini Olu\u015fturma<\/h3>\n<p>\u015eimdi s\u0131ra React uygulamas\u0131n\u0131n kalbini olu\u015fturan bile\u015fenleri yazmaya geldi.<\/p>\n<p>1.  <strong><code>src\/App.js<\/code> Dosyas\u0131 Olu\u015fturma:<\/strong><br \/>\n    <code>src<\/code> klas\u00f6r\u00fcnde <code>App.js<\/code> ad\u0131nda basit bir React bile\u015feni olu\u015fturun:<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/App.js\n    import React from 'react';\n    import '.\/App.css'; \/\/ App.css dosyas\u0131n\u0131 import ediyoruz\n\n    const App = () => {\n      return (\n        <div className=\"App\">\n          \n          <p>Manuel kurulum ba\u015far\u0131yla tamamland\u0131.<\/p>\n        <\/div>\n      );\n    };\n\n    export default App;<\/code><\/pre>\n<p>2.  <strong><code>src\/App.css<\/code> Dosyas\u0131 Olu\u015fturma:<\/strong><br \/>\n    <code>src<\/code> klas\u00f6r\u00fcnde <code>App.css<\/code> ad\u0131nda bir stil dosyas\u0131 olu\u015fturun:<\/p>\n<pre><code class=\"language-css\">\/<em> src\/App.css <\/em>\/\n    .App {\n      font-family: Arial, sans-serif;\n      text-align: center;\n      margin-top: 50px;\n      color: #333;\n    }\n\n    h1 {\n      color: #007bff;\n    }<\/code><\/pre>\n<p>3.  <strong><code>src\/index.js<\/code> Dosyas\u0131 Olu\u015fturma:<\/strong><br \/>\n    <code>src<\/code> klas\u00f6r\u00fcnde <code>index.js<\/code> ad\u0131nda ana giri\u015f noktan\u0131z\u0131 olu\u015fturun. Bu dosya, React uygulamas\u0131n\u0131 DOM'a ba\u011flayacakt\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/index.js\n    import React from 'react';\n    import ReactDOM from 'react-dom\/client'; \/\/ React 18 i\u00e7in createRoot kullan\u0131yoruz\n    import App from '.\/App'; \/\/ App bile\u015fenini import ediyoruz\n\n    import '.\/index.css'; \/\/ Global CSS dosyas\u0131n\u0131 import ediyoruz\n\n    \/\/ React 18 ile birlikte gelen yeni k\u00f6k API'sini kullan\u0131yoruz\n    const root = ReactDOM.createRoot(document.getElementById('root'));\n    root.render(\n      <React.StrictMode>\n        <App \/>\n      <\/React.StrictMode>\n    );<\/code><\/pre>\n<p>4.  <strong><code>src\/index.css<\/code> Dosyas\u0131 Olu\u015fturma:<\/strong><br \/>\n    <code>src<\/code> klas\u00f6r\u00fcnde <code>index.css<\/code> ad\u0131nda global stil dosyas\u0131 olu\u015fturun:<\/p>\n<pre><code class=\"language-css\">\/<em> src\/index.css <\/em>\/\n    body {\n      margin: 0;\n      padding: 0;\n      background-color: #f4f4f4;\n    }<\/code><\/pre>\n<p>    <strong>Not:<\/strong> React 18 ile birlikte <code>ReactDOM.render<\/code> yerine <code>ReactDOM.createRoot<\/code> kullan\u0131lmas\u0131 \u00f6nerilir. Bu, e\u015fzamanl\u0131 renderlama ve di\u011fer yeni \u00f6zellikler i\u00e7in gereklidir. Yukar\u0131daki <code>index.js<\/code> kodu bu yeni API'yi kullan\u0131r.<\/p>\n<h3>Uygulamay\u0131 \u00c7al\u0131\u015ft\u0131rma ve Test Etme<\/h3>\n<p>Art\u0131k her \u015fey haz\u0131r! Uygulamam\u0131z\u0131 \u00e7al\u0131\u015ft\u0131rabilir ve test edebiliriz.<\/p>\n<p>1.  <strong>Geli\u015ftirme Sunucusunu Ba\u015flatma:<\/strong><br \/>\n    Terminalinizde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>    Bu komut, <code>webpack-dev-server<\/code>'\u0131 ba\u015flatacak ve taray\u0131c\u0131n\u0131z otomatik olarak <code>http:\/\/localhost:3000<\/code> adresinde a\u00e7\u0131lacakt\u0131r (e\u011fer <code>open: true<\/code> ayarland\u0131ysa). \"Merhaba, Webpack ve React!\" yaz\u0131s\u0131n\u0131 ve stil verdi\u011finiz elementleri g\u00f6rmelisiniz. <code>src\/App.js<\/code> veya <code>src\/App.css<\/code> dosyalar\u0131nda de\u011fi\u015fiklikler yaparak HMR'nin (Hot Module Replacement) \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6zlemleyebilirsiniz.<\/p>\n<p>2.  <strong>\u00dcretim Derlemesi Olu\u015fturma:<\/strong><br \/>\n    Uygulaman\u0131z\u0131n \u00fcretim i\u00e7in optimize edilmi\u015f bir s\u00fcr\u00fcm\u00fcn\u00fc olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>    Bu komut, Webpack'i <code>production<\/code> modunda \u00e7al\u0131\u015ft\u0131racak ve <code>dist<\/code> klas\u00f6r\u00fcne optimize edilmi\u015f <code>index.html<\/code>, <code>bundle.js<\/code> ve ayr\u0131 bir <code>main.css<\/code> dosyas\u0131 (e\u011fer CSS'iniz varsa) olu\u015fturacakt\u0131r. Bu dosyalar\u0131 bir web sunucusuna y\u00fckleyerek uygulaman\u0131z\u0131 canl\u0131ya alabilirsiniz.<\/p>\n<p>    <code>dist<\/code> klas\u00f6r\u00fcn\u00fcn i\u00e7eri\u011fi a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcnmelidir:<\/p>\n<pre><code class=\"language-\">my-react-webpack-app\/\n    \u251c\u2500\u2500 dist\/\n    \u2502   \u251c\u2500\u2500 bundle.js\n    \u2502   \u251c\u2500\u2500 index.html\n    \u2502   \u2514\u2500\u2500 main.[contenthash].css (veya benzer bir isim)\n    \u251c\u2500\u2500 node_modules\/\n    \u251c\u2500\u2500 public\/\n    \u251c\u2500\u2500 src\/\n    \u251c\u2500\u2500 .babelrc\n    \u251c\u2500\u2500 package.json\n    \u2514\u2500\u2500 webpack.config.js<\/code><\/pre>\n<h3>Geli\u015fmi\u015f Konulara K\u0131sa Bir Bak\u0131\u015f<\/h3>\n<p>Bu manuel kurulum, React uygulaman\u0131z\u0131 Webpack ve Babel ile ba\u015flatmak i\u00e7in sa\u011flam bir temel olu\u015fturur. Ancak, Webpack ve Babel'in yetenekleri \u00e7ok daha geni\u015ftir. \u0130\u015fte ke\u015ffedebilece\u011finiz baz\u0131 geli\u015fmi\u015f konular:<\/p>\n<p>*   <strong>Source Maps (<code>devtool<\/code>)<\/strong>: Hata ay\u0131klamay\u0131 kolayla\u015ft\u0131rmak i\u00e7in derlenmi\u015f kodunuzu orijinal kaynak kodunuzla e\u015fle\u015ftirir. <code>webpack.config.js<\/code> i\u00e7inde <code>devtool: 'eval-source-map'<\/code> (geli\u015ftirme i\u00e7in) veya <code>devtool: 'source-map'<\/code> (\u00fcretim i\u00e7in) gibi se\u00e7enekler kullanabilirsiniz.<br \/>\n*   <strong>Code Splitting<\/strong>: Uygulaman\u0131z\u0131n boyutunu azaltmak ve y\u00fckleme s\u00fcresini h\u0131zland\u0131rmak i\u00e7in kodu daha k\u00fc\u00e7\u00fck par\u00e7alara b\u00f6lme tekni\u011fi. \u00d6zellikle b\u00fcy\u00fck uygulamalarda kritik \u00f6neme sahiptir. React.lazy ve Suspense ile dinamik importlar kullanarak kolayca uygulanabilir.<br \/>\n*   <strong>Ortam De\u011fi\u015fkenleri (<code>webpack.DefinePlugin<\/code>)<\/strong>: Uygulaman\u0131zda farkl\u0131 ortamlar (geli\u015ftirme, test, \u00fcretim) i\u00e7in farkl\u0131 yap\u0131land\u0131rmalar (\u00f6rne\u011fin API URL'leri) kullanman\u0131z\u0131 sa\u011flar. <code>webpack.DefinePlugin<\/code> ile global sabitler tan\u0131mlayabilirsiniz.<br \/>\n*   <strong>Hot Module Replacement (HMR)<\/strong>: Zaten <code>webpack-dev-server<\/code> i\u00e7inde etkinle\u015ftirdi\u011fimiz bu \u00f6zellik, uygulaman\u0131n tamam\u0131n\u0131 yenilemeden kod de\u011fi\u015fikliklerinin an\u0131nda taray\u0131c\u0131ya yans\u0131mas\u0131n\u0131 sa\u011flar. React Fast Refresh gibi ara\u00e7larla daha da geli\u015ftirilebilir.<br \/>\n*   <strong>TypeScript Deste\u011fi<\/strong>: E\u011fer TypeScript kullanmak istiyorsan\u0131z, <code>ts-loader<\/code> veya <code>@babel\/preset-typescript<\/code> gibi Babel \u00f6n ayarlar\u0131n\u0131 Webpack yap\u0131land\u0131rman\u0131za eklemeniz gerekir.<br \/>\n*   <strong>Linting (ESLint)<\/strong>: Kod kalitesini ve tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flamak i\u00e7in ESLint gibi ara\u00e7lar\u0131 entegre etmek, b\u00fcy\u00fck projelerde hata ay\u0131klama s\u00fcresini azalt\u0131r ve tak\u0131m \u00e7al\u0131\u015fmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<br \/>\n*   <strong>Resim ve Font Y\u00fckleyiciler<\/strong>: <code>file-loader<\/code>, <code>url-loader<\/code> veya Webpack 5'in yerle\u015fik varl\u0131k mod\u00fclleri ile resimleri, fontlar\u0131 ve di\u011fer medya dosyalar\u0131n\u0131 uygulaman\u0131za dahil edebilirsiniz.<br \/>\n*   <strong>SCSS\/SASS\/Less Deste\u011fi<\/strong>: CSS \u00f6n i\u015flemcileri kullanmak isterseniz, <code>sass-loader<\/code> veya <code>less-loader<\/code> gibi ek loader'lar\u0131 Webpack yap\u0131land\u0131rman\u0131za eklemeniz gerekir.<\/p>\n<p>Bu konulara dalmak, Webpack ve Babel konusundaki uzmanl\u0131\u011f\u0131n\u0131z\u0131 art\u0131racak ve uygulaman\u0131z\u0131n performans\u0131n\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini daha da optimize etmenizi sa\u011flayacakt\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Bu kapsaml\u0131 rehberde, React uygulaman\u0131z\u0131 Webpack 4 ve Babel 7 kullanarak s\u0131f\u0131rdan, manuel olarak nas\u0131l kuraca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011frendiniz. Proje ba\u015flatmaktan, React ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 kurmaya, Webpack'in giri\u015f\/\u00e7\u0131k\u0131\u015f, loader'lar ve plugin'ler gibi temel kavramlar\u0131n\u0131 yap\u0131land\u0131rmaya, Babel ile modern JavaScript ve JSX deste\u011fi sa\u011flamaya ve hatta CSS y\u00f6netimi eklemeye kadar her ad\u0131m\u0131 detayl\u0131 bir \u015fekilde ele ald\u0131k.<\/p>\n<p>Manuel kurulum s\u00fcreci, ba\u015flang\u0131\u00e7ta Create React App gibi ara\u00e7lara g\u00f6re daha fazla \u00e7aba gerektirse de, size projenizin temel ara\u00e7lar\u0131 \u00fczerinde tam kontrol sa\u011flar. Bu kontrol, uygulaman\u0131z\u0131n derleme s\u00fcrecini ince ayarlaman\u0131za, performans\u0131n\u0131 optimize etmenize ve \u00f6zel ihtiya\u00e7lar\u0131n\u0131za g\u00f6re uyarlaman\u0131za olanak tan\u0131r. Ayr\u0131ca, Webpack ve Babel gibi modern web geli\u015ftirmenin temel ta\u015flar\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131na dair derinlemesine bir anlay\u0131\u015f kazanman\u0131z\u0131 sa\u011flar. Bu bilgi, gelecekte kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z karma\u015f\u0131k sorunlar\u0131 \u00e7\u00f6zme ve daha verimli, \u00f6l\u00e7eklenebilir uygulamalar geli\u015ftirme konusunda size b\u00fcy\u00fck avantajlar sa\u011flayacakt\u0131r.<\/p>\n<p>Art\u0131k Webpack ve Babel'in g\u00fcc\u00fcn\u00fc kullanarak kendi React projelerinizi olu\u015fturmak i\u00e7in sa\u011flam bir temele sahipsiniz. Bu rehberde \u00f6\u011frendiklerinizle, daha karma\u015f\u0131k yap\u0131land\u0131rmalar\u0131 ke\u015ffetmeye ve projenizi bir sonraki seviyeye ta\u015f\u0131maya haz\u0131rs\u0131n\u0131z. Unutmay\u0131n, modern web geli\u015ftirme s\u00fcrekli evriliyor ve bu ara\u00e7lar\u0131 derinlemesine anlamak, bu dinamik ortamda ba\u015far\u0131l\u0131 olman\u0131z i\u00e7in kritik \u00f6neme sahip.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi\nGiri\u015f: Neden Manuel Kurulum?\nReact ekosisteminde yeni bir proje ba\u015flatman\u0131n","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":[128],"tags":[],"class_list":{"0":"post-32828","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","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 Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/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:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi\" \/>\n<meta property=\"og:description\" content=\"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi Giri\u015f: Neden Manuel Kurulum? React ekosisteminde yeni bir proje ba\u015flatman\u0131n\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-26T07:41:02+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=\"21 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi\",\"datePublished\":\"2025-10-26T07:41:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/\"},\"wordCount\":3242,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/\",\"name\":\"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-26T07:41:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi\"}]},{\"@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 Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi","og_description":"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi Giri\u015f: Neden Manuel Kurulum? React ekosisteminde yeni bir proje ba\u015flatman\u0131n","og_url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-26T07:41:02+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"21 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi","datePublished":"2025-10-26T07:41:02+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/"},"wordCount":3242,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/","name":"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-26T07:41:02+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-webpack-4-ve-babel-7-ile-manuel-kurulum-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Uygulamas\u0131n\u0131 Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi"}]},{"@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\/32828","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=32828"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32828\/revisions"}],"predecessor-version":[{"id":32829,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32828\/revisions\/32829"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}