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


Hayırlı çalışmalar arkadaşlar,

Bir önceki yazıda temel olarak bir react component oluşturup, bir veri kümesi de atayarak ekranda gösterilmesini sağlamıştık. Bu yazı da ise görsel olarak iyileştirme yapacağız.

*Bu örnekte önceki örnekten kaldığı yerden devam edecek niteliktedir. Bu yüzden önceki örneği tamamlamış olmanız gerekmektedir.

1) component.jsx Dosyası Açılır

React içerisinde eğer örneğin div’in id’sine bir değer atamak istiyorsanız tırnaklar içerisinde yazamazsınız bunun yerine iki süslü parantez içerisinde yazabilirsiniz örnek vermek gerekiyorse;

<div id=”{{comment.id}}”>

React.createClass bütününe bakacak olursak;

react css style uygulama

2) Span’a Style’a Değer Atama

style ataması yine aynı şekilde iki adet süslü parantez içerisinde yazılması gerekiyor. Diğer yandan anahtar kelimeye karşılık gelecek değer eğer int bir değer değil ise tırnak içerisinde yazılmalı. Örneğin; normalde html’de veya css içerisinde padding:5px demeniz yeterlidir ama react’ta şu şekilde olmalıdır:

<span style={{padding:’5px’}}>{comment.author}</span>

Ayrıca css ve html inline olarak yazıldığında font-size, margin-left gibi iki kelimeden oluşan ve arasında – ifadesi olan stil türleri react ile kullanılmaz. Bunun yerine jQuery’den aşina olduğumuz iki kelimeden oluşan stil türleri için ikinci kelimenin ilk harfi büyük olacak şekilde birleştirilir:

<span style={{fontSize : ’15pt’}}>{comment.author}</span>

Eğer birden fazla stil kullanılmak isteniyorsa aralara noktalı virgül değil, normal virgül konulması gerekmektedir:

<span style={{display:’inline-block’,width:’200px’, padding:’5px’, fontSize: ’15pt’}}>{comment.author}</span>

Son durumda kod içeriği şu şekilde düzenleyelim:

react2

3) 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:

react3

Son Söz

Bir sonraki yazıda component’e dışarıdan data atayarak ekranda render edilmesini sağlayacağız inş.

Hayırlı çalışmalar

Advertisements

, , , , , , ,

  1. Leave a comment

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