React
- Okunuşu
- riekt
Kısaca
React, veri değişince otomatik güncellenen, yeniden kullanılabilir bileşenlerle kullanıcı arayüzü kurmaya yarayan açık kaynaklı JavaScript kütüphanesidir.
React nedir?
React, ilk olarak Facebook'ta geliştirilmiş ve bugün açık kaynaklı bir proje olarak sürdürülen, kullanıcı arayüzü oluşturmaya yarayan bir JavaScript kütüphanesidir. Sayfayı değiştiren adım adım talimatlar yazmak yerine, belirli bir durum (state) için arayüzün nasıl görünmesi gerektiğini tarif edersiniz; durum her değiştiğinde React da tarayıcının DOM'unu buna uygun biçimde günceller.
Bir React uygulaması bileşenlerden (component) oluşur: bunlar, prop adı verilen girdileri alıp arayüzün bir tanımını döndüren fonksiyonlardır; bu tanım genellikle JavaScript içinde HTML benzeri bir söz dizimi olan JSX ile yazılır. Bileşenler useState gibi hook'lar sayesinde kendi durumlarını tutabilir; durum değiştiğinde React bileşeni yeniden çalıştırır ve sayfaya yalnızca gerekli değişiklikleri uygular.
Bileşenleri yapı taşları gibi düşünebilirsiniz: düğme, arama kutusu ya da ürün kartı gibi küçük ve kendi içinde bütün parçalar, birbirine geçerek daha büyük özellikleri oluşturur. Her parça yeniden kullanılabilir ve öngörülebilir davrandığı için ekipler panolar, sosyal akışlar ve çevrimiçi editörler gibi karmaşık arayüzleri geliştirip sürdürebilir.
React çoğu zaman framework olarak adlandırılır ama tek başına arayüz render etmeye odaklanan bir kütüphanedir. Yönlendirme (routing), veri yükleme ve sunucu tarafı render genellikle onun üzerine kurulan Next.js ya da React Router gibi framework'lerden gelir; bunlar React bileşenlerini CSR, SSR veya SSG ile render edebilir. Modern React ayrıca yalnızca sunucuda çalışan ve tarayıcıya kendileri için hiç JavaScript göndermeyen Server Components'i de destekler.
Önemli noktalar
- React, kullanıcı arayüzü geliştirmek için bir JavaScript kütüphanesidir.
- Arayüzler, prop alan ve durum tutan yeniden kullanılabilir bileşenlerden oluşur.
- JSX, JavaScript içinde HTML benzeri işaretleme yazmanızı sağlar.
- React, DOM'un yalnızca gerçekten değişen kısımlarını günceller.
- React üzerine kurulan framework'ler yönlendirme, veri yükleme ve sunucu tarafı render ekler.
Örnek
import { useState } from "react";
// A reusable component that keeps its own state
function LikeButton({ label }) {
const [likes, setLikes] = useState(0);
// Clicking updates the state, and React re-renders the button
return (
<button onClick={() => setLikes(likes + 1)}>
{label}: {likes}
</button>
);
}
// Components are used like HTML tags: <LikeButton label="Likes" />Sık sorulan sorular
React bir framework mü, kütüphane mi?
React kendini kütüphane olarak tanımlar; çünkü kullanıcı arayüzlerini render etmeye odaklanır, yönlendirme, veri yükleme ve derleme gibi işleri başka araçlara bırakır. Gündelik konuşmada sıklıkla framework denir; Next.js gibi tam kapsamlı framework'ler de onun üzerine kurulur.
JSX nedir?
JSX, JavaScript içinde <button>Save</button> gibi HTML benzeri işaretleme yazmanıza olanak tanıyan bir söz dizimi uzantısıdır. Bir derleme aracı, tarayıcıda çalışmadan önce bunu sıradan JavaScript fonksiyon çağrılarına dönüştürür.
React ile React Native arasındaki fark nedir?
React, web tarayıcılarında DOM'a render edilen kullanıcı arayüzleri geliştirmek için kullanılır. React Native aynı bileşenleri ve fikirleri kullanır ama HTML yerine yerel iOS ve Android görünümlerine render eder.
Sık karşılaştırılanlar
- React vs VueReact, JSX kullanan, yönlendirme ve state'i ekosisteme bırakan bir kütüphanedir; Vue ise HTML benzeri şablonlu, ikisine resmî araç sunan bir framework'tür.
- React vs AngularMeta'nın React'i başka araçlarla birleşen esnek bir UI kütüphanesidir; Google'ın Angular'ı ise yönlendirme, form ve HTTP'yi içeren kuralcı bir framework'tür.
- Next.js vs ReactReact, arayüzleri bileşenlerle kurmaya yarayan bir kütüphanedir; Next.js ise ona yönlendirme, sunucu tarafı render ve statik üretim ekleyen bir framework'tür.
İlgili sayfalar
- JavaScriptWeb Geliştirme, s. 25JavaScript, web tarayıcılarında sayfaları etkileşimli hale getiren ve Node.js gibi çalışma ortamlarıyla sunucularda da çalışan programlama dilidir.
- DOMWeb Geliştirme, s. 14DOM, tarayıcının bir web sayfasını temsil eden ve JavaScript'in okuyup değiştirerek kullanıcının gördüğünü güncelleyebildiği bellek içi nesne ağacıdır.
- SPAWeb Geliştirme, s. 42SPA, tek bir HTML sayfası yükleyip içeriği JavaScript ile güncelleyen ve görünümler arası geçişte sayfayı yeniden yüklemeyen web uygulamasıdır.
- FrameworkProgramlamanın Temelleri, s. 22Framework, bir uygulamanın yapısını sağlayan, yeniden kullanılabilir kod, araç ve kural temelidir; geliştiriciler yalnızca kendi mantıklarını doldurur.
- HydrationWeb Geliştirme, s. 23Hydration, tarayıcıdaki JavaScript'in sunucuda üretilmiş HTML'i devralıp olay yöneticilerini ve durumu bağlayarak sayfayı etkileşimli hale getirdiği adımdır.
- TypeScriptWeb Geliştirme, s. 51TypeScript, JavaScript üzerine statik tipler ekleyerek birçok hatayı kod çalışmadan yakalayan ve düz JavaScript'e derlenen bir programlama dilidir.
- Next.jsWeb Geliştirme, s. 32Next.js, React'e yönlendirme, sunucu tarafı render, statik üretim ve sunucu kodu ekleyen bir framework'tür; bütün bir web uygulaması tek projede geliştirilir.
- JSXWeb Geliştirme, s. 27JSX, kodun içine HTML benzeri işaretleme yazmayı sağlayan bir JavaScript sözdizimi uzantısıdır; çoğunlukla React ile arayüzün nasıl görüneceğini tarif eder.
- State ManagementWeb Geliştirme, s. 45State management (durum yönetimi), bir uygulamanın çalışırken değişen verileri nasıl saklayıp güncellediği, paylaştığı ve arayüzü bunlarla senkron tuttuğudur.
- React Hook'larıWeb Geliştirme, s. 38React hook'ları, useState ve useEffect gibi, fonksiyon bileşenlerinin state tutmasını, yan etki çalıştırmasını ve mantık paylaşmasını sağlayan fonksiyonlardır.
- UI BileşeniWeb Geliştirme, s. 52UI bileşeni, buton, form ya da kart gibi arayüzün yeniden kullanılabilen bir parçasıdır; işaretlemesini, stilini ve davranışını bir arada taşır.
Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin