Single Page Application
Single page application yani kısa adıyla SPA, tek HTML sayfası yükleyen bir uygulamadır ve uygulamanın çalışması için gerekli tüm dosyaları (JavaScript, CSS vb) içerir. Sayfa veya sonraki sayfalarla olan herhangi bir etkileşim için servera gidip gelmesi gerektirmez; bu da sayfanın yeniden yüklenmediği anlamına gelir.
Reactte SPA oluşturabilmenize rağmen, bu bir zorunluluk değildir. React, hali hazırda çalışan bir sitenin küçük bölümlerini geliştirmek için de kullanılabilir. React’te yazılmış kod, diğer diller ile de kullanılabilir. Facebook’un sitesi buna en iyi örnektir.
ES6, ES2015, ES2016
Bu kısaltmalar, JavaScript dilinin bir uygulaması olan ECMAScript standartlarının en yeni sürümlerine karşılık gelir. ES6 sürümü (ES2015 olarak da bilinir), ok fonksiyonları, classlar, şablon değişmezleri, let ve const ifadeleri gibi önceki sürümlere pek çok ekleme içerir.
Compiler
Bir JavaScript derleyicisi, güncel sürümlerde yazılmış (örneğin ES6) kodunu alır, tarayıcıların anlayacağı syntaxa dönüştürür. Bunun için React ile en sık kullanılan derleyici Babeldir.
Bundler
Bundlerlar (paketleyiciler), JavaScript ve CSS kodunu ayrı modüller (çoğunlukla yüzlerce tanesi) olarak yazarlar ve tarayıcılar için daha iyi optimize edilmiş birkaç dosyaya birleştirirler. React uygulamalarında yaygın olarak kullanılan bazı paketleyiciler arasında Webpack ve Browserify bulunur.
Package Manager
Package manager (Paket yöneticileri), projenizdeki bağımlılıkları yönetmenize izin veren araçlardır. npm ve yarn, React uygulamalarda yaygın olarak kullanılan iki paket yöneticisidir. Her ikisi de aynı npm paketi kayıt defteri için istemcilerdir.
CDN
CDN, Content Delivery Network (İçerik Dağıtım Ağı) kısaltmasıdır. CDN’ler, tüm dünyadaki bir sunucudan önbelleklenmiş statik içeriği sağlar.
JSX
JSX, JavaScript’in syntax uzantısıdır. Bir şablon diline benzer ancak JavaScript özellikleri vardır. JSX, JavaScript nesnelerini return eden React.createElement() çağrılarına derlenir. JSX’e temel bir giriş elde etmek için dokümanlara bakın ve burada JSX hakkında daha ayrıntılı bir bilgi bulabilirsiniz.
React DOM, HTML attribute adları yerine camelCase adlandırma kuralını kullanıyor. Örneğin, JSX’de tabindex, tabIndex olur. Class özelliği de JavaScript’de ayrılmış bir sözcük olduğu için class niteliği className olarak da yazılmıştır:
const name = 'Ömer Gülçiçek';
ReactDOM.render(
<h1 className="hello">Benim adım {name}!</h1>,
document.getElementById('root')
);
Elementler
React elementleri, React uygulamalarının yapı taşlarıdır. Daha yaygın olarak bilinen component kavramıyla elementler karıştırabilir. Bir element, ekranda görmek istediğiniz şeyi tanımlar. React elementleri değişmez.
const element = <h1>Merhaba Dünya</h1>;
Elementler doğrudan kullanılmaz, ancak componentler ile return edilir.
Elementler hakkında detaylı bilgi için elementleri render etmek konusunu inceleyebilirsiniz.
Componentler
React componentleri, sayfaya uygulanacak bir React elementini return eden, küçük, tekrar kullanılabilir kod parçacıklarıdır. React componentinin en basit sürümü, React elementi return eden basit bir JavaScript fonksiyonuna örnek olarak:
function Welcome(props) {
return <h1>Merhaba {props.name}</h1>;
}
Componentler ES6 classları ile de yapılabilir:
class Welcome extends React.Component {
render() {
return <h1>Merhaba {this.props.name}</h1>;
}
}
Componentler, farklı parçalara bölünebilir ve başka component içinde kullanılabilir. Componentler, diğer componentleri, dizileri, stringleri ve sayıları return edebilir. UI’ızın bir bölümünü birkaç kez kullandıysa (Button, Panel, Avatar) veya kendi başına yeterince karmaşıksa (App, FeedStory, Comment), yeniden kullanılabilir bir component olması küçük parçalara ayırmak iyi bir yoldur. Component adları daima büyük harfle başlamalıdır (
Component oluşturma hakkında daha fazla bilgi için component dokümanına bakın.
props
props bir React componentinde, bir üst componentten alt componentlere geçirilen verilerdir.
Unutmayın ki propslar yalnızca okunurdur; hiçbir şekilde değiştirilmemelidirler:
// Yanlış!
props.number = 42;
props.children
Her component için props.children mevcuttur. Bir componentin açılış ve kapanış etiketleri arasındaki içeriğe denir. Örneğin:
<Welcome>Merhaba Dünya</Welcome>
Merhaba Dünya stringi Welcome componentinde props.childrenda tutulur:
function Welcome(props) {
return <p>{props.children}</p>;
}
Class componentte ise this.props.children ile kullanılır:
class Welcome extends React.Component {
render() {
return <p>{this.props.children}</p>;
}
}
state
Bir Component, kendisiyle ilişkili bazı veriler zaman içinde değiştiğinde statee ihtiyaç duyar.
state ile props arasındaki en önemli fark, propsun ana componentten geçirilmiş olmasıdır, ancak state componentin kendisi tarafından yönetilmektedir. Bir component propslarını değiştiremez, ancak statei değiştirebilir. Bunu yapmak için, this.setState()i çağırmalıdır. Yalnızca class olarak tanımlanan componentlerin state’i olabilir.
Lifecycle Fonksiyonları
Lifecycle fonksiyonları, bir componentin farklı aşamalarında yürütülen özel fonksiyonlardır. Component oluşturulduğunda ve DOM’a eklendiğinde (mounting), component güncellendiğinde ve component kaldırıldığında DOM’da çalıştırılan fonksiyonlar vardır.
Lifecycle fonksiyonları hakkında daha fazla bilgi için lifecycle fonksiyonları dokümanına bakın.
Keys
Bir key elementin dizileri oluşturulurken eklenmesi gereken özel bir string attributetüdür. Keyler yardımı ile hangi elementlerin değiştiğini, eklendiğini veya kaldırıldığını belirleyebilirsiniz. Elementlere istikrarlı bir kimlik kazandırmak için bir dizideki elemente key verilmelidir.
Keyler yalnızca aynı dizindeki kardeş elementler arasında benzersiz olmalıdır. Tüm uygulamada benzersiz olması gerekmez.
Keylere Math.random() gibi bir şey kullanmayın. React keylerinin istikrarlı bir kimliği olması, böylece React’in element ekleme, kaldırma gibi işlemleri belirleyebilmesi için önemlidir. İdeal olarak, keyler verilerinizden gelen benzersiz ve kararlı tanımlayıcılara (örneğin post.id) karşılık gelmelidir.
Keyler hakkında daha fazla bilgi için listeler ve keyler dokümanına bakın.