2- ReactJS Eğitimi – İlk Ekranımızı Oluşturalım. Liste Oluşturma, Props ve Stillendirme (Sass)

Bu yazı temel olarak Javascript, HTML ve CSS bilginizin olduğu varsayılarak hazırlanmıştır.

Eğitim Künyesi

  • Ekranda liste oluşturma
  • Props
  • Stillendirme işlemi (Sass)

Bir önceki yazımızda React dünyasının temel konseptlerinden bahsetmiştik.

Şimdi de ilk ekranımızı oluşturup içerisinde basit bir listemele işlemi yapacağız. Ekran yapımı ile birlikte React dünyasının en temel bileşenlerinden biri olan props hakkında da konuşacağız. Yazımızın son başlığı ise sass css ile ekranımızda ufak tefek stillendirmeler yapacağız.

Başlıyoruz…

İlk olarak, Javascipt paketlerinin yönetilmesini ve geliştirme çıktılarını görüntüleyebilmek için local bir server ayağa kaldırılmasını sağlayan Node.js‘in bilgisayarımızda kurulu olması gerekiyor. Kodlama editörü olarak ise benim tercihim Visual Studio Code olacaktır.

Aşağıdaki komut ile React proje şablonumuzu oluşturuyoruz.

npx create-react-app first-screen

Bu komut ile birlikte community tarafından oluşturulmuş hazır proje yapısına edinmiş oluyoruz. Bu sitede detaylı bir şekilde inceleyebilirsiniz

Komut çalıştırma işlemi başarılı bir şekilde gerçekleşti ise komutu çalıştırdığınız dizinde “first-screen” isimli bir klasör ve bu klasörün içerisinde aşağıdaki ekran görüntüsündeki gibi dosyaların oluşması gerekiyor. Ben bu dizini çalışma dizini olarak VS Code ile açıp artık tüm işlemlerime VS Code ile devam edeceğim.

npm start

Komutu ile projemizi development ortamında ayağa kaldırıyoruz. Başarılı bir şekilde çalıştığında otomatik olarak browserda localhost:3000 adresinde default ekranı göstermesi gerekiyor.

Temiz bir başlangıç için src dizini altındaki App.js dosyasının içerisinde yer alan şablondan kalma öğeleri temizliyoruz.

App.js içerisinde yaptığımız değişikliklerden sonra ekran çıktımız alt alta olacak şekilde First Screen / Hello World olarak güncellenecektir.

Yaptığımız bu basit bir temizlikle bile ufaktan ilk ekranımızı şekillendirmiş olduk. Proje yapısına göre React uygulamamız ilk olarak index.js ile ayağa kalkıp içerisinde App.js’i arıyor. Biz bundan sonraki tüm değişikliklerimize App.js içerisinde dallandırarak devem edeceğiz.

Veriyi Oluşturalım

İlk ekranımızda bir liste göstereceğimizden bahsetmiştik. Bu listenin öğeleri kişiler olsun. Aşağıdaki şekile veri setimizi JSON veri tipi ile oluşturalım ve import işlemleri sonrası satırlara yerleştirelim.

const users = [
  {name: "Mehmet", surname: "Yılmaz", city: "Istanbul", title: "Lead Software Developer"},
  {name: "Emral", surname: "Yılmaz", city: "Istanbul", title: "Jr Flutter Developer"},
  {name: "Semih", surname: "Yavuz", city: "Istanbul", title: "Sr. Backend Developer"},
  {name: "Yunus", surname: "Alğan", city: "Istanbul", title: "Fullstack Developer"},
  {name: "Erol", surname: "Ülgü", city: "Istanbul", title: "Analyst"},
];

Daha sonra aside tagi içerisinde.aşağıdaki gibi map fonksiyonu vasıtasıyla ekrana isim ve soy isim bilgilerini yazdıralım.

<aside>
  <ul>
     {users.map(i => <li>{i.name} {i.surname}</li>)}
  </ul>
</aside>

App.js’in son görüntüsünü ağağıdaki gibi olacaktır.

Adım Adım App.js’i İnceleyelim

App.js klasik bir fonksiyonel component yapısı içerir. Eğer ekranda bir görüntü oluşturacaksak (component) yani virtual dom renderi işlemi olacaksa bir başka değiş ile yazdığımız Javascript kodunun içerisinde view katmanı olacak ise import React deyimini zorunlu olacaktır.

const users ile başlayan satırı beraber oluşturmuştuk zaten. Klasik bir json dizisi.

function App ile başlayan satır bildiğimiz Javascript dilinde fonksiyon oluşturma işlemi. App isimli bir fonksiyon tanımlamış oluyoruz. Asıl dananın kuyruğu fonksiyonun döndüğü değerlerde kopuyor. return ile birlikte çok da alışık olmadığımız bir değer kümesi ile karşılaşıyoruz. Web dünyasından içindeki değerleri tanıyoruz aslında ama alışık olmadığımız kısmı fonksiyonun bu HTML taglerini dönüş şekli.

Buradaki tagleri React için anlamlı halen getiren sihirbazın adı babel. Bu paradigma içerisinde Javascript içerisine HTML yazma işine JSX deniyor. Bu aşamada JSX konusuna detaylı girmeyeceğiz. Konusu geldikçe kurallarına değineceğiz.

users.map ile return içerisinde başlayan satırda aslında biz elimizdeki users JSON dizisini component dizisine çevirmiş oluyoruz. Böylece elimizde beş adet li nesnesi oluşmuş oluyor.

Daha detaylı açıklayacak olursak, Javascscript dünyasında .map fonksiyonu diziler üzerinde işlem yapmak için kullanırız. Örneğin elimizde dört adet öğe barındıran bir dizi olsun. Bu öğelerin içerisinde integer tipinde bazı sayılar yer alsın. Ben bu sayıların her birine +1 değer eklemek istediğimde .map fonksiyonu ile bu işlemi aşağıdaki örnekteki gibi gerçekleştirebilirim.

const numbers = [1,4,6,7];
const newNumbers = numbers.map(i => i + 1);
// output 2,5,7,8

users dizisinde map fonksiyonu kullanarak aslında transformasyon işlemi yapmış oluyoruz. Yapılan transformasyon işlemi ile birlikte elimde artık JSON objesi yerine beş adet React componenti oluşturmuş oluyorum. Oluşan componentleri de JSX içerisinde {} (Süslü parantez) içerisinde kullanabiliyorum.

export default App satırı ile de App.js dosyasından tek bir modüle export edileceğini ve bu modülün herhangi bir Javascript dosyasında import edilerek kullanılabileceğini ifade eder. Örneğimizde App modülü component olarak index.js içerisinde import edilerek kullanılıyor

index.js içerisinde ise ise bir önceki yazımızda da bahsettiğimiz gibi root tagi içerisinde virtual dom render işlemi gerçekleşir.

Bir kaç düzenleme yapalım…

Şimdi App.js içerisinde yer alan header kısmını App fonksiyonundan ayırıp ayrı bir fonksiyon componenti haline getirelim

const Header = () => {
  return (
    <header className="App-header">
        First Screen - Users
    </header>
  )
}

Sonrada bunu App componenti içerisinde kullanalım

function App() {
  return (
    <div className="App">
      <Header />
      <aside>
        <ul>
            {users.map(i => <li>{i.name} {i.surname}</li>)}
        </ul>
      </aside>
    </div>
  );
}

App.js dosyasının son hali aşağıdaki gibi olacaktır.

Header componenti biraz daha dinamik bir hale getirelim. İçerisinde yazan metni dışarıdan parametre alacak şekilde düzenleyelim.

const Header = (props) => {
  return (
    <header className="App-header">
        {props.title}
    </header>
  )
}

App fonksiyon componenti içeriside ise aşağıdaki şekilde title özelliği içerisine metin vererek Header componenti içerisine dışarıdan gönderdiğimiz metni yerleştirmiş olduk.

<Header title="First Screen Application - Users" />

Bu sayede hem büyük parçayı küçük parçalara bölerek okunurluğu artırdık hem de birde fazla yerde kullanılabilir şekilde props kullanarak dinamik hale getirdik. Artık dilersem Header componentine ihtiyaç duyduğum her ekranda içerisine dinamik bir şekilde title metni göndererek kullanabilirim.

Prop ile ilgili bu yazıda çok da detaya girmeyeceğiz. Yine ihtiyaç duydukça kullandığımız yerlerde kurallarından bahsedeceğiz. Ancak kısaca bahsetmek gerekirse props bir React componentine dışarıdan veri göndermemizi sağlar diyebiliriz.

App.js içerisinde son görünüm aşağıdaki gibi olacaktır

Component oluşturma, oluşturulan componentin başka bir componentin içerisinde kullanımı ve componente props vasıtasıyla veri gönderme işlemleri umarım anlaşılmıştır. Aklınıza takılan konuları yorum kısmında sorabilirsiniz.

Ekranı Stillendirme

Web dünyasına aşına iseniz CSS’in ne olduğunu az çok biliyorsunuz. Ziyaret ettiğimiz tüm web sayfalar CSS sayesinde şekillendiriliyor. Biz bu örneğimizde günün sonunda CSS çıktısı üreten Sass ile birlikte stillendirme işlemlerimizi yapıyor olacağız. Sass kullanmamızın bir çok sebebi var ancak öne çıkan sebepleri şöyle sıralandırayım.

  • Kod kalabalığını azaltma
  • Değişken tanımlama
  • Fonksiyon tanımlama

Sass ile stillendirme işlemine başlamadan önce projemize Sass yetkinliğini kazandırmamız gerekiyor. Bunun için aşağıdaki komutu çalıştırmak yeterli

npm install node-sass --save

Paket kurulumu tamamlandıktan sonra src dizini altında app.scss isimli bir dosya oluşturalım.

Sonrasında bu dosyası aşağıdaki şekilde App.js dosyası içerisinde import edelim.

Bu işlem sonrasında aşağıdaki gibi bir hata ile karşılaşırsanız development serverı kapatıp tekrar açmak gerekecek.

Bunun için de npm start komutu hangi komut penceresinde çalıştırdıysanız CTRL + C (Mac için kntrl + C) tuş kombinasyonu ile serverı durdurup npm start ile tekrar çalıştırmak gerekebilir.

Artık stillendirme işlemine hazırız.

app.scss dosyası içerisinde aşağıdaki kod vasıtasıyla ilk önce header kısmını şekillendirelim.

$header-bg-color: #432D22;
$header-border-color: #BE4C16;
$header-txt-color: white;

header{
    padding: 10px;
    color: $header-txt-color;
    background-color: $header-bg-color;
    border-bottom: solid 2px $header-border-color;
    text-align: center;
    font-weight: bold;
}

Ekran çıktımız şu şekilde olacaktır.

Sonrasında biraz da liste elemanları düzenleyelim

ul{
    list-style: circle;
    border: dashed 1px $header-border-color;
    padding: 10px;

    li{margin-bottom: 5px; color: $header-bg-color;}
}

Stillendirme işlemi ile birlikte bu eğitimin sonuna gelmiş bulunuyoruz.

Bu eğitim ile birlikte geliştirdiğimiz kodlara bu linkten ulaşabilir ya da isterseniz aşağıdaki codesandbox embedi içerisinde çalıştırabilirsiniz.

Görüşmek üzere 🙂

Bir sonraki konuya ulaşmak için tıklayın

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.