Merhaba Dünya

En basit React örneği aşağıdaki gibidir:

ReactDOM.render(
  <h1>Merhaba dünya!</h1>,
  document.getElementById('root')
);

Ekrana “Merhaba dünya!” başlığını yazdırır.

Codepen'de Aç

Yukarıdaki linke tıklayarak online düzenleyiciyi açabilirsiniz. Değişiklik yapmaktan çekinmeyin ve yaptığınız değikliklerin çıktısını gözlemleyin. Bu rehberdeki çoğu sayfada bunun gibi düzenlenebilir örnekler göreceksiniz.

Bu Rehberi Nasıl Okumalısınız

Bu rehberde, React uygulamalarının inşa blokları olan elemanları (Element) ve bileşenleri (Component) inceleyeceğiz. Bunlarda uzmanlaştığınızda, küçük ve tekrar kullanılabilir parçalardan karmaşık uygulamalar oluşturabilirsiniz.

İpucu

Bu rehber adım adım öğrenme konseptini tercih eden kişiler için hazırlanmıştır. Eğer yaparak öğrenmeyi tercih ediyorsanız, pratiğe dayalı dersler sayfamıza göz atabilirsiniz. Bu rehberi ve pratiğe dayalı dersleri birbirine tamamlayıcı olarak kullanabilirsiniz.

Bu bölüm, adım adım temel React konseptlerinin ilk bölümü. Yandaki menüden diğer bölümlere ulaşabilirsiniz. Eğer bunu mobil cihazda okuyorsanız, sağ alt köşedeki butona basarak menüye ulaşabilirsiniz.

Bu rehberdeki her bölüm, önceki bölümlerden edinilen bilgiler temelinde ilerlemektedir. Yan menüde “Temel Konseptler” başlığı altındaki bölümleri sırasıyla okuyarak React hakkındaki önemli konuları öğrenebilirsiniz. Örneğin bundan sonraki bölüm, “JSX’e Giriş”.

Bilgi Seviyesi Varsayımları

React bir JavaScript kütüphanesi, ve bu yüzden sizin temel düzeyde JavaScript dilini anladığınızı varsayacağız. Eğer yeteri kadar rahat hissetmiyorsanız, JavaScript derslerine göz atmanızı ve bilgi seviyenizi kontrol etmenizi tavsiye ederiz. Böylelikle bu rehberi takip ederken kaybolmazsınız. Bu sizin yaklaşık 30 dakika ile 1 saat arası bir sürenizi alabilir fakat sonuç olarak aynı anda hem React hem JavaScript öğreniyormuş gibi hissetmek zorunda hissetmeyeceksiniz.

Not

Bu rehberde örneklerde bazen yeni JavaScript sentaks kullanımlarına rastlayabilirsiniz. Eğer son bir kaç yıldır JavaScript’le çalışmadıysanız, bu üç nokta şu an için yeterli olacaktır.

Hadi Başlayalım!

Aşağı inmeye devam edin, footer’dan hemen önce, bu rehberin bir sonraki bölümünün linkini bulacaksınız.