{"id":436,"date":"2021-09-02T14:28:52","date_gmt":"2021-09-02T14:28:52","guid":{"rendered":"https:\/\/okankaradag.com\/?p=436"},"modified":"2021-11-03T07:47:12","modified_gmt":"2021-11-03T07:47:12","slug":"asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak","status":"publish","type":"post","link":"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak","title":{"rendered":"Asp.Net Core (5.0) MVC + Webpack + React"},"content":{"rendered":"<p>Hi, you can should react to new or exists mvc project, In this post, we will examine how react and webpack are implemented.<\/p>\n\n\n\n<h4>React<\/h4>\n\n\n\n<p class=\" translation-block\">React developed by facebook makes it possible to write javascript in html(<strong>jsx<\/strong>).  There is a model-based state management that we are familiar with from MVC. it has high performance because they use virtual dom.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Virtual dom: Copy the dom tree, before making any changes in the real dome changes the virtual object dom. the changes in the Virtual Dom are performed in the most efficient way with the react diff algorithm.<\/p><\/blockquote>\n\n\n\n<h4>Node.js<\/h4>\n\n\n\n<p>React i\u00e7indeki paketleri kolayca y\u00fcklememizi sa\u011flayan \u00e7al\u0131\u015ft\u0131rma ortam\u0131d\u0131r. A\u015fa\u011f\u0131daki ba\u011flant\u0131dan <strong>lts <\/strong>s\u00fcr\u00fcm\u00fcn\u00fc indirebilirsiniz.<br><a rel=\"noreferrer noopener\" href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\">Download | Node.js (nodejs.org)<\/a><\/p>\n\n\n\n<h4>Webpack<\/h4>\n\n\n\n<p>Webpack, Npm (Node.js Package Manager) vas\u0131tas\u0131yla y\u00fckledi\u011fimiz mod\u00fclleri s\u0131k\u0131\u015ft\u0131rarak (bundle) statik bir varl\u0131\u011fa d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.   <\/p>\n\n\n\n<h4>Geli\u015ftirme Yap\u0131lan Ortam<\/h4>\n\n\n\n<ul><li>Windows 10<\/li><li>Asp.Net Core (5.0)<\/li><li>Visual Studio 2019<\/li><\/ul>\n\n\n\n<h4>Uygulamaya Ba\u015flayal\u0131m<\/h4>\n\n\n\n<p>Projemiz 3 katmanl\u0131 DDD (Domain Driven Design) mimarisine uygun \u015fekilde tasarlayaca\u011f\u0131z. Visual Studio \u00fczerinde bir blank solution a\u00e7\u0131p i\u00e7ine core, infrastructure ve web katmanlar\u0131 ekleyece\u011fiz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"659\" height=\"152\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/08\/Web-Artichture-1.png\" alt=\"\" class=\"wp-image-444\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/08\/Web-Artichture-1.png 659w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/08\/Web-Artichture-1-300x69.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/08\/Web-Artichture-1-16x4.png 16w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><\/figure>\n\n\n\n<p>Core ve Infastructure katmanlar\u0131n\u0131 .Net Core Libray, Web Katman\u0131n\u0131 ise Asp.Net 5.0 (Core) ve MVC \u015feklinde a\u00e7al\u0131m.<\/p>\n\n\n\n<p><strong>import \u00f6zelli\u011fini kullanarak bir js dosyas\u0131 yazal\u0131m<\/strong><\/p>\n\n\n\n<p>wwwroot -&gt; js dizinin i\u00e7ine app.js ve hellomsg.js ekleyelim<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"415\" height=\"167\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/js-index.png\" alt=\"\" class=\"wp-image-446\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/js-index.png 415w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/js-index-300x121.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/js-index-16x6.png 16w\" sizes=\"(max-width: 415px) 100vw, 415px\" \/><\/figure>\n\n\n\n<p><strong>hellomsg.js:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:js decode:true\">export default function message(element, text) { element.innerHTML = text; }<\/pre><\/div>\n\n\n\n<p><strong>app.js:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:js decode:true\">import message from '.\/hellomsg.js';\n\nlet element = document.getElementById('root');\nmessage(element, 'hi okan!');<\/pre><\/div>\n\n\n\n<p><strong>Index.cshtml:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"552\" height=\"180\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/html-page.png\" alt=\"\" class=\"wp-image-447\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/html-page.png 552w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/html-page-300x98.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/html-page-16x5.png 16w\" sizes=\"(max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<p>Bu haliyle mesaj\u0131m\u0131z\u0131 yazacakt\u0131r.<\/p>\n\n\n\n<h4>Webpack kurulumu ve ayarlar\u0131<\/h4>\n\n\n\n<p>Mevcut es6 mod\u00fclleri taray\u0131c\u0131lar taraf\u0131ndan desteklenmiyor, webpack gibi ara\u00e7lar bu js dosyalar\u0131n\u0131 taray\u0131c\u0131lar\u0131n anlayaca\u011f\u0131 \u015fekle getiriyor.<\/p>\n\n\n\n<p>projemizin k\u00f6k dizinine package.json ad\u0131nda bir dosya ekleyelim bunu ekledi\u011fimiz anda visual studio solution items alt\u0131nda bir klas\u00f6rde g\u00f6sterecek.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"453\" height=\"197\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/package-json.png\" alt=\"\" class=\"wp-image-450\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/package-json.png 453w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/package-json-300x130.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/package-json-16x7.png 16w\" sizes=\"(max-width: 453px) 100vw, 453px\" \/><\/figure>\n\n\n\n<p><strong>package.json:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:js decode:true\">{\n\"name\": \"webpack-test\",\n\"version\": \"1.0.0\",\n\"scripts\": {\n  \"build\": \"webpack\"\n  }\n}<\/pre><\/div>\n\n\n\n<p>Projemizin gene k\u00f6k dizininde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak webpacki kural\u0131m<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:sh decode:true\">npm i webpack@4.46.0\nnpm i webpack-cli<\/pre><\/div>\n\n\n\n<p>Kurulum bittikten sonra <strong>package.json<\/strong> a\u015fa\u011f\u0131daki gibi olacakt\u0131r ve k\u00f6k dizine <strong>node_modules<\/strong> klas\u00f6r\u00fc eklenecektir<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:js decode:true\">{\n  \"name\": \"webpack-test\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build\": \"webpack\"\n  },\n  \"dependencies\": {\n    \"webpack\": \"^4.46.0\"\n  }\n}\n<\/pre><\/div>\n\n\n\n<p>yine k\u00f6k dizine <strong>webpack.config.js<\/strong> dosyas\u0131 ekleyelim ve wwroot i\u00e7ine webpack klas\u00f6r\u00fc ekleyelim<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:js decode:true\">const path = require('path');\nmodule.exports = {\n    mode: 'development',\n    entry:\n    {\n        msgApp: '.\/coremvcreact.web\/wwwroot\/js\/app.js'\n    },\n    output: {\n        path: path.resolve(__dirname, '.\/CoreMvcReact.Web\/wwwroot\/webpack'),\n        filename: '[name].js'\n    }\n};<\/pre><\/div>\n\n\n\n<p>entry k\u0131sm\u0131na dictionary tipinde js dosyam\u0131z\u0131 tan\u0131mlad\u0131k, output k\u0131sm\u0131 ise webpackin d\u00f6n\u00fc\u015ft\u00fcr\u00fcp son \u00fcr\u00fcn haline getirdi\u011fi k\u0131s\u0131m, bundle&#8217;lad\u0131\u011f\u0131 dosyalar\u0131 burada belirtilen isimle kaydedecektir.<\/p>\n\n\n\n<p><strong>a\u015fa\u011f\u0131daki komut ile build edip dosyam\u0131z\u0131 olu\u015ftural\u0131m<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">npm run build<\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"450\" height=\"171\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/webpack-index.png\" alt=\"\" class=\"wp-image-452\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/webpack-index.png 450w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/webpack-index-300x114.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/webpack-index-16x6.png 16w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/figure>\n\n\n\n<p><strong>Index.cshtml<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"526\" height=\"227\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/webpack-html-page.png\" alt=\"\" class=\"wp-image-454\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/webpack-html-page.png 526w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/webpack-html-page-300x129.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/webpack-html-page-16x7.png 16w\" sizes=\"(max-width: 526px) 100vw, 526px\" \/><\/figure>\n\n\n\n<p>webpacki ba\u015far\u0131yla kurduk ve ayarlar\u0131n\u0131 yapt\u0131k. \u015eimdi bir react uygulamas\u0131 yapmadan \u00f6nce her js dosyas\u0131 de\u011fi\u015fikli\u011finde build yapmamak i\u00e7in baz\u0131 ayarlar ekleyece\u011fiz ve IE ve react i\u00e7in de babeli y\u00fckleyece\u011fiz. <\/p>\n\n\n\n<p><strong>babel:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:sh decode:true\">npm i babel-loader @babel\/core @babel\/preset-env -D<\/pre><\/div>\n\n\n\n<p><strong>webpack.config.js module ayar\u0131:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:js decode:true\">module: {\n      rules: [\n      {\n         test: \/\\.js$\/,\n         exclude: \/(node_modules)\/,\n         use: {\n            loader: 'babel-loader',\n            options: {\n               presets: ['@babel\/preset-env']\n            }\n         }\n      }\n      ]\n   }<\/pre><\/div>\n\n\n\n<p>yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fikliklerle build yapt\u0131\u011f\u0131m\u0131zda art\u0131k IE&#8217;de kodu anlayacakt\u0131r.<\/p>\n\n\n\n<p>\u015eimdi kod de\u011fi\u015fikli\u011finde her seferinde build etmemek ve otomatikle\u015ftirmek i\u00e7in baz\u0131 ayarlar yapal\u0131m.<\/p>\n\n\n\n<p><strong>package.json scripts b\u00f6l\u00fcm\u00fcn\u00fc a\u015fa\u011f\u0131daki gibi yapal\u0131m<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:1 lang:js decode:true\">  \"scripts\": {\n    \"build\": \"webpack\",\n    \"hotreload\": \"webpack --watch --mode=development\"\n  },<\/pre><\/div>\n\n\n\n<p><strong>npm run build<\/strong> ile de\u011fi\u015fiklikleri yans\u0131tal\u0131m uygulama aya\u011fa kalkt\u0131ktan sonra a\u015fa\u011f\u0131daki komut ile de\u011fi\u015fikliklerimiz <strong>runtime<\/strong>da yapabiliriz.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:sh decode:true\">npm run hotreload<\/pre><\/div>\n\n\n\n<p>\u015fu anda webpack implemantasyonu tamamd\u0131r. art\u0131k <strong>react<\/strong>\u0131 ekleyebiliriz<\/p>\n\n\n\n<p><strong>react y\u00fckleme:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true\">npm i react react-dom\nnpm i @babel\/preset-react -D<\/pre><\/div>\n\n\n\n<p><strong>react jsx<\/strong> dosyalar\u0131n\u0131 d\u00f6n\u00fc\u015ft\u00fcrebilmek i\u00e7in webpack.config.js -&gt; <strong>presets <\/strong>b\u00f6l\u00fcm\u00fcne <strong>babeli <\/strong>ekleyelim<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:js decode:true\">presets: ['@babel\/preset-react','@babel\/preset-env']<\/pre><\/div>\n\n\n\n<p>\u015fimdi app.js ve helloMsg.js dosyalar\u0131n\u0131 reacta \u00e7evirelim.<\/p>\n\n\n\n<p><strong>app.js:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:default decode:true\">import React from 'react';\nimport ReactDOM from 'react-dom';\nimport MessageTest from '.\/hellomsg';\nReactDOM.render(\n    &lt;MessageTest \/&gt;,\n    document.getElementById('root')\n);<\/pre><\/div>\n\n\n\n<p><strong>hellomsg.js:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:js decode:true\">import React, { useState } from 'react';\nconst MessageTest = () =&gt; {\n    const [message, setmessage] = useState(&quot;&quot;)\n    return (\n        &lt;div&gt;\n            &lt;h3&gt;Message: {message}&lt;\/h3&gt;\n      Enter message: &lt;input type=&quot;text&quot; value=&quot;{message}&quot; onchange=&quot;{(e)&quot; &gt; setmessage(e.currentTarget.value)} \/&gt;\n        &lt;\/div&gt;\n    )\n}\nexport default MessageTest;<\/pre><\/div>\n\n\n\n<p><strong>uygulama:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"236\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/react-webpack-app-1024x236.png\" alt=\"\" class=\"wp-image-459\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/react-webpack-app-1024x236.png 1024w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/react-webpack-app-300x69.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/react-webpack-app-768x177.png 768w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/react-webpack-app-16x4.png 16w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/react-webpack-app.png 1058w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>sonu\u00e7 olarak uygulamam\u0131z\u0131 ba\u015far\u0131yla ekledik, bu implemantasyon sonucu mvc i\u00e7inde istedi\u011fimiz gibi npm paketleri y\u00fckleyebilir, react uygulamalar\u0131 yapabiliriz. projenin <strong>github <\/strong>linkine a\u015fa\u011f\u0131dan ula\u015fabilirsiniz. iyi \u00e7al\u0131\u015fmalar.<\/p>\n\n\n\n<p> proje linki : <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/okankrdg\/CoreMvcReact\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/github.com\/okankrdg\/CoreMvcReact\">okankrdg\/CoreMvcReact (github.com)<\/a> <\/p>","protected":false},"excerpt":{"rendered":"<p>asp.net core 5.0 mvc projesinde react ve webpackin nas\u0131l eklenip, kullan\u0131labilece\u011fini, bir proje \u00fczerinde inceleyece\u011fiz.<\/p>","protected":false},"author":1,"featured_media":465,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[65,75],"tags":[66,56,78,77,76],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak - Okan Karada\u011f<\/title>\n<meta name=\"description\" content=\"asp.net core 5.0 mvc projesinde react ve webpackin nas\u0131l eklenip, kullan\u0131labilece\u011fini, bir proje \u00fczerinde inceleyece\u011fiz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak - Okan Karada\u011f\" \/>\n<meta property=\"og:description\" content=\"asp.net core 5.0 mvc projesinde react ve webpackin nas\u0131l eklenip, kullan\u0131labilece\u011fini, bir proje \u00fczerinde inceleyece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak\" \/>\n<meta property=\"og:site_name\" content=\"Okan Karada\u011f\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-02T14:28:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-03T07:47:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/dotnet-core-react-800.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"840\" \/>\n\t<meta property=\"og:image:height\" content=\"441\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Okan Karada\u011f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Okan Karada\u011f\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak#article\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak\"},\"author\":{\"name\":\"Okan Karada\u011f\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"headline\":\"Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak\",\"datePublished\":\"2021-09-02T14:28:52+00:00\",\"dateModified\":\"2021-11-03T07:47:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak\"},\"wordCount\":688,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"keywords\":[\"asp.net 5\",\"asp.net core\",\"babel\",\"reactjs\",\"webpack\"],\"articleSection\":[\"Asp.Net Core 5.0\",\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak\",\"url\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak\",\"name\":\"Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak - Okan Karada\u011f\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/#website\"},\"datePublished\":\"2021-09-02T14:28:52+00:00\",\"dateModified\":\"2021-11-03T07:47:12+00:00\",\"description\":\"asp.net core 5.0 mvc projesinde react ve webpackin nas\u0131l eklenip, kullan\u0131labilece\u011fini, bir proje \u00fczerinde inceleyece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/okankaradag.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/okankaradag.com\/#website\",\"url\":\"https:\/\/okankaradag.com\/\",\"name\":\"Okan Karada\u011f\",\"description\":\"Programlama \u00dczerine\",\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/okankaradag.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\",\"name\":\"Okan Karada\u011f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g\",\"caption\":\"Okan Karada\u011f\"},\"logo\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/okankaradag.com\"],\"url\":\"https:\/\/okankaradag.com\/en\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak - Okan Karada\u011f","description":"asp.net core 5.0 mvc projesinde react ve webpackin nas\u0131l eklenip, kullan\u0131labilece\u011fini, bir proje \u00fczerinde inceleyece\u011fiz.","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:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak","og_locale":"en_US","og_type":"article","og_title":"Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak - Okan Karada\u011f","og_description":"asp.net core 5.0 mvc projesinde react ve webpackin nas\u0131l eklenip, kullan\u0131labilece\u011fini, bir proje \u00fczerinde inceleyece\u011fiz.","og_url":"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak","og_site_name":"Okan Karada\u011f","article_published_time":"2021-09-02T14:28:52+00:00","article_modified_time":"2021-11-03T07:47:12+00:00","og_image":[{"width":840,"height":441,"url":"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/dotnet-core-react-800.jpg","type":"image\/jpeg"}],"author":"Okan Karada\u011f","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Okan Karada\u011f","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak#article","isPartOf":{"@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak"},"author":{"name":"Okan Karada\u011f","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"headline":"Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak","datePublished":"2021-09-02T14:28:52+00:00","dateModified":"2021-11-03T07:47:12+00:00","mainEntityOfPage":{"@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak"},"wordCount":688,"commentCount":0,"publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"keywords":["asp.net 5","asp.net core","babel","reactjs","webpack"],"articleSection":["Asp.Net Core 5.0","React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak#respond"]}]},{"@type":"WebPage","@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak","url":"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak","name":"Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak - Okan Karada\u011f","isPartOf":{"@id":"https:\/\/okankaradag.com\/#website"},"datePublished":"2021-09-02T14:28:52+00:00","dateModified":"2021-11-03T07:47:12+00:00","description":"asp.net core 5.0 mvc projesinde react ve webpackin nas\u0131l eklenip, kullan\u0131labilece\u011fini, bir proje \u00fczerinde inceleyece\u011fiz.","breadcrumb":{"@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/okankaradag.com\/"},{"@type":"ListItem","position":2,"name":"Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak"}]},{"@type":"WebSite","@id":"https:\/\/okankaradag.com\/#website","url":"https:\/\/okankaradag.com\/","name":"Okan Karada\u011f","description":"Programlama \u00dczerine","publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/okankaradag.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52","name":"Okan Karada\u011f","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g","caption":"Okan Karada\u011f"},"logo":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/okankaradag.com"],"url":"https:\/\/okankaradag.com\/en\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/436"}],"collection":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/comments?post=436"}],"version-history":[{"count":20,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/436\/revisions"}],"predecessor-version":[{"id":536,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/436\/revisions\/536"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media\/465"}],"wp:attachment":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media?parent=436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/categories?post=436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/tags?post=436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}