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:
- 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.
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:
Gelen ekranda Template olarak Empty seçilir:
Açılış ekranı karşımıza çıkar onu kapatabilirsiniz.
2) Reactjs Paketi Projeye Yüklenir
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.
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:
4) MVC Package’i Projeye Eklenir
NuGet penceresini kapatmadan arama yerine Microsoft.AspNetCore.Mvc yazarak ilgili paket projeye eklenir:
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:
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:
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:
8) Projeye Home İsminde Controller Eklenir
Projeye sağ tıklanarak Add > New Item seçimi yapılır:
Açılan ekrandan MVC Controller Class seçilir ve ismi HomeController.cs olarak belirlenir ve Add düğmesine tıklanır:
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:
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:
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:
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:
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’)
);
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>
İ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:
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
- https://reactjs.net/getting-started/aspnetcore.html
- https://reactjs.net/getting-started/tutorial.html
- https://facebook.github.io/react/
Hayırlı günler
Mahmut Can Sozeri 
#1 by Fehmi Aksakal on October 4, 2018 - 9:52 pm
https://www.udemy.com/react-redux-egitimi/learn/v4/questions/5300718 Hocam böyle bir kurs aldım fakat asp.net mvc ile kullanmam gerekiyor reactı sizce kurs içeriği işime yarar mı lütfen yardımcı olur musunuz ?
#2 by Mahmut Can Sozeri on October 9, 2018 - 7:16 am
Merhaba Fehmi Bey, ilgili eğitimi veren hocaya sormanız daha uygun olur. ASP.NET MVC tarafında kullnacağız client bazlı script teknolojilerinin kullanılmasında bir mahsur yoktur.