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.

The post JSX Nedir? React JS Uygulamasına Genel Bakış appeared first on Dinamik Network.

React JS kullanıcılar için arayüz oluşturmamızı sağlayan Javascript kütüphanelerinden birisidir. Facebook tarafından geliştirilen react.js aynı zamanda açık kaynaklı bir kütüphanedir. Günümüzde popüler olarak kullanılan bir kütüphane olup performanslı ve maliyetsizdir.

Element bazlı oluşturularak Javascript’in karmaşık yapısını düzenler, kod okunabilirliğini ise kolaylaştırır. Gerçek zamanlı güncellenebilen web siteler oluşturmanızı sağlar. Bu yapıya hot reloading denir.

React dünyasına giriş yaparken yeni birkaç terimle karşılaşacağız. Flux mimarisine benzeyen tek yönlü veri akışını, javascript içerisinde html kodlarını yazdığımız jsx formatını. Detaylı olarak inceleyeceğimiz componentlerden(bileşenler), bu componentlerin arasında iletişimi sağlayan Props yapısını ve React koleksiyonlarının en küçük birimi olan elementleri detaylı inceliyor olacağız.

React Projesi Oluşturma

React uygulamasını kurmak paket yönetici NPM’e ihtiyacımız var. Bunun için bilgisayarımıza Node.Js yüklememiz gerekmektedir. Buradan kolaylıkla node.js kurulumunu yapabilirsiniz.

Kurulum tamamlandıktan sonra react uygulamasını oluşturmak için aşağıdaki komut satırını yazmanız yeterli olacaktır.

npx create-react-app my-app

<img class="alignnone wp-image-3480" src="https://dinamiknetwork.com/wp-content/uploads/2021/12/react_create_project.png" alt="" width="719" height="216" />

Projenin içerisine baktığımız zaman node_modules, public,src klasörlerini görmüş olacağız. Node_modules klasörü içerisinde yüklediğimiz kütüphaneleri bulabiliriz. Public klasörü html, image ve iconların bulunduğu klsörürümüzdür. Src klasöründe ise işlemleri yaptığımız js dosyalarımız bulunmaktadır. Package.json çalıştırdığımız scriptler ve kullandığımız kütüphanelerin tanımlandığı
dosyadır.

Kurduğumuz bu react uygulamamızı çalıştırmak için proje dizinine gidip npm start komutunu kullanmamız yeterli olacaktır.

The post React JS Nedir? React Projesi Oluşturma appeared first on Dinamik Network.