React ile web uygulaması geliştirme

React hangi işler için uygun

React, ekranı küçük ve yeniden kullanılabilir bileşenlerden kuran bir JavaScript kütüphanesidir. Kullanıcının gün boyu açık tuttuğu, form, tablo, filtre ve grafikle dolu uygulamalarda güçlüdür: veri değiştiğinde yalnızca etkilenen parça yeniden çizilir, bir kez yazılan bileşen onlarca ekranda tekrar kullanılır.

React’in iyi oturduğu durumlar

Giriş yapılarak kullanılan bir yönetim paneli, müşteri portalı ya da şirket içi araç
Yönetici, çalışan ve müşteri gibi farklı rollerin aynı veriye kendi ekranlarından baktığı bir sistem
Grafik, tablo ve filtrelerle dolu bir raporlama ekranı
İleride aynı ekibin bir mobil uygulama da (React Native ile) yazmasını istiyorsunuz

React’i tek başına önermeyeceğimiz durumlar

Birkaç sayfalık, içeriği nadiren değişen bir tanıtım sitesi: düz HTML ya da statik bir site yeter
Sayfaların arama motorlarından ziyaretçi getirmesi asıl hedef: bu durumda React’i Next.js ile kullanıyoruz
Ekibinizde başka bir arayüz kütüphanesi (Vue, Angular) yerleşmiş ve sorunsuz çalışıyor

Vite ile React mi, Next.js mi

İkisi de React; fark, sayfanın nerede hazırlandığında. Vite ile kurulan uygulama tarayıcıda çalışır ve giriş gerektiren paneller için sade ve hızlı bir yapıdır. Next.js sayfaları sunucuda ya da derleme sırasında HTML olarak hazırlar; arama motorlarından ziyaretçi beklenen sayfalarda onu tercih ediyoruz. Hippotenus’ta ikisi yan yana duruyor: tanıtım sitesi Next.js ile, kurumların her gün kullandığı panel Vite ve React ile.

	Vite + React	Next.js
Sayfanın hazırlandığı yer	Tarayıcı	Sunucu ya da derleme anı
Arama motoru görünürlüğü	Giriş gerektiren ekranlarda gerekmez	Herkese açık sayfalar için güçlü
Yayına alma	Derlenen statik dosyalar sunulur	Node.js sunucusu ya da statik çıktı
Bizim örneğimiz	Hippotenus paneli, Logaritim	Atölye Tasarım, hippotenus.com

Ürünlerimizde React ne yapıyor

Yayındaki iki ürünümüzün her gün kullanılan arayüzleri React ile yazıldı. Kodda çözdüğümüz ihtiyaçlardan bazıları:

Hippotenus’un web panelinde yönetici, öğretmen, veli, öğrenci ve süper yönetici için ayrı ekran grupları var; yetkisi olmayan bir sayfayı açan kullanıcı erişim uyarısıyla karşılaşıyor.
Öğrenci panelindeki deneme ve performans analizleri Recharts ile radar, çizgi ve sütun grafikleri olarak çiziliyor.
Mesajlaşma ekranında yeni mesajlar, “yazıyor” göstergesi ve görüldü bilgisi Socket.IO ile sayfa yenilenmeden geliyor.
Anket oluşturucuda ve çalışma programında sıralama, sürükle-bırak ile (dnd-kit) yapılıyor.
Logaritim’in sınav sihirbazında sütun, kenar boşluğu ve öğrenci bilgi alanları seçildikçe kâğıdın önizlemesi anında güncelleniyor; sınav ve cevap anahtarı PDF’leri sunucuda üretilip indiriliyor.
Bir müşteri projesinin yönetim panelinde ekranlar ve düğmeler bir yetki ağacına göre gösterilip gizleniyor; kayıtlar harita üzerinde kümelenerek gösteriliyor.

React’in yanında kullandığımız kütüphaneler

Vite

Geliştirme sunucusu ve derleme aracı. Hippotenus paneli, Logaritim ve soruverse.com Vite ile derleniyor.

TanStack Query

Sunucudan gelen veriyi önbellekte tutar ve gerektiğinde yeniler. Hippotenus panelinde önbellek tarayıcıda da saklanıyor; panel yeniden açıldığında son veri beklemeden görünüyor.

Recharts

Panellerdeki radar, çizgi ve sütun grafikleri. Hippotenus’ta ve bir müşteri projesinin finans ekranlarında kullanıyoruz.

KaTeX

Matematik formüllerini tarayıcıda düzgün göstermek için. Hippotenus ve Logaritim’de soru metinlerindeki formüller KaTeX ile çiziliyor.

Socket.IO

Sayfa yenilenmeden gelen mesajlar ve durum bilgileri. Hippotenus panelinin mesajlaşmasında kullanıyoruz.

Vitest ve Testing Library

Bileşenleri kullanıcının gördüğü hâliyle test etmek için. Hippotenus panelinin bileşenleri bu araçlarla test ediliyor.

Bir React projesi nasıl ilerliyor

01
Ücretsiz keşif görüşmesi
30 dk
Uygulamayı kimlerin kullanacağını, hangi rolün hangi veriyi göreceğini ve aklınızdaki bütçeyi konuşuyoruz.
02
Yazılı kapsam ve teklif
Ekran listesini, rolleri ve yetkileri, kabul kriterlerini yazıya döküyoruz; uygulamanın Vite ile mi Next.js ile mi kurulacağı da burada netleşiyor.
03
Haftalık sürümler
Her hafta çalışan sürümü kendi tarayıcınızda açıp deniyorsunuz; yorumlarınız bir sonraki haftanın işini belirliyor.
04
Test ve yayın
Yayından önce senior QA her rolün ekranlarını tek tek test ediyor.
05
Yayından sonraki 30 gün
30 gün
Bu dönemde ortaya çıkan hataları ücretsiz gideriyoruz; sonrasında aylık bakımla devam edebilirsiniz.

Süre ve bütçe aralıkları web uygulaması geliştirme ve fiyatlar sayfalarımızda yayında; bu sayfa da aynı rakamlara dayanıyor.

React hakkında sık sorulanlar

React ile yazılan bir uygulama arama motorlarında görünür mü?

Giriş gerektiren panellerde buna gerek yok. Herkese açık sayfalarda ise HTML’in önceden hazırlanması gerekir: ya Next.js kullanıyoruz ya da sayfaları derleme sırasında statik HTML’e çeviriyoruz. Şu an okuduğunuz pepechura.com da React ile yazıldı ve her sayfası bu şekilde önceden üretiliyor.

Uygulama büyüdükçe yavaşlamaz mı?

Ekranları ayrı paketlere bölüyoruz; kullanıcı yalnızca açtığı sayfanın kodunu indiriyor. Hippotenus panelinde grafik ve formül kütüphaneleri ilk açılışta yüklenmiyor, uzun sohbetlerde yalnızca ekranda görünen satırlar çiziliyor. Logaritim’de sık açılan yönetim sayfaları, tarayıcı boşta kaldığında önceden indiriliyor.

Mobil uygulamayı da aynı ekip yazabilir mi?

Evet. React Native, React ile aynı bileşen mantığını kullanır. Hippotenus’ta web panelini React ile yazan ekip, mobil uygulamayı da Expo ile geliştiriyor.

Proje teslim edildiğinde neye sahip oluyorum?

Yazılım için süresiz bir kullanım lisansına ve dokümantasyona. Kaynak kodun size devri de mümkün; bunun ek ücreti teklifte ayrı bir kalem olarak yazılır.

React ile web uygulaması geliştirme

Bu teknolojiyle geliştirdiklerimiz

Hippotenus

Logaritim