React Nedir ve Bir React Projesine Nasıl Başlarız?
React Nedir?
React, kullanıcı arayüzlerini geliştirmek için Facebook tarafından geliştirilen bir JavaScript kütüphanesidir. Aynı zamanda verilerin değişmesi durumunda görsel içeriği dinamik olarak güncelleme kapasitesi sunar. Yani tasarım modelinde “View Katmanı’na “ odaklanır ve böylece daha hızlı ve verimli uygulamalar yapmanıza olanak tanır.
React, Virtual DOM denilen sanal bir DOM kullanır. Peki bu DOM ne işe yarar? Virtual DOM, uygulamamızın performansını artırır. Gerçek DOM’u güncellemektense, sanal DOM’u güncellemek daha hızlıdır. Yani React, Virtual DOM mimarisini kullanarak sadece değişikliğin olduğu yeri tekrar render eder. İlerleyen süreçte bunu daha iyi kavrayacağız.
Real DOM | Virtual DOM Farkı Nedir?
Bir web sayfasına girip developer tool’u açtığımızda karşımıza çıkan HTML etiketlerine Real DOM deriz yani gerçek DOM.
Virtual DOM ise bu Real DOM’un aynısıdır yani bir kopyasıdır diyebiliriz. Kopya mı nasıl yani 🙄? Real DOM’un klonu, React tarafında bir Javascript objesi olarak tutulur. Bir güncelleme işlemi olduğu zaman React’ın kendi içerisindeki farklılık algoritmaları çalışır ve Real DOM ile Virtual Dom karşılaştırılır, eğer bir farklılık varsa o farklılık getirilip Real DOM’a yansıtılır. Aslında Virtual DOM’un amacı gereksiz renderların önüne geçmektir. Yukarıda da bahsettiğim gibi sadece güncellenmesi gereken alanların güncellenmesini sağlamaktır.
Bir React Projesine Nasıl Başlarız?
React ile çalışmaya başlamadan önce Node.js kurulumu yapılmalıdır. Peki Node.js sunucusuna neden ihtiyaç duyarız? Çünkü React paket servisini kullanmak için Node.js’in paket servisi olan npm üzerinden indirilip kurulur.
Burada LTS ve Current olarak iki seçenek bulunmaktadır. LTS, uzun vadeli destek yani bütün testlerin yapıldığı sorunsuz olarak çalışabileceği anlamına gelir. Current ise yeni özellikler veya eklentilerin eklendiği kullanıcının deneyimine sunulabileceği bir pakettir. Production ortamı için LTS’in kullanılması önerilir.
Npm ve Node.js kurulumu gerçekleştikten sonra React projesi için komut istemini açıp başlayabiliriz. Sırasıyla aşağıdaki komutları yazıp enterlayın;
npm install -g create-react-appnpx create-react-app project-name //Proje adı: project-nameNOT: Eğer npx bilgisayarınızda kurulu değilse aşağıdaki gibi kurabilirsiniz.
yarn global add npxReact uygulaması nasıl çalıştırılır?
npm start //3000 numaralı port üzerinde çalışıyor olacak.
Yukarıda App adında bir bileşen görüyoruz. Bileşenleri (component) React’in yapı taşları olarak düşünebiliriz. Yani bir bileşen aslında bir JavaScript sınıfı (class) ya da fonksiyonudur. Örneğin, React ekibi Facebook’da 50 binden fazla bileşen kullanıldığını söylüyor. Bu durumda şu sonucu çıkartabiliriz, tasarıma bağlı olarak bu sayılar büyüyebilir ya da küçülebilir. Componentler konusunda bu durumu daha kapsamlı açıklayacağız.
create-react-app ile bir React uygulaması oluşturduğumuzda aşağıdaki gibi bir klasör yapısına sahip oluruz.
src klasörü altında olan App.js ekranda gösterilen bileşen, index.js React uygulamasının başlangıç noktasıdır. index.js bütün React uygulamasının nerede render edileceğini belirler. Bu dosyaya gidip incelediğimizde 'root' id ile belirtilmiş bir HTML etiketine bütün uygulamanın render edileceğini görebiliriz.
Create React App içerisinde sunulan bazı özellikler:
Hot reloading: kod üzerindeki değişikleri kaydettikten sonra uygulamayı baştan başlatmadan değişikliklerin arayüze yansıması
ESLint: kodun belirli standartlara göre yazılmasını sağlayan modül
Canlı ortam (production) için kodun optimize edilmesi (build scripti aracılığıyla)
React kullanırken yardımcı olabilecek pluginler (eklentiler) :
- ES7 React/Redux/GraphQL/React-Native snippets : Bazı kısayollar ile React componentleri oluşturur ve React’i import ettirmek gibi kolaylıklar sağlayan bir eklentidir.
- React Developer Tools : developer tool’a girdiğimizde bize yol gösterici olacaktır.
React dünyasına hoş geldiniz. Umarım faydalı bir içerik olmuştur. Sevgiyle kalın hoşça kalın…
“Yazılımda kadın eli”
