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:

app.js:

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:

Projemizin gene kök dizininde aşağıdaki komutu çalıştırarak webpacki kuralım

Kurulum bittikten sonra package.json aşağıdaki gibi olacaktır ve kök dizine node_modules klasörü eklenecektir

yine kök dizine webpack.config.js dosyası ekleyelim ve wwroot içine webpack klasörü ekleyelim

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

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:

webpack.config.js module ayarı:

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

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.

şu anda webpack implemantasyonu tamamdır. artık reactı ekleyebiliriz

react yükleme:

react jsx dosyalarını dönüştürebilmek için webpack.config.js -> presets bölümüne babeli ekleyelim

şimdi app.js ve helloMsg.js dosyalarını reacta çevirelim.

app.js:

hellomsg.js:

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)

You may also like...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

tr_TRTurkish