rnturkce
  • Introduction
  • Yararlandığım Kaynaklar
  • Babel, ES2015, ES6, ES7 Nedir ?
  • ES6 ve ES7 Örnekler
  • Fonksyionel Programlama
  • Composition
  • Composition ile React Native Örneği(Yazılacak)
  • React JS Nedir ?
  • JSX Nedir ?
  • Lifecycle Methodlar
  • Props Mantığı
  • State Mantığı
  • React Native Nedir ?
  • Installation
  • expo
  • Windows Installation
  • macOS Installation
  • Gnu/Linux Installation
  • React Native Başlangıç
  • Style ve FlexBox
  • Temel Component'ler
  • View
  • Text
  • Image
  • ScrollView
  • ListView
  • FlatList
  • Component API'lar
  • Animasyon
    • LayoutAnimation
    • Animated
      • Animated.Event( )
  • PanResponder
  • react-navigation
    • İç İçe Navigator Kullanımı
    • Header Seçenekleri( Yazılacak )
  • State Yönetimi
  • mobx
  • Redux(Yazılacak)
  • Yılan Oyunu Tutorial
  • Yılan Oyunu Part 1
  • Yılan Oyunu Part 2
  • Yılan Oyunu Part 3
  • Android Apk Oluşturma
Powered by GitBook
On this page

Was this helpful?

JSX Nedir ?

PreviousReact JS Nedir ?NextLifecycle Methodlar

Last updated 5 years ago

Was this helpful?

(Bu sayfada jsbin den gömülü kod kullanılmaktadır. Eğer kodu göremiyorsanız, browserınızda adres çubuğundaki load unsafe script seçeneğini seçmelisiniz)

Yukarıdaki basit bir React componenti. React ve ReactDOM kütüphanelerini script tag'i ile HTML sayfamızın başına yazdık.

Sonra Javascript derleyicimizi, JSX seçtik ( ES6/Babel de seçebilirdik )

Burada dikkatinizi çeken bir şey oldu mu ? Biz javascript kodumuza, HTML kodu yazdık :)

Önceden bahsettiğimiz, React ın bize sunduğu lego tasarlar gibi uygulama geliştirmek tam olarak böyle, parça parça HTML kodlarını component olarak yazıp hepsini belli bir hiyerarşiyle bir araya getirmek.

Aslında en yukarıda yaptığımız JavaScript içine HTLM kod yazarak yaptığımız şey tam olarak React.createElement yerine HTML tagleri kullanmak. Bana sorarsanız HTML yazmak daha kolay.

source code
source code