Tradesoft Blog

React Nedir ? Web Uygulaması Nasıl Geliştirilir ?

Finans

Yazar – Aydın Çelikten
Tradesoft Yazılım Geliştirme Direktörü

 

React Nedir ? React Nasıl Öğrenlir ? Bu yazımızda sizlere popüler web önyüzü teknolojilerinden React’ i tanıtacağım. Beş (5) senelik bir geçmişe sahip olan React halen en güncel ve en çok talep gören önyüz kütüphaneleri arasında. Son yıllarda masaüstü uygulamalar azınlıkta kalırken, web ve mobil tabanlı uygulamalar giderek daha öne çıkmaktalar. Mobil uygulamaların popülerliği artsa da, web uygulamaları mobile’den daha esnek ve az maliyetli geliştirme ortamları sağlamaktalar.  Kurulum ve kullanım kolaylığı ve platform bağımsız çalışabilmeleri gibi nedenlerle web uygulamaları bir süre daha önemlerini koruyacaktır.

 

Yazım bilhassa React ile tanışmamış yazılımcılar için faydalı olacaktır.  React hakkında genel bilgiler ve kurulumundan bahsettikten sonra Sudoku çözen bir web sayfası yaparak React ile ilk uygulamamızı geliştirmiş olacağız.

 

React, Facebook yazılım ekibinin 2011 yılında kendi kullanımı için geliştirdiği bir kütüphanedir. Facebook’un Instagram’ı satın almasından sonra Instagram ekibinin bu yapıyı beğenerek kullanmak istemesi sonucu kütüphane revize edilerek Instagram’da kullanılmıştır.  2013 yılında açık kaynak kodlu hale getirilerek yazılım dünyasının kullanımına sunulmuş.  Kendi sitesinde React şu şekilde tanımlanmaktadır: “Kullanıcı Önyüzleri Geliştirmek İçin Bir JavaScript Kütüphanesi” (https://reactjs.org/ ).

 

React, bileşen tabanlı geliştirmeye yönlendirir. Bileşenler bir kere yazılıp farklı projelerde tekrar kullanılabilirler. Kendi durumlarını (state) yönetirler. Veriler değiştikçe sayfada sadece gerekli bileşenler güncellenir; bu da performansı artırır. Her işi farklı bir bileşen yaptığı için karmaşık sistemleri yönetmek ve hata oluştuğunda tespit etmek kolaylaşır.  Ayrıca, bu bileşenler mevcut web sitelerine de entegre edilebilir ve böylece mevcut projelerimizi React’ a parça parça geçirebiliriz.

 

React’ ın dikkat çeken özelliklerini aşağıda aktarmaya başlayacağız ve örnekler vererek React yazılımına giriş yapmış olacağız :

 

Not : Yazının download link’i yazının sonunda paylaşılmıştır, ilgili PDF dosyasından kodları kopyalayabilirsiniz.

 

  1. Üst bileşenden alt bileşene bilgi aktarmak için props yapısı kullanılır. Bu aktarım tek yönlüdür.

Bu sayfa çalıştığında aşağıdaki şekilde görünecektir. (nasıl çalıştıracağımızı birazdan göstereceğim.)

Bu örnekte Yaş Hesapla bileşenini çağıran üst bileşen,   <YasHesapla dogumYili=”1975″ />   şeklinde YasHesapla  bileşenine dogumYili property si (props) değerini 1975 olarak geçirmektedir.

 

YasHesapla bileşeninde bu değeri kullanmak için this.props.dogumYili ifadesini kullanıyoruz.

 

Gördüğünüz gibi üst bileşende ReactDOM.render ve alt bileşen olan YasHesapla bileşeninde bir render() fonksiyonu var:  Render fonksiyonu sayfada göreceğimiz bilgileri oluşturuyor. dogumYili props u değiştiği anda alt bileşen de kendini güncelliyor.

 

2. React bu değişimleri performanslı bir şekilde yapabilmek için bellekte sanal bir DOM (Virtual Domain Object Model) tutmaktadır (VirtualDOM). Böylece yeni DOM’u sürekli eski DOM ile karşılaştırıp, farkları bulup, bileşenlerde sadece gerekli güncellemeleri yapmaktadır.

 

3. Bileşenlerde durum bilgisi (state) tutulması

Bileşen içinde aşağıdaki örnekte görüldüğü gibi değerler state nesnesinde tutulur. Bu değerler alt bileşenlere props lar ile geçirilebilir.

 

4. JSX (JavaScript XML) kullanımı. JSX, Javascript‘in bir eklentisi olup bileşenlerdeki rendering fonksiyonlarının daha yapısal bir şekilde yazılmasına olanak verir. Kullanımı zorunlu olmamasına rağmen birçok yazılımcı JSX kullanmayı tercih etmektedir.

Örnek bir kullanımı aşağıdaki gibidir:

 

Kurulum ve geliştirme ortamı

Windows işletim sisteminde React kullanmak için Node.js kurulumu yapılmalıdır. Bu kurulum https://nodejs.org/en/  adresinden yapılabilir.

Geliştirme ortamı için çok sayıda seçenek olmasına karşılık bizim tercih ettiğimiz ortam Visual Studio Code’dur.  Kurulumu https://code.visualstudio.com/Download  sayfasından yapılabilir.

 

Örnek proje

Alt alta iki (2) tane 9×9’luk Sudoku tablosundan oluşan,  üst tabloda çözülmemiş Sudoku bulmacasına ait bilgiler girilip Çöz butonuna basıldığında alt Sudoku tablosunu çözülmüş olarak dolduran bir uygulama yazacağız.

 

Sudoku tablosunun bitmiş hali aşağıdaki şekilde olacaktır.

Önce, tek sayfadan oluşan React uygulamaları için önerilen kurulum metodunu kullanarak boş bir React uygulaması oluşturuyoruz.   Command Prompt açarak istediğimiz bir dizine gidip aşağıdaki komutu çalıştırıyoruz. (Öncesinde Node.js kurulmuş olmalıdır).  Bu örnekte D dizininde çalıştırıyoruz.

npx create-react-app sudoku-solver-app

 

Şimdi Visual Studio Code açarak File – Open Folder seçeneğinden D:\sudoku-solver-app dizini üzerinde iken Select Folder butonuna basıyoruz .

 

Sol taraftaki explorer tabında src altında index.j’yi bulup;

 

Bu dosyanın içeriğini alttaki kodla değiştiriyoruz.

 

Şimdi programı çalıştıralım  (daha sonra kodu inceleyeceğiz).  Kodu çalıştırmak için  View menüsünden Terminal’e tıklıyoruz.  Altta açılan terminal penceresinde npm start komutunu çalıştırıyoruz.

 

Bu işlem sonucunda browser  sayfamız açılacaktır.  Üstteki tabloya bir kaç değer girip çöz butonuna bastığınızda alttaki tablo çözülmüş olarak dolacaktır.

Kod 3 bileşenden oluşmaktadır.  Ana bileşen Game. Onun altında Board bileşeni bulunuyor. Board bileşeni en üstte eğer geçersiz bir bulmaca girildiyse Geçersiz Sudoku yazdığımız bir metin alanından, onun altında çözülmesini istediğimiz bulmacadaki sayıları gireceğimiz 9×9’luk 81 tane Square alt bileşeninden sonra Çöz ve Temizle butonlarından ve en altta da çözümü gösterdiğimiz 9×9’luk 81 tane text  bileşeninden oluşuyor.

Önce aşağıda gördüğümüz, index.js nin en altında bulunan kod çalışarak Game bileşenini yüklüyor.

 

Game bileşininin içinde ise sadece 1 adet Board bileşeni var.

 

Board bileşeni  yüklenirken Render metodunda önce üstteki 9×9’luk bulmaca için girilen değerlerin geçerli olup olmadığını checkIfBoardIsValid  fonksiyonu ile kontrol ediyor.  Geçersiz ise status değişkenine Geçersiz Sudoku bilgisini yazıyor ve sonra bu bilginin değeri

<div className=”status”>{status}</div>

satırında   {} arasında status yazılarak sayfanın en üstünde gösteriliyor.

 

Burada checkIfBoardIsValid(this.state.squares)  fonksiyonuna squares  bilgisini gönderdik. Bu bilgi Board un durum bilgisini takip ettiği bir bilgi.  Aşağıdaki şekilde          this.state = {

squares: Array(99).fill(“”),

kodu ile 99 luk bir dizi olarak tanımlanmış durumda.

 

Ancak girilen değerler Board’un alt bileşeni olan Square’in içinde.  Board’un render metodunda Square bileşenini aşağıdaki şekilde kullanmıştık.

 

Her bir Square bileşeni aslında içine bilgi girilebilen birer text input sahası.

 

 

Square bileşenine girilen değerin üst bileşeni olan Board a aktarılabilmesi için Callback fonksiyonu kullanılması gerekmektedir. Bunu sağlamak için Board dan Square i çağırıken ;

<Square width=”10%” squareValue={this.state.squares[n+20]}   getInput={this.handleInput} squareIndex={n+20} />

getInput={this.handleInput}   yazarak getInput fonksiyonunun Board daki handleInput fonksiyonuna karşılık geldiğini söylüyoruz.

Square in Rende r metodunda onChange={this.props.getInput}  yazdığımızda, karenin içindeki değer değiştiğinde getInput fonksiyonun çağrılması , o fonksiyon da aslında handleInput fonksiyonu olduğu için sonuçta handleInput fonksiyonunun çağrılmasını sağlıyoruz. handleInput fonksiyonu aşağıdaki şekilde :

 

Burada event.target.value içinde bize kareye girilen değer geliyor. Hangi kareye girilen olduğunu anlamak için Square fonksiyonu çağrılırken className e bir sayı yollamıştık squareIndex={n+10} gibi, bu bilgiyi square te alırken this.props.squareIndex olarak alıp className e atamıştık, o sayıyı burada event.target.className ile alarak kullanıyoruz. Burada Board un squares  bilgisini güncelleyeceğiz ancak bunu direk yapmıyoruz. Önce        const tempSquares = this.state.squares.slice();  ile mevcut squares in bir kopyasını alıyoruz

tempSquares[event.target.className] = value;

ile  yeni gelen değeri tempSquares  dizisine kaydediyoruz. Sonra da this.setState({squares: tempSquares,

});

kodu ile oluşan yeni tempSquares  dizisini squares  durum bilgimize güncelliyoruz.

handleInput fonksiyonunun Board tarafından tanınması için Board un constructer  ına aşağıdaki şekilde bu fonksiyonu tanıtmamız gerekiyor. Aynı şekilde Çöz ve Temizle butonlarına basıldığı zaman çağrılacak fonksiyonları da aşağıdaki şekilde tanıtmamız gerekiyor.

 

Kodda squares  bilgisi üstteki tablodaki bilgileri tutmak için, squares2 ise çözdükten sonra alt tabloyu doldurmak için kullanılıyor.

 

Kodun geri kalanını kısaca anlatalım :

squares dizisi  ilk satıdakiler için 10, 11, 12 ..18  e kadar ikinci satır için 20, ..28

ve son satır için 90, 91, .. 98  şeklinde  indekse sahip.

 

Ancak kolaylık olması açısından alt tabloda kullanılcak squares2 dizisi ilk satır için [0][0], [0][1] …[0,8]

Ve son satır için [8][0], ..[8,8]  şeklinde  iki boyutlu bir dizi şeklinde .

 

Çöz butonuna (  <button onClick={this.solveSudoku}> Çöz </button>)

basıldığında çalışan  solveSudoku fonksiyonu aşağıdaki şekilde önce girilen değerlerin geçerli olup olmadığına bakıyor, geçersiz ise bir mesaj veriyor, geçerli ise çözüm için devam ediyor.

Sonra squares deki bilgileri squares3 iki boyutlu dizisine çeviriyor. Bunu da aşağıdaki komutla gerçekleştiriyor

squares3[i][j] = this.state.squares[(i+1)*10+j].toString();

bu şekilde squares 3 in [0][0] ına squares in (0+1)*10 + 0 = 10 nolu indeksi

örnek olarak [2][5] üne  (2+1)*10+5 = 35 nolu indeksini koyarak sağlıyor.

Sonra da bu bilgiler solve(squares3);  ile solve fonksiyonuna yollanıyor. squares3 dolduktan sonra da  bu bilgiyi squares2 ye       this.setState({squares2:squares3,})  komutu ile dolduruyoruz.  squares2 dolduğu anda  Board bileşeninin render fonksiyonunda aşağıdaki kısım çalışıp alt tabloyu dolduruyor.

<div>

{sections.length > 0 && sections.map(n => (

<input type=”text” style={{width: “4%”, height: “8%”}}  value= {this.state.squares2[0][n]} />

))}

</div>

 

Son bir bilgi olarak burada kullandığımız                 {sections.length > 0 && sections.map(n => (

Yapısını diğer programlama dillerindeki for komutu gibi düşünebilirsiniz. Sections dizisini render fonksiyonunun başında const sections = [0, 1, 2, 3, 4, 5, 6, 7, 8]; olarak tanımlamıştık. Burada n değerinin 0 dan 8 e kadar sırasıyla değerler alması sağlanarak input sahaları oluşturulmuş oluyor.

 

Umarım bu yazı React’ ı tanıyabilmeniz için faydalı olmuştur.

Blog yazımızı indirmek için tıklayın!

Leave a Reply