React Nedir? React ile Site Nasıl Oluşturulur?
React, açık kaynaklı bir JavaScript kütüphanesidir. Özellikle kullanıcı arayüzü (UI) tasarımında etkili bir şekilde kullanılan bir kütüphanedir. Bu kütüphane, özellikle tek sayfa uygulamaları (Single Page Applications – SPA) geliştirmek için yaygın olarak tercih edilir.
React, bileşen tabanlı bir yaklaşım sunar. Uygulamanızı küçük, bağımsız ve tekrar kullanılabilir bileşenlere bölersiniz. Her bir bileşen, kendi içinde durumu (state) yönetebilir ve kullanıcı etkileşimlerine yanıt verebilir. Bu modüler yapı, geliştirme sürecini daha düzenli ve sürdürülebilir kılar.
React aynı zamanda “sanal DOM” (virtual DOM) konseptini kullanır. Bu, sayfanın sadece değişen kısımlarını güncelleyerek performansı artırır. React uygulamalarının verimli ve hızlı olmasını sağlar.
React, JSX (JavaScript XML) adı verilen bir sözdizimini kullanır. JSX, JavaScript ve HTML’yi bir araya getirerek daha okunabilir ve anlaşılır bir kod yazmanıza olanak tanır.
React, geniş bir topluluk tarafından desteklenir ve yaygın olarak kullanılan bir teknoloji haline gelmiştir. Başta web uygulamaları olmak üzere mobil uygulamalar da dahil olmak üzere çeşitli platformlarda kullanılabilir. “React Nedir?” sorusuna detaylı cevap verdikten sonra React’in temel özeliklerini inceleyebiliriz.
React'in Temel Özellikleri
“React Nedir?” sorusuna cevap vererek React’in Facebook tarafından geliştirilen ve açık kaynaklı bir JavaScript kütüphanesi olan bir teknolojisi olduğunu gördük. Kullanıcı arayüzü tasarımında etkili bir şekilde kullanılan bu kütüphane, bileşen tabanlı yapısı, sanal DOM kullanımı ve tek yönlü veri akışı gibi temel özellikleri ile dikkat çeker. Şimdi, React’in bu temel özelliklerine daha yakından bakalım.
Bileşen Tabanlı Yapı
React, uygulamayı küçük ve bağımsız bileşenlere bölen bir bileşen tabanlı yapı sunar. Her bir bileşen, kendi içinde durumu (state) yönetebilir ve kendine özgü bir davranışa sahip olabilir. Bu, kodun modüler ve sürdürülebilir olmasını sağlar.
Sanal DOM (Virtual DOM)
React, sayfadaki değişiklikleri takip etmek ve sadece güncellenen kısımları gerçek DOM’a uygulamak için sanal DOM kullanır. Bu, uygulamanın daha hızlı çalışmasını sağlar. Çünkü tüm DOM manipülasyonları gerçekleşmeden önce bir sanal temsil oluşturulur ve sadece değişiklikler uygulanır.
JSX (JavaScript XML)
JSX, JavaScript ve HTML’nin bir kombinasyonudur. React uygulamalarında kullanılan JSX, kodun daha açık ve anlaşılır olmasını sağlar. JSX ifadeleri, React elementlerini oluşturmak için kullanılır.
Tek Yönlü Veri Akışı
React, veri akışını genellikle tek yönlü (one-way) tutar. Veri, üst düzey bileşenlerden alt düzey bileşenlere doğru bir yönde akar. Bu, uygulamanın durumunun daha öngörülebilir ve hata ayıklamanın daha kolay olmasını sağlar.
Bağımsız Modül Geliştirme
React, bağımsız ve tekrar kullanılabilir bileşenlerin geliştirilmesini teşvik eder. Bu, bir bileşeni diğer uygulamalarda veya projelerde kullanmak için kolaylık sağlar.
Canlı ve Hızlı Güncellemeler
Sanal DOM’un kullanılması, sayfadaki sadece değişen kısımların güncellenmesini sağlar. Bu da uygulamanın daha hızlı ve daha verimli olmasına yardımcı olur.
Geniş Topluluk Desteği
React, büyük ve aktif bir topluluğa sahiptir. Bu topluluk, belgeler, kütüphaneler, eğitim kaynakları ve sorun giderme konusunda geniş bir destek sunar.
React Router
React Router, React uygulamalarında sayfa yönlendirmesi ve gezinme için kullanılan bir pakettir. Bu, tek sayfa uygulamalarında (SPA) çok sayfalı uygulama hissiyatını sağlamak için kullanılır.
“React Nedir?” sorusundan sonra temel özelliklerini inceleyerek React’in bu özellikleri sayesinde modern ve güçlü web uygulamalarının geliştirilmesinde yaygın olarak tercih edilen bir kütüphanedir.
React Bileşenleri Nedir?
React bileşenleri, React uygulamalarında kullanılan temel yapı taşlarıdır. Bir React uygulaması genellikle bir veya daha fazla bileşen içerir. Bileşenler, kullanıcı arayüzünü oluşturan, yöneten ve yeniden kullanılabilir parçalardır. React bileşenleri iki ana türde olabilir: fonksiyonel bileşenler ve sınıf bileşenleri. “React Nedir?” sorusuna tam kapsamlı cevap bulabilmek içlin bileşenlerini de detaylı olarak inceleyelim.
Fonksiyonel Bileşenler
- ES6 ile gelen fonksiyonel bileşenler, JavaScript fonksiyonları olarak tanımlanır.
- Genellikle “function” kelimesiyle tanımlanır ve bir veya birden fazla prop (özellik) alabilir.
- State (durum) yönetemez, ancak “Hooks” kullanarak durum ve diğer React özelliklerini kullanabilir.
- Genellikle basit bileşenler için tercih edilir.
Sınıf Bileşenleri
- ES6 sınıflarıyla tanımlanan sınıf bileşenleri, React.Component sınıfından türetilir.
- State (durum) yönetebilir ve yaşam döngü metodlarını kullanabilir.
- Genellikle daha karmaşık bileşenler veya durum yönetimi gerektiren durumlar için kullanılır.
Bileşenler, modüler bir yaklaşım sunarak uygulamayı parçalara bölmeyi ve her bir parçayı daha yönetilebilir hale getirmeyi sağlar. Bu da geliştirme sürecini daha düzenli ve sürdürülebilir kılar.
React ile Site Nasıl Oluşturulur?
Node.js ve npm Kurulumu
Bilgisayarınıza Node.js ve npm’i indirip yükleyin. Resmi Node.js web sitesinden indirebilirsiniz.
Create React App Kurulumu
Terminal veya komut istemcisine npx create-react-app my-react-app komutunu yazarak “create-react-app” aracını kurun ve yeni bir React uygulaması oluşturun.
Proje Klasörüne Geçiş ve Başlatma
Oluşturulan proje klasörüne geçmek için cd my-react-app komutunu kullanın.
React uygulamanızı başlatmak için npm start komutunu kullanın.
Uygulama Geliştirme
“src” klasörü içindeki dosyaları düzenleyerek uygulamanızı geliştirin.
Ana bileşen dosyası genellikle “src/index.js” olarak adlandırılır.
Bileşenler ve Sayfalar
Yeni bileşenler oluşturmak için “src” klasörü içinde yeni dosyalar oluşturun.
Sayfaları yönetmek için farklı bileşenleri bir araya getirin.
Stil ve Tasarım
CSS dosyalarını kullanarak stil ve tasarım ekleyin.
İhtiyaca bağlı olarak CSS preprocessors veya CSS-in-JS kütüphanelerini kullanabilirsiniz.
Paketleme ve Yayınlama
Projenizi geliştirdikten sonra npm run build komutu ile uygulamanızı paketleyin.
Oluşan “build” klasöründeki dosyaları web sunucusuna yükleyerek veya servis sağlayıcınızın sağladığı yönergeleri takip ederek uygulamanızı yayınlayın.
Bu adımları takip ederek, React kullanarak web sitenizi oluşturabilir ve geliştirebilirsiniz.
Sonuç olarak “React Nedir?” sorusuna cevap vermeye çalıştık ve React, açık kaynaklı ve modüler yapısı sayesinde geliştiricilere esneklik sağlayan güçlü bir JavaScript kütüphanesidir. Bileşen tabanlı yaklaşımı, sanal DOM kullanımı ve kolay öğrenilebilir sözdizimi ile React, modern web uygulamalarının hızlı ve verimli bir şekilde geliştirilmesine olanak tanır.
Bizi Instagram‘dan takip edebilirsiniz.
