Derinlemesine React

By Onder Teker

Bu kitap React konusunda temel, orta & ileri konuları içermektedir. İçerikte component (class, function,
arrow); properties; event; state; condition; map; form (controlled / uncontrolled ) gibi temel konular
derinlemesine işlenmektedir. Sonrasında validation,elements (text, radio, checkbox, select) anlatılmaktadır. İleri konulardan hooks, lifecycle; memo; reducer; error; configuration; higher order components; portal gibi maddeler işlenmektedir. JSX ile geliştirme gösterilmekte, son bölümde JSX olmadan JavaScript ile geliştirmenin yolları da anlatılmaktadır.

 

Kitabın yazarı bilgisayar mühendisi Önder Teker, yazılım geliştirme alanında 1990'lı yılların sonlarından beri projeler geliştirmekte, 2000'li yılların başından beri eğitimler vermekte, 2010'lu yılların başından beri de kitap ve eğitim setleri üretmektedir.

• Language: Türkçe
• Publisher: Godoro
• Release date: Jul 8, 2022
• ISBN: 9786057476463

Book preview

Temel Bilgiler

Bu bölümde React ile geliştirme yapmaya başlamak için gerekli temel bilgiler verilmektedir.

Kurulum (Installation)

Gerekli kurulum (installation) işlemleri aşağıda anlatılmaktadır.

Node.js

React adı verilen çatımlama (framework) ya da betilik (library), JavaScript, daha doğru bir deyişle ECMAScript diliyle çalışmaktadır. Bunun için Node.js ortamının kurulmuş olması gerekir. React çatımlamasının kendisi JavaScript diliyle bir bohça (package) olarak tanımlanmıştır. Kurulumu için npm (Node Package Manager - Node Bohça İşletmecisi) adlı araç gereklidir. React ile geliştirilen  uygulamaların çalıştırılması için de npm gerekir. Çalıştırma için npx (Node Package Executer - Node Bohça Yürütümleyici) adlı uygulama da kullanılmaktadır.

Ortamda Node.js altyapısının yüklenmiş olup olmadığı, bir uçbirim (terminal) içinde node adlı buyruğunun

node --version

biçiminde çalıştırılmasıyla anlaşılabilir. Bu buyruk sürüm (version) sayısını döndürür. Örnek:

v16.13.2

Uygulama Yaratma (Create an Application)

Node.js kurulmuşsa bir uygulama, npx buyruğunda create-react-app tartışımı verilerek aşağıdaki gibi yaratılabilir:

npx create-react-app my-app

Burada my-app, yaratılan uygulamanın adıdır. Herhangi bir ad alabilir ancak küçük harflerle ve arada tire koyarak adlamak bir uylaşım (convention) olarak uygulanır.

Bu işlemin sonunda uygulama uçbirimde bulunulan dizinde oluşturulur.

Yönlük (Directory)

Bir uygulama yaratılınca belli bir klasör / katlık (folder) / yönlük (directory) altında yer alır. Buna göre yönlük yapısı aşağıdaki gibidir:

grafikler63

Burada node_modules (Node kiplemleri) dizininde React ve öteki bohçalar yer alır. Geliştirici bunlara dokunmamalıdır. Üzerinde geliştirme yapılacak dosya ve klasörlerin tümü src (source - kaynak) dizininde yer alır. Bunlar, çoğunlukla değerleme gibi bir işlemlerle bir gözatıcı (browser) içinde çalışacak duruma getirilir. Kökteki public (kamu) yönlüğü ise, geliştiricinin kullandığı, ancak üzerinde değişiklik yapmadığı imge (image) gibi dosya türleridir.

Uygulama Koşturma (Run an Application)

Bir uygulamayı çalıştırmak için cd (change directory - yönlük değiştir) ile uygulama klasörünün içine girilir:

cd my-app

Sonrasında npm buyruğuna start (başlat) tartışımı verilerek çalıştırma yapılır:

npm start

Bunun sonucunda uygulama çalıştırılır ve konsolda uygulamaya bir gözatıcı (browser) üzerinden nasıl erişeleceği bilgisi gelir:

You can now view my-app in the browser.        

 Local:            http://localhost:3000        

 On Your Network:  http://192.168.1.34:3000    

Gözatıcı kendiliğinden açılabilir. Gözatıcının, yoksama uygulama (default application) olarak seçilen uygulamanın desteklenmemesi gibi koşullarda, kendiliğinden açılmaması durumunda aşağıdaki gibi gözatıcıda aşağıdaki gibi bir adres girilerek çalıştırma yapılabilir:

http://localhost:3000

Ekranda aşağıdaki gibi bir görünüm oluşur:

grafikler61

Yapılama (Build) & Konuşlandırma (Deploy)

React ile geliştirildikten sonra bir uygulamayı üretim (production) çevresine almak gerekmektedir ki kullanıcılar erişebilsin. Bunun için önce yapılama (build) adı verilen işlem gerçekleştirilir. Buna göre derleme (compile) veya benzeri işlemlerle, önce kaynak (source) dosyalarından üretimde çalışacak dosyalara gerekli çevrimler yapılır. Sonrasında üretilen dosyaların üretim çevresine taşınması gerekir. Buna konuşlandırma (deployment) adı verilir.

Yapılama (Build)

Bir uygulama üzerinde yapılama (build) yapılacaksa npm aracındaki run (koştur) buyruğuna build (yapıla) tartışımı verilir:

npm run build

Bunun sonucunda uygulamanın konuşlandırılabilecek bir sürümü kök klasörünün altındaki build alt klasöründe bulunur. Uygulamanın yönlüğü artık aşağıdaki gibi olur:

grafikler64

İşgörme (Serve)

Bir uygulama build (yapıla) aracıyla konuşlanmaya hazırlandıktan sonra üretim çevresinde çalıştırılabilir. Ancak geliştirme çevresinde de üretim çevresindeymiş gibi çalıştırmak olanaklıdır. Bunun için işgör (serve) adlı bir araç gereklidir. Kurmak amacıyla npm aracının install (kurulumla) adlı buyruğu kullanılabilir:

npm install -g serve

Sonrasında çalıştırmak için npx aracından yararlanılır:

npx serve -s build

Daha önce kurulumlamadan da çalıştırma yapılabilir. Bu durumda npx, önce kullanıcıya sorarak, aracı kurar.

Buradaki çalıştırma

npm start

buyruğuyla aynı gibi görünse de, çok ayrıdır. Bu kez çalışma, React betikliğindeki araçların üzerinde değil, doğrudan gözatıcı (browse) üzerinde çalışacak JavaScript araçlarıyla yapılır. Başka bir deyişle, böyle çalışmada React çatımlaması devre dışı kalır ve tüm süreç gözatıcının içinde gerçekleştirilir. Ancak bunun sonucu olarak da, React çatımlamasının sağladığı, değişiklik yapıldığında anından gözatıcıda yenileme yapılması gibi becerilerden yararlanılamaz.

JSX

React çatımlamasında JavaScript ile geliştirme yapılır. Ancak JavaScript ile HTML düzgüleri bileşende iç içe kullanılır. Başka bir deyişle, HTML düzgüsü JavaScript ile üretilir.

JavaScript

JavaScript ile HTML kuşama (generation) işlemi karmaşık düzgülemeye yol açmaktadır. Çünkü bir takım nesnelerin bir takım işlevleriyle çok miktarda HTML sicimi üretmek kolay olmamaktadır. Örneğin, yalın bir geliştirme için aşağıdaki gibi bir düzgüleme yapılmak durumunda kalınır:

return (

React.createElement( 'h1', {}, Sınama)

)

Sözdizimi (Syntax)

Karmaşıklığı gidermek amacıyla JavaScript içinde doğrudan HTML yazılabilmesini sağlayan JSX adı verilen bir uzatma  ya da söz dizimi geliştirilmiştir. Açılımı JavaScript XML biçimiXMLndedir. Burada HTML yerine XML denilmesinin nedeni,  sözdizimine göre yazma zorunluluğudur. XHTML adı da verilen, XML sözdizimi ile HTML yazma yöntemi kullanılmalıdır.

Yukarıdaki örnek JSX ile aşağıdaki gibi yazılabilmektedir:

render (){

 return (

Sınama

 )

}

Görüldüğü gibi, belli bir bölge düz HTML ile yazılmaktadır. Burada JavaScript işlevleri yer almamaktadır.

JSX sözdizimi, her satırını JavaScript mi yoksa HTML mi olduğunu anlar. Bunu da <> (küçüktür-büyüktür / less than - greater than) JavaScript dilindekileri aynen çevirirken HTML dilinde olanları JavaScript ile üretecek düzgüler ekler.

.jsx / .js

Olağan JavaScript düzgüsünden ayırmak için JSX sözdizimiyle yazılmış dosylarda jsx uzantısı kullanılır. Örneğin

MyComponent.jsx

Ancak React araçları js uzantıları da işlediği için içinde JSX sözdizimiyle yazılmış ancak uzantısı js olan dosyaları da çalıştırır. Bu yüzden bir çok yerde hem jsx hem de js kullanılmaktadır. Buna göre aşağıdaki gibi bir dosya da JSX sözdizimi yer alabilir:

MyComponent.js

Sürüm (Version)

JSX ile yazma, React çatımlamasının eski sürüm (version) içerisinde yoktu. Ancak sonraki sürümlerde neredeyse tek yol olarak önerilmektedir. Ancak eski sürümleri öğrenmek durumunda olanlar ya JSX sözdiziminin çalışmasını derinlemesine anlamak isteyenler için son bölümlerde kökleşik React geliştirme de anlatılmaktadır. Orada JSX ile yazma ile JSX olmadan yazma arasında karşılaştırma yapıldığından, daha önce JSX olmadan yazanların geçişi için yararlı olabilecek bilgilendirmeler yer almaktadır.

Geliştirme (Development)

Bu bölümde JSX ile geliştirme yaparken bilinmesi gerekenler anlatılmaktadır.

Bohça (Package)

React ile ilgili bileşenler react adlı bohça (package) içerisinde bulunur. JavaScript içinde kullanılmaları durumunda import (içe al) adlı açarsözle başvuru yapılır:

import React from 'react';

Bu işlemden sonra herhangi bir işlev da öğe aşağıdaki gibi kullanılabilir:

myFunction();

İçealım yapmadan da React kipleminden erişim yapılabilir:

React.myFunction()

Dışaverim (Export)

JavaScript dilinde bir dosyada yazılan bir öğenin başka bir yerde kullanılması için export (dışaver) açarsözü kullanılır. Bu nedenle tanımlanmış bir öğe için

export MyElement

biçiminde bir dışa verme yapılır. Eğer öğe, MyElement.js biçiminde bir dosyada tanımlı ise, başka bir dosyadan import (içeal) sözcüğü ile erişim aşağıdaki gibi yapılır:

import MyElement from 'MyElement.js'

Bir dosyadaki öğelerden bir tanesi, adı verilmeden içe alınabilir. Bu durumda default (yoksama) açarsözü kullanılabilir:

export default MyElement

Söz konusu açarözler öğenin tanımından sonra da yapılabilir, onunla birlikte de. Örneğin bir sınıf / kökleşi (class) öğesi

class MyClass {

 ...

}

biçimininde bildirilip sonradan

export default MyClass;

biçiminde dışaverildiği gibi bildirimde tek kezde yapılabilir:

export default class MyClass {

 ...

}

Bileşen (Component)

React adlı çatımlama (framework) ya da betiklik (library) için en temel öğe, bileşen (component) adını taşır. Bir uygulama içinde belli bir konumda çalışan en küçük birim olarak düşünülebilir. Buna göre uygulama, iç içe bir çok bileşen içerir ve en tepede, diğer bileşenleri içeren uygulamanın kendisi de bir bileşendir.

Sınıf Bileşen (Component Class)

Bileşen yapmanın yollarından birisi, bir sınıf / kökleşi (class) oluşturmaktır. Ancak giderek daha az kullanılmaktadır. Öte yandan, belli durumlarda kökeşi kullanmayı gerekli kıldığıdan ve bir çok örnek buna göre yapıldığından bu seçeneğin de bilinmesi gerekir.

Kökleşi (Class)

Bir bileşen oluşturmak için React.Component adlı sınıftan extend (uzatımla) açarsözüyle kalıtım (inheritance) uygulamak gerekir.  Örneğin

export default class ClassComponent

extends React.Component

{

}

biçimindeki bir düzgüleme, bir bileşen bildirimi yapar. Buna kökleşi bileşeni (class component) adı da verilir.

Eyleme (Render)

Bir bileşenin görevi HTML düzgüsü üretmektedir. Bunun için render() (eyle) diye bir işlev yapıp ondan bir öğe (element) döndürmek gerekir. Örnek:

render() {

 return

}

Birden çok öğe döndürmek gerektiğinde çok sayıda satır gerekli olur. Bu durumda () (yuvarlak ayraç - round brackets) imleri kullanılır:

render() {

 return (

     ...

   

)

}

Tek Öğe (Single Element)

İşlevden dönen düzgü, tek bir öğe içermelidir. Örneğin

 return (

 <div>

   ...

 

  <div>

   ...

 

)

biçiminde düzgüleme gereçsizdir. Bu durumda iki öğeyi de kapsayan bir öğe yapılır:

return (

 

    

     ...

   

   

     ...

   

)

Kullanım

Bir bileşeni, başka bir bileşenin içinde kullanmak için önce içealım (import) işlemi yapılır:

import MyComponent from './myfolder/MyComponent';

Buradaki tek tırnak içindeki bölüm, bileşenin bulunduğu dosyanın konumu, yani yolak (path) bilgilendirmesidir.

Başka bir bileşenin HTML bölümünde olağan bir öğe olarak kullanılabilir. Örneğin, App (Application - Uygulama) adlı bileşende bir bileşen kullanımı aşağıdaki gibi olur:

function App() {

 return (

   

App>

      

App-header>

     

   

 );

}

export default App;

Bu kitabın içeriğinde, bir bileşenin yazılması anlatılıp başka bir bileşenin içinde kullanılması anlatılmıyorsa; App içinde gösterildiği var sayılmaktadır.

Örnek

Aşağıdaki örnekte sınıf / kökleşi (class) kullanılarak yapılmış bir bileşen (component) bulunmaktadır:

import React from 'react';

export default class ClassComponent

extends React.Component

{

render() {

return (

      

       

Bu bir

kökleşi

          bileşendir.

     

    );

 }

}

grafikler1

Ekran çıktısı aşağıdaki gibi olur:

İşlev Bileşen (Function Component)

Bir kökleşi / sınıf (class) yapmak yerine, tek bir işlev (function) yazılarak da bileşen oluşturulabilir. Bu durumda render() (eyle) işlevinde gerçekleştirilen işlemler bu işlev içerisinde yazılır. Böylelikle sınıf tanımlama ve render() işlevini yazma yükümlülüğünden kurtulunmuş olur. Bu tür bileşenlere işlev bileşen (function component) adı da verilmektedir.

Tanım

Bir işlev bileşeni aşağıdaki gibi yazılır:

export default function FunctionComponent() {

return (

    

     ...

    

 );

}

İşlev bileşeni yazılması durumunda sınıflardaki  yapımlayıcı (constructor), tarla (field) ve işlev (function) gibi öğeler yazılmaz. Bu durumda tarla yerine yerel değişken (local variable) ve işlev yerine de ok işlevi (arrow function) kullanılır.

Örnek

Aşağıdaki örnekte işlev (function) kullanılarak yapılmış bir bileşen