package.json<\/code> dosyas\u0131n\u0131 olu\u015fturacakt\u0131r.<\/p>\nPaketlerin Kurulumu<\/h2>\n
\u015eimdi, projemiz i\u00e7in gerekli paketleri kurabiliriz. Bunlar i\u00e7in a\u015fa\u011f\u0131daki komutu kullan\u0131n:<\/p>\n
npm install --save-dev webpack webpack-cli babel-loader @babel\/core @babel\/preset-env @babel\/preset-react react react-dom<\/code><\/pre>\nBu komut, Webpack, Babel ve React’i projemize ekleyecektir. --save-dev<\/code> arg\u00fcman\u0131, bu paketlerin geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131klar\u0131 oldu\u011funu belirtir.<\/p>\nWebpack Konfig\u00fcrasyonu<\/h2>\n
Sonraki ad\u0131m, Webpack konfig\u00fcrasyon dosyas\u0131n\u0131 olu\u015fturmakt\u0131r. webpack.config.js<\/code> ad\u0131nda bir dosya olu\u015fturun ve a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\nconst path = require('path');\n\nmodule.exports = {\n entry: '.\/src\/index.js',\n output: {\n path: path.resolve(__dirname, 'dist'),\n filename: 'bundle.js'\n },\n module: {\n rules: [\n {\n test: \/\\.js$\/,\n exclude: \/node_modules\/,\n use: {\n loader: 'babel-loader',\n options: {\n presets: ['@babel\/preset-env', '@babel\/preset-react']\n }\n }\n }\n ]\n },\n mode: 'development'\n};\n<\/code><\/pre>\nBu konfig\u00fcrasyon dosyas\u0131, Webpack’e projemizi nas\u0131l derleyece\u011fini s\u00f6yler. entry<\/code> \u00f6zelli\u011fi, projemizin giri\u015f noktas\u0131 olan src\/index.js<\/code> dosyas\u0131n\u0131 belirtir. output<\/code> \u00f6zelli\u011fi ise, derlenmi\u015f dosyalar\u0131n nereye kaydedilece\u011fini belirtir. module.rules<\/code> \u00f6zelli\u011fi ise, Babel’\u0131 kullanarak JavaScript kodunu derlemek i\u00e7in gerekli kurallar\u0131 tan\u0131mlar.<\/p>\nBabel Konfig\u00fcrasyonu (Opsiyonel)<\/h2>\n
Babel’\u0131 daha detayl\u0131 konfig\u00fcre etmek i\u00e7in, .babelrc ad\u0131nda bir dosya olu\u015fturabilirsiniz. Bu dosyaya, Babel’\u0131n hangi presetleri kullanaca\u011f\u0131n\u0131 belirten bir JSON objesi ekleyebilirsiniz. \u00d6rne\u011fin:<\/p>\n
\n{\n \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"]\n}\n<\/code><\/pre>\nBu, .babelrc dosyas\u0131 olmadan da \u00e7al\u0131\u015f\u0131r \u00e7\u00fcnk\u00fc webpack.config.js i\u00e7inde zaten tan\u0131mland\u0131. Ancak daha \u00f6zelle\u015ftirilmi\u015f bir Babel konfig\u00fcrasyonu i\u00e7in bu y\u00f6ntem daha kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
React Bile\u015feni Olu\u015fturma<\/h2>\n
\u015eimdi, ilk React bile\u015fenimizi olu\u015ftural\u0131m. src<\/code> klas\u00f6r\u00fc i\u00e7inde index.js<\/code> ad\u0131nda bir dosya olu\u015fturun ve a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\n\nconst App = () => {\n return Merhaba, React!;\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render();\n<\/code><\/pre>\nBu kod, basit bir “Merhaba, React!” mesaj\u0131 g\u00f6r\u00fcnt\u00fcleyen bir React bile\u015feni tan\u0131mlar. index.html<\/code> dosyas\u0131n\u0131 olu\u015fturarak, root<\/code> id’sine sahip bir div eleman\u0131 eklemelisiniz. <\/p>\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>React Uygulamas\u0131<\/title>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n <script src=\".\/dist\/bundle.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\nUygulamay\u0131 \u00c7al\u0131\u015ft\u0131rma<\/h2>\n
Son olarak, uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n
npm run build \/\/ bundle.js dosyas\u0131n\u0131 olu\u015fturur\n<\/code><\/pre>\nBundan sonra index.html dosyas\u0131n\u0131 a\u00e7arak uygulaman\u0131z\u0131 g\u00f6rebilirsiniz. Bu komut, Webpack’i \u00e7al\u0131\u015ft\u0131racak ve dist<\/code> klas\u00f6r\u00fc i\u00e7inde bundle.js<\/code> dosyas\u0131n\u0131 olu\u015fturacakt\u0131r. Bu dosyay\u0131 index.html<\/code> dosyan\u0131za ekleyerek uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131rabilirsiniz.<\/p>\nBu rehber, React, Webpack ve Babel ile s\u0131f\u0131rdan bir React projesi olu\u015fturman\u0131za yard\u0131mc\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r. Daha fazla bilgi i\u00e7in, React resmi dok\u00fcmanlar\u0131n\u0131<\/a> ve Webpack dok\u00fcmanlar\u0131n\u0131<\/a> inceleyebilirsiniz. Daha detayl\u0131 ve geli\u015fmi\u015f konular i\u00e7in kendi web sitemi<\/a>ni ziyaret edebilirsiniz. Umar\u0131m bu makale faydal\u0131 olmu\u015ftur!<\/p>\n#Etiketler: React, Webpack, Babel, JavaScript, Frontend, Web Geli\u015ftirme, S\u0131f\u0131rdan Proje, Kurulum, Rehber
\n<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"React, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7 Merhaba! Fatih Soysal olarak, bu makalede React, Webpack ve Babel’\u0131 kullanarak…","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-16813","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
React, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7<\/title>\n<meta name=\"description\" content=\"Merhaba! Fatih Soysal olarak, bu makalede React, Webpack ve Babel'\u0131 kullanarak s\u0131f\u0131rdan bir React projesi nas\u0131l kuraca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m anlataca\u011f\u0131m. Bu g\u00fc\u00e7l\u00fc ara\u00e7lar, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in olmazsa olmazlard\u0131r. \u00d6ncelikle, her birinin rol\u00fcn\u00fc k\u0131saca ele alal\u0131m. React, kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak i\u00e7in kulland\u0131\u011f\u0131m\u0131z bir JavaScript k\u00fct\u00fcphanesidir. Webpack, projemizin t\u00fcm dosyalar\u0131n\u0131 tek bir dosyada birle\u015ftiren bir module bundler'd\u0131r. Babel ise, modern JavaScript kodunu eski taray\u0131c\u0131lar taraf\u0131ndan da anla\u015f\u0131labilir hale getiren bir transpiler'd\u0131r.\" \/>\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-webpack-ve-babel-ile-sifirdan-baslangic\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Fatih Soysal olarak, bu makalede React, Webpack ve Babel'\u0131 kullanarak s\u0131f\u0131rdan bir React projesi nas\u0131l kuraca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m anlataca\u011f\u0131m. Bu g\u00fc\u00e7l\u00fc ara\u00e7lar, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in olmazsa olmazlard\u0131r. \u00d6ncelikle, her birinin rol\u00fcn\u00fc k\u0131saca ele alal\u0131m. React, kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak i\u00e7in kulland\u0131\u011f\u0131m\u0131z bir JavaScript k\u00fct\u00fcphanesidir. Webpack, projemizin t\u00fcm dosyalar\u0131n\u0131 tek bir dosyada birle\u015ftiren bir module bundler'd\u0131r. Babel ise, modern JavaScript kodunu eski taray\u0131c\u0131lar taraf\u0131ndan da anla\u015f\u0131labilir hale getiren bir transpiler'd\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-31T20:00:18+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=\"4 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7\",\"datePublished\":\"2025-03-31T20:00:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/\"},\"wordCount\":556,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/\",\"name\":\"React, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-03-31T20:00:18+00:00\",\"description\":\"Merhaba! Fatih Soysal olarak, bu makalede React, Webpack ve Babel'\u0131 kullanarak s\u0131f\u0131rdan bir React projesi nas\u0131l kuraca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m anlataca\u011f\u0131m. Bu g\u00fc\u00e7l\u00fc ara\u00e7lar, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in olmazsa olmazlard\u0131r. \u00d6ncelikle, her birinin rol\u00fcn\u00fc k\u0131saca ele alal\u0131m. React, kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak i\u00e7in kulland\u0131\u011f\u0131m\u0131z bir JavaScript k\u00fct\u00fcphanesidir. Webpack, projemizin t\u00fcm dosyalar\u0131n\u0131 tek bir dosyada birle\u015ftiren bir module bundler'd\u0131r. Babel ise, modern JavaScript kodunu eski taray\u0131c\u0131lar taraf\u0131ndan da anla\u015f\u0131labilir hale getiren bir transpiler'd\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7\"}]},{\"@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, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7","description":"Merhaba! Fatih Soysal olarak, bu makalede React, Webpack ve Babel'\u0131 kullanarak s\u0131f\u0131rdan bir React projesi nas\u0131l kuraca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m anlataca\u011f\u0131m. Bu g\u00fc\u00e7l\u00fc ara\u00e7lar, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in olmazsa olmazlard\u0131r. \u00d6ncelikle, her birinin rol\u00fcn\u00fc k\u0131saca ele alal\u0131m. React, kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak i\u00e7in kulland\u0131\u011f\u0131m\u0131z bir JavaScript k\u00fct\u00fcphanesidir. Webpack, projemizin t\u00fcm dosyalar\u0131n\u0131 tek bir dosyada birle\u015ftiren bir module bundler'd\u0131r. Babel ise, modern JavaScript kodunu eski taray\u0131c\u0131lar taraf\u0131ndan da anla\u015f\u0131labilir hale getiren bir transpiler'd\u0131r.","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-webpack-ve-babel-ile-sifirdan-baslangic\/","og_locale":"tr_TR","og_type":"article","og_title":"React, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7","og_description":"Merhaba! Fatih Soysal olarak, bu makalede React, Webpack ve Babel'\u0131 kullanarak s\u0131f\u0131rdan bir React projesi nas\u0131l kuraca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m anlataca\u011f\u0131m. Bu g\u00fc\u00e7l\u00fc ara\u00e7lar, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in olmazsa olmazlard\u0131r. \u00d6ncelikle, her birinin rol\u00fcn\u00fc k\u0131saca ele alal\u0131m. React, kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak i\u00e7in kulland\u0131\u011f\u0131m\u0131z bir JavaScript k\u00fct\u00fcphanesidir. Webpack, projemizin t\u00fcm dosyalar\u0131n\u0131 tek bir dosyada birle\u015ftiren bir module bundler'd\u0131r. Babel ise, modern JavaScript kodunu eski taray\u0131c\u0131lar taraf\u0131ndan da anla\u015f\u0131labilir hale getiren bir transpiler'd\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-03-31T20:00:18+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"4 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7","datePublished":"2025-03-31T20:00:18+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/"},"wordCount":556,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/","url":"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/","name":"React, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-03-31T20:00:18+00:00","description":"Merhaba! Fatih Soysal olarak, bu makalede React, Webpack ve Babel'\u0131 kullanarak s\u0131f\u0131rdan bir React projesi nas\u0131l kuraca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m anlataca\u011f\u0131m. Bu g\u00fc\u00e7l\u00fc ara\u00e7lar, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in olmazsa olmazlard\u0131r. \u00d6ncelikle, her birinin rol\u00fcn\u00fc k\u0131saca ele alal\u0131m. React, kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak i\u00e7in kulland\u0131\u011f\u0131m\u0131z bir JavaScript k\u00fct\u00fcphanesidir. Webpack, projemizin t\u00fcm dosyalar\u0131n\u0131 tek bir dosyada birle\u015ftiren bir module bundler'd\u0131r. Babel ise, modern JavaScript kodunu eski taray\u0131c\u0131lar taraf\u0131ndan da anla\u015f\u0131labilir hale getiren bir transpiler'd\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-webpack-ve-babel-ile-sifirdan-baslangic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React, Webpack ve Babel ile S\u0131f\u0131rdan Ba\u015flang\u0131\u00e7"}]},{"@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\/16813","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=16813"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/16813\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=16813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=16813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=16813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}