ASP.NET Core ile ReactJS.NET Kullanımı 1 – İlk Örnek


react1

Selamlar arkadaşlar,

React, facebook tarafından geliştirilen kullanıcı arayüzlerini hızlı bir şekilde oluşturulmasını sağlayan javascript kütüphanedir. Sanal bir DOM (Document Object Model) kullanarak verileri içerisinde gösterebilen component’ler oluşturulabiliyor.

Günümüzde aşağıdaki şirket şimdiden ReactJS’yi kullanıyorlar:

  • Facebook
  • Instagram
  • Khan Academy
  • New York Times
  • Yahoo Email
  • Dropbox
  • Netfilix
  • Sberbank
  • Atlassian
  • Airbnb
  • BBC
  • Ebay

ReactJS kullanan web siteler ve şirketler git üzerinde yayınlanmış durumdadır.

Son olarak react açık kaynak kodlu bir kütüphane ve isterseniz kaynak kodlarına da erişebilirsiniz.

Başlarken

Bu örneği Windows 10 işletim sistemi üzerinde kurulu olan Visual Studio 2015 with Update ile geliştireceğim. .NET Core 1.1 kullanılmaktadır. Ayrıca React’ın ASP.NET Core MVC için geliştirilmiş olan package manager araclığı ile nuget versiyonu olan yine Facebook tarafından sunulan ReactJS.NET kullanacağım.

react2

1) ASP.NET Core MVC Projesi Oluşturulur

.Net Framework 4.6.1’de ASP.NET Core Web Application projesi seçilir ve OK düğmesine tıklanır:

react3

Gelen ekranda Template olarak Empty seçilir:

react4

Açılış ekranı karşımıza çıkar onu kapatabilirsiniz.

2) Reactjs Paketi Projeye Yüklenir

react5

3) React.AspNet Package’i Projeye Eklenir

Öncelikli olarak yukarıda yer alan Browse sekmesine tıklanır. Daha sonra arama yerine React.AspNet yazılar ve aşağıdaki gibi seçimler yapılarak sağ tarafta yer alan Install düğmesine tıklanır.

react6

Install düğmesine tıkladıktan sonra aşağıdaki gibi bir pencere gelir ona da OK diyerek yükleme işlemi gerçekleştirilir:

react7

4) MVC Package’i Projeye Eklenir

NuGet penceresini kapatmadan arama yerine Microsoft.AspNetCore.Mvc yazarak ilgili paket projeye eklenir:

react8

5) Startup.cs Projesinde React ve MVC Ayarları Yapılır

startup.cs içeriğinin son hali aşağıdaki gibi olmalıdır:

react9

6) Projeye Controller İsminde Klasör Eklenir

Projeye sağ tıklayarak açılan pencereden aşağıdaki adımlar izlenerek Controller isminde bir klasör eklenir:

react10

7) Projeye Views İsminde ve Views Altına Home İsminde Klasör Eklenir

Projede son durumdaki klasör yapısı aşağıdaki gibi olmalıdır:

react11

8) Projeye Home İsminde Controller Eklenir

Projeye sağ tıklanarak Add > New Item seçimi yapılır:

react12

Açılan ekrandan MVC Controller Class seçilir ve ismi HomeController.cs olarak belirlenir ve Add düğmesine tıklanır:

react13

9) Projeye Index İsminde View Eklenir

Views klasörü altında yer alan Home klasörüne sağ tıklanır ve Add Item seçimi yapılır:

react14

Daha sonra açılan ekrandan MVC View Page seçimi yapılır, ismi Index.cshtml olarak belirlenir ve Add düğmesine tıklanır:

react15

10) wwwroot Klasörüne Javascript Dosyası Eklenir

Öncelikli olarak wwwroot klasörü altında js isminde bir klasör eklenir. Daha sonra bu klasöre sağ tıklanarak Add > New Item seçimi yapılır:

react16

Açılan ekranda sol menüden Client-side tab’ı seçilir, TypeScript JSX File seçimi yapılarak component.tsx ismi verilir ve Add düğmesine tıklanır:

react17

11) component.jsx Dosyasına Eklemeler Yapılır

var CommentBox = React.createClass({
render: function () {
return (

Merhaba Dünya, Ben bir CommentBox’ım 🙂

);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById(‘content’)
);

react18

React.createClass isimli metot ile birlikte yeni bir component oluşturmuş oluyoruz. Fakat bu metot içerisinde yer alan en önemli bölüm render bölümü. render ile birlikte bu component’in HTML render’inın ne olacağına karar verilmektedir. Burada HTML string’leri generate edilmediği için XSS koruması default olarak bulunmaktadır. render ile birlikte geriye bu örnekte olduğu gibi html döndürmek zorunda değilsiniz, isterseniz oluşturduğunuz önceki component’lerden birisini de döndürebilirsiniz.

12) Index.cshtml İçeriğine Eklemeler Yapılır

Index.cshtml dosyasının içeriği aşağıdaki gibi düzenlenir:

@{
Layout = null;
}
<html>
<head>
<title>Hello React</title>
</head>
<body>

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js
https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
http://@Url.Content(
</body>
</html>

react19

İlk 3 js kütüphanesi react için kullanmamız gereken kütüphaneler, 4.kütüphane ise jsx dosyasını sayfamızda çağırabilmemiz için kullanmamız gereken babel kütüphanesidir. Son olarak geliştirdiğimiz component.jsx sayfamıza yukarıdaki şekilde ekliyoruz.

13) Projenin Çalıştığı Gözlenir

F5 tuşuna tıklayarak veya menüden IIS Express düğmesine tıklayarak proje çalıştırılır:

react20

Son Söz

Çok temel anlamda bir react component’i oluşturduk. Sonraki yazılarda veri alışverişi yapabilen component üzerinde çalışacağız inş.

Kaynaklar

Hayırlı günler

Advertisements

, , , , ,

  1. ASP.NET Core ile ReactJS.NET Kullanımı 2 – Görünümü/Biçimi İyileştirme | Mahmut Can Sozeri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s