İlginizi Çekebilir
  1. Ana Sayfa
  2. Javascript
  3. JSX Nedir? React JS Uygulamasına Genel Bakış

JSX Nedir? React JS Uygulamasına Genel Bakış

jsx_nedir

JSX Nedir?

Javascript extensiondır. Javascript içerisinde html sytanx yapısını kullanmamızı sağlayan bir yapıdır. JSX, basit html kodlarında bile kendi DOM’larını değiştirip geliştireceği bir yapı sunar.

DOM (Document Object Model) web sayfalarının bize göründüğünü ve HTML elemanlarının bir arada bulunmasını sağlayan bir yapıdır. Kullanıcı web sayfası üzerinde herhangi bir komut girdiğinde DOM tekrar güncellenir. Bu durum performans açısından uygulamayı zayıflatır. Burda React’ın kullandığı VirtualDOM devreye girer. React uygulamasında ne zaman bir değişiklik olursa sadece değişiklik yapılan alan güncellenir ve DOM’a aktarılır.

VirtualDOM, DOM’un value/key şeklinde memoryde bulunmuş halidir. DOM’un bir kopyasıdır.

Kullanımı ve Kuralları;

  • Component, Return içerisinde tek bir parent element kullanabilir.Div element’i kullanılıyor ise ikinci bir div kullanımına izin vermemektedir.
  • Özel keywordler bulunmaktadır. Örneğin div içerisinde class attribute tanımı için className kullanılır.
  • Jsx formatında Javascript ifadeleri { } süslü parantez kullanarak yapılır. Örneğin bir p elementi içerisinde hesaplama yapmak istediğimizde <p> { 5+ 5 } </p> kullanarak 5+5 işleminin çıktısını 10 alabiliriz.
  • Javascriptte tanımladığımız sabit bir değerin gösterimi içinde aynı şekilde { } süslü parantez kullanarak yaparız. Süslü parantez kullanmadan gösterimi sağlarsak, JSX formatı değeri yazı olarak algılar.

React Uygulamasına Genel Bakış

React uygulamasında birbirine benzer klasörler bulunur. Bunlar src(source) ve public(kaynak) klasörleridir.

React web uygulamasında browser üzerinden bir sayfaya açtığımızda index.html sayfasının içinde ne olduğunu görürüz. Index.html incelediğimizde ise sadece uygulamanın başlığını ve body içerisinde yer alan <div id=”root”></div> görürüz. Uygulamanın içeriğini dolduran bir element göremeyiz.

Src klasöründeki index.js içerisinde ID’si root olan html çağrılıyor. Burda ReactDOM’un render metodu tarayıcıda bir render etme işlemi yapacaktır. ReactDOM, react-dom modülü tarafından import edilmiştir.

Bu render etme işlemi <App/> componenti kullanarak yapılmaktadır. Bu componentin kaynağı da app.js olarak belirlenmiştir.

App.js klasörüne baktığımızda html sayfasında gördüğümüz tüm elementleri burda görüyoruz. Logo, başlıkları ve paragrafları. Bu durumda component olarak oluşturulan app.js’ın html içerisinde nasıl tetiklendiğini gözlemledik.

 

Yorum Yap

Yorum Yap