Asp.Net Core (5.0) MVC + Webpack + React
Hi, you can should react to new or exists mvc project, In this post, we will examine how react and webpack are implemented.
React
React developed by facebook makes it possible to write javascript in html(jsx). There is a model-based state management that we are familiar with from MVC. it has high performance because they use virtual dom.
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.
Node.js
React içindeki paketleri kolayca yüklememizi sağlayan çalıştırma ortamıdır. Aşağıdaki bağlantıdan lts sürümünü indirebilirsiniz.
Download | Node.js (nodejs.org)
Webpack
Webpack, Npm (Node.js Package Manager) vasıtasıyla yüklediğimiz modülleri sıkıştırarak (bundle) statik bir varlığa dönüştürür.
Geliştirme Yapılan Ortam
- Windows 10
- Asp.Net Core (5.0)
- Visual Studio 2019
Uygulamaya Başlayalım
Projemiz 3 katmanlı DDD (Domain Driven Design) mimarisine uygun şekilde tasarlayacağız. Visual Studio üzerinde bir blank solution açıp içine core, infrastructure ve web katmanları ekleyeceğiz.

Core ve Infastructure katmanlarını .Net Core Libray, Web Katmanını ise Asp.Net 5.0 (Core) ve MVC şeklinde açalım.
import özelliğini kullanarak bir js dosyası yazalım
wwwroot -> js dizinin içine app.js ve hellomsg.js ekleyelim

hellomsg.js:
1 |
export default function message(element, text) { element.innerHTML = text; } |
app.js:
1 2 3 4 |
import message from './hellomsg.js'; let element = document.getElementById('root'); message(element, 'hi okan!'); |
Index.cshtml:

Bu haliyle mesajımızı yazacaktır.
Webpack kurulumu ve ayarları
Mevcut es6 modülleri tarayıcılar tarafından desteklenmiyor, webpack gibi araçlar bu js dosyalarını tarayıcıların anlayacağı şekle getiriyor.
projemizin kök dizinine package.json adında bir dosya ekleyelim bunu eklediğimiz anda visual studio solution items altında bir klasörde gösterecek.

package.json:
1 2 3 4 5 6 7 |
{ "name": "webpack-test", "version": "1.0.0", "scripts": { "build": "webpack" } } |
Projemizin gene kök dizininde aşağıdaki komutu çalıştırarak webpacki kuralım
1 2 |
npm i webpack@4.46.0 npm i webpack-cli |
Kurulum bittikten sonra package.json aşağıdaki gibi olacaktır ve kök dizine node_modules klasörü eklenecektir
1 2 3 4 5 6 7 8 9 10 |
{ "name": "webpack-test", "version": "1.0.0", "scripts": { "build": "webpack" }, "dependencies": { "webpack": "^4.46.0" } } |
yine kök dizine webpack.config.js dosyası ekleyelim ve wwroot içine webpack klasörü ekleyelim
1 2 3 4 5 6 7 8 9 10 11 12 |
const path = require('path'); module.exports = { mode: 'development', entry: { msgApp: './coremvcreact.web/wwwroot/js/app.js' }, output: { path: path.resolve(__dirname, './CoreMvcReact.Web/wwwroot/webpack'), filename: '[name].js' } }; |
entry kısmına dictionary tipinde js dosyamızı tanımladık, output kısmı ise webpackin dönüştürüp son ürün haline getirdiği kısım, bundle’ladığı dosyaları burada belirtilen isimle kaydedecektir.
aşağıdaki komut ile build edip dosyamızı oluşturalım
1 |
npm run build |

Index.cshtml:

webpacki başarıyla kurduk ve ayarlarını yaptık. Şimdi bir react uygulaması yapmadan önce her js dosyası değişikliğinde build yapmamak için bazı ayarlar ekleyeceğiz ve IE ve react için de babeli yükleyeceğiz.
babel:
1 |
npm i babel-loader @babel/core @babel/preset-env -D |
webpack.config.js module ayarı:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
module: { rules: [ { test: /\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } |
yaptığımız değişikliklerle build yaptığımızda artık IE’de kodu anlayacaktır.
Şimdi kod değişikliğinde her seferinde build etmemek ve otomatikleştirmek için bazı ayarlar yapalım.
package.json scripts bölümünü aşağıdaki gibi yapalım
1 2 3 4 |
"scripts": { "build": "webpack", "hotreload": "webpack --watch --mode=development" }, |
npm run build ile değişiklikleri yansıtalım uygulama ayağa kalktıktan sonra aşağıdaki komut ile değişikliklerimiz runtimeda yapabiliriz.
1 |
npm run hotreload |
şu anda webpack implemantasyonu tamamdır. artık reactı ekleyebiliriz
react yükleme:
1 2 |
npm i react react-dom npm i @babel/preset-react -D |
react jsx dosyalarını dönüştürebilmek için webpack.config.js -> presets bölümüne babeli ekleyelim
1 |
presets: ['@babel/preset-react','@babel/preset-env'] |
şimdi app.js ve helloMsg.js dosyalarını reacta çevirelim.
app.js:
1 2 3 4 5 6 7 |
import React from 'react'; import ReactDOM from 'react-dom'; import MessageTest from './hellomsg'; ReactDOM.render( <MessageTest />, document.getElementById('root') ); |
hellomsg.js:
1 2 3 4 5 6 7 8 9 10 11 |
import React, { useState } from 'react'; const MessageTest = () => { const [message, setmessage] = useState("") return ( <div> <h3>Message: {message}</h3> Enter message: <input type="text" value={message} onChange={(e) => setmessage(e.currentTarget.value)} /> </div> ) } export default MessageTest; |
uygulama:

sonuç olarak uygulamamızı başarıyla ekledik, bu implemantasyon sonucu mvc içinde istediğimiz gibi npm paketleri yükleyebilir, react uygulamaları yapabiliriz. projenin github linkine aşağıdan ulaşabilirsiniz. iyi çalışmalar.
proje linki : okankrdg/CoreMvcReact (github.com)