Asp.Net Core (5.0) MVC projesinde Webpack ve React Kullanmak
Merhaba, yeni yada varolan mvc projenize ihtiyaçlarınız doğrultusunda react kullanmanız gerekebilir, mvc ekosisteminde react kullanmak biraz uğraştırıcı olsa da bir kere uyarladıktan sonra geliştirmelerimizde elimizde birden fazla teknoloji kullanma imkanı olacaktır. Önce kısa olarak react, webpack ve .net mvc’den bahsedelim.
React
React, facebook tarafından geliştirilen, html içinde javascript yazma (jsx) imkanı sağlayan bir kütüphanedir. Mvc geliştircilerinin aşina olduğu model tabanlı bir state management (durum-veri-model yönetimi) hakimdir. Virtual dom (Sanal dom) kullandığı için performansı yüksektir.
Virtual Dom: Dom ağacını kopyalar, bir javascript nesnesi şeklinde tutar, değişiklikleri direkt doma yansıtmaz önce sanal domda değişiklik yapar. Yapılan değişiklikleri en performanslı şekilde doma yansıtmasını ise react’ın bir diff algoritması yapar.
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)
