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 yapı taşları 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, pratik öğretici 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 bilgilere dayanarak 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üphanesidir 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, 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 rehberdeki örneklerde bazen yeni JavaScript sözdizimi kullanımlarına rastlayabilirsiniz. Eğer son bir kaç yıldır JavaScript’le çalışmadıysanız, bu üç madde şu an için yeterli olacaktır.

Hadi Başlayalım!

Aşağı inmeye devam edin, sayfanın en altından hemen önce, bu rehberin bir sonraki bölümünün linkini bulacaksınız.