Neden Herkes React Yazıyor ? 🖥️

Published in

Bursa Bilişim Topluluğu

7 min readJan 31, 2024

Merhaba sevgili geliştirici dostlarım, kahveler hazırsa bizde hazırırız.🚀 Bugün konumuz React. İyi okumalar diliyorum 👩🏻‍💻

✨ Bu yazıdaki konu başlıkları:

React Nedir ?
Neden React?
Vanilla Js Nedir?
Geliştirici Ortamı:VSCode
İlk React Uygulaması
Vite Nedir ?
Vite İle İlk React Uygulaması

✨React Nedir ?

React, web ve native kullanıcı arayüzleri için kullanılan güçlü bir JavaScript kütüphanesidir. JavaScript ile yazılan componentler bir araya getirilerek kullanıcı arayüzleri oluşturulur.

İlk olarak 2011 yılında Facebook tarafından web sitelerinin performansını artırmak için geliştirildi.

2023 yılında en çok kullanılan JavaScript kütüphanesi haline geldi. Peki neden diğer kütüphanelerden daha çok kullanılıyor ? Hadi gelin React’a biraz daha yakından bakalım.

✨Neden React ?

Öğrenme Kolaylığı:

React’ın öğrenme kolaylığı temel avantajlarından biridir. Diğer framework’lerden daha çok kullanılmasının en büyük sebebi yazılıma başlayan geliştiricilerin daha hızlı öğrenebiliyor olmasıdır.

React bağımlılık enjeksiyonu (dependency injection) gibi özellikleri doğal olarak içerir, bu gibi etkenler yeni başlayanlar geliştiriciler için öğrenme süresini azaltır.

Facebook:

React, Facebook’ta bir yazılım mühendisi olan Jordan Walke tarafından geliştirildi ve “FaxJS” adlı React’in erken bir prototipini yayınladı. PHP için bir HTML bileşen kütüphanesi olan XHP’den etkilendi. İlk olarak 2011 yılında Facebook’un Haber Kaynağında ve daha sonra 2012 yılında Instagram’da kullanıldı.

Facebook’un bu kütüphaneyi benimsemesi ve açık kaynak topluluğunu teşvik etmesi, React’in popülerliğini artıran önemli etkenlerden biridir.

Community ve Ekosistem:

Güçlü bir topluluk desteğine sahiptir, bu da açık kaynak yapısına atfedilebilir. Bir sorunla karşılaşsanız, bir hata olsa, topluluk yardım sağlayacaktır.

Sanal DOM (Virtual DOM):

React tarafından oluşturulan sanal DOM’un gerçek DOM’a bağlanmasını sağlayan bir modüldür. Bu modül, React uygulamalarının bir web tarayıcısında veya başka bir DOM ortamında çalışmasını mümkün kılar.

React, sanal DOM üzerinde çalışır ve değişiklikleri takip eder. React DOM ise bu değişiklikleri gerçek DOM’a uygular ve kullanıcı arayüzünü günceller. Özetle, React DOM, React uygulamalarının web tarayıcısındaki HTML DOM ile etkileşim kurmasını sağlar. Bu sayede , sayfa güncellemelerini daha hızlı ve etkili hale getirir.

DOM, web sayfalarındaki içeriği temsil eden bir programlama arayüzüdür ve bu içeriği değiştirmek, güncellemek veya manipüle etmek için kullanılır.
JavaScript gibi programlama dilleri, DOM’u kullanarak web sayfalarındaki içeriği dinamik olarak değiştirebilir ve etkileşim sağlayabilir. Örneğin, DOM üzerindeki bir öğeyi seçmek, içeriğini değiştirmek veya yeni öğeler eklemek gibi işlemler yapılabilir.

SEO Dostu:

React kütüphanesi SEO dostudur ve render hızına odaklanır. JavaScript tabanlı web siteleri, DOM yeniden oluşturma süresi nedeniyle bazı sorunlarla karşılaşabilir. Sanal DOM ve sunucu tarafında renderleme sayesinde, arama motorları içeriği doğrudan JavaScript kullanmadan render etmek zorunda kalmaz.

Render : Bir web uygulaması veya sitesi geliştirildiğinde, sayfa içeriği genellikle kullanıcıya gösterilebilmek için HTML, CSS ve JavaScript kullanılarak tarayıcıda “render” edilir. Bu işlem, sayfanın görsel olarak nasıl görüneceğini belirler.

Component Tabanlı Yapı:

React, component (bileşen) tabanlı bir yapıya sahiptir. Bu, uygulamayı küçük, bağımsız ve yeniden kullanılabilir parçalara bölmeyi sağlar. Her bir component, kendi iç durumunu yönetebilir ve bağımsız olarak çalışabilir. Bu sayede uygulamayı daha küçük parçalara ayırıp daha yönetilir bir modüler yapı halinde kullanılır.

Componentler Arası İletişim:

React, component’ler arası iletişimi kolaylaştırır. Veri akışı genellikle üstten aşağıya (parentten child’a) doğrudur, ancak gerektiğinde veri akışını tersine çevirmek de mümkündür.

Test Edebilme Özelliği:

React uygulamaları test etmek için oldukça kolaydır. Geliştiricilere yerel araçlarla kodlarını test etme ve hata ayıklama imkanı sunar. Jest ve Cypress, React uygulamalarını test etmek için iyi bilinen bir araçtır.

JSX:

JSX, JavaScript ve HTML benzeri bir sentaks sunar. Bu, kodunuzu daha okunabilir ve anlaşılır kılar. Aynı zamanda componentler’in daha kolay oluşturulmasını sağlar.

Geliştirici Araçları:

React, geliştiricilere yardımcı olmak için birçok geliştirme aracı ve bağımlılık sağlar. Bunlar arasında React Developer Tools ve Redux Developer Tools bulunmaktadır ki bunlar, hem Google Chrome hem de Mozilla Firefox için mevcut olan tarayıcı eklentileridir. Bu araçlar, kod içinde hataları tespit eder ve hataları düzeltir.

Clean Abstraction:

React, karmaşık iç işlevleriyle sizi rahatsız etmez. Dahili işlemler, örneğin Digest döngüleri, kullanıcıların öğrenmesi ve anlaması için zorunlu değildir.

“Digest döngüleri” , AngularJS (Angular 1) framework’ünün içinde yer alan bir kavramdır. AngularJS uygulamalarında, modeldeki değişikliklerin algılanması ve bu değişikliklerin kullanıcı arayüzüne yansıtılması için “digest döngüsü” kullanılır. İşte bu sürecin adıdır.

Çok Platformlu İşlevsellikler :

React’ın en çarpıcı özelliklerinden biri mobil uygulama geliştirmek amacıyla oluşturulan React Native platformudur. React Native cross-platform çalışır . Yani hem iOS hem de Android için uygulamalar geliştirmeye olanak sağlar.

Yüksek Uyumluluk :

React, diğer JS kütüphaneleriyle sorunsuz bir şekilde çalışacak şekilde oluşturulmuş ve web sitesi oluşturmak için ek araçların kullanımını sınırlamaz. React’i third-party kütüphanelerle kombine etmek, web siteleri oluşturmayı kolaylaştırır.

✨Vanilla JS Nedir ?

Vanilla JS, JavaScript’in saf ve temel hali olarak adlandırılan bir terimdir. Bu terim, JavaScript kütüphaneleri veya framework’leri kullanmadan sadece JavaScript dilini kullanarak web uygulamaları geliştirmeyi ifade eder. Vanilla JS’in geliştiriciler tarafından kullanılmasının sebebi kolay öğrenebilir olmasıdır fakat karmaşık projelerde kısıtlayıcı olabilir, kod tekrarlarına sebep olabilir vs. gibi dezavantajlara sahiptir.

✨Geliştirici Ortamı: VSCode

Visual Studio Code (VSCode), geliştiriciler arasında oldukça popüler olan ve birçok avantaj sunan bir metin düzenleyici ve entegre geliştirme ortamıdır. İşte VSCode’u kullanmanın bazı nedenleri:

Ücretsiz ve Açık Kaynaklı: VSCode ücretsiz bir yazılımdır ve kaynak kodları açıktır. Bu, herkesin yazılımı indirip kullanabilmesini sağlar.
Hafif ve Hızlı: VSCode, kullanıcı dostu arayüzüne rağmen hafif bir uygulamadır. Hızlı başlatılır ve düşük sistem kaynakları kullanır.
Genişletilebilirlik: VSCode, birçok programlama dili ve çerçeve için destek sağlar. Ayrıca, geniş bir eklenti ekosistemine sahiptir, bu da kullanıcıların iş akışını ve deneyimini özelleştirmelerine olanak tanır.
Zengin Özellik Seti: VSCode, geliştiricilere hızlı kod tamamlama, hata ayıklama, yerleşik terminal, git entegrasyonu ve daha birçok özellik sunar.
Platform Bağımsız: VSCode Windows, macOS ve Linux üzerinde çalışabilir. Bu, geliştiricilerin farklı işletim sistemlerinde tutarlı bir deneyim yaşamasını sağlar.
Topluluk Desteği: VSCode’un büyük ve aktif bir topluluğu vardır. Sorularınızı sormak, yardım almak ve deneyimlerinizi paylaşmak için çeşitli platformlarda (GitHub, Stack Overflow, vb.) topluluk bulunmaktadır.
Sürekli Güncellemeler: Microsoft, VSCode’u sürekli olarak günceller ve yeni özellikler ekler. Bu, geliştiricilere her zaman en son teknolojileri ve özellikleri kullanma olanağı tanır.

VSCode’un bu avantajları, geliştiriciler arasında yaygın olarak tercih edilmesine neden olur. Ancak, her geliştiricinin tercihi farklı olabilir, bu nedenle farklı ihtiyaçlara ve tercihlere sahip olduğunuzda diğer geliştirme ortamlarını da değerlendirmekte fayda vardır.

✨İlk react uygulaması

İlk react uygulamanızı oluşturmak için iki yol izleyebilirsiniz.

VSCode kurup geliştirici ortamında çalışabilirsiniz ya da kurulum yapmadan ilk projenizi oluşturmak isterseniz arama motorunuzda react.new yazıp tıklamanız yeterli olacaktır. Codesandbox’ sizin için yeni bir react projesi oluşturacaktır.

VSCode kurup çalışmak isterseniz önce VSCode daha sonra Nodejs kurmanız gerekiyor. Basit adımlarla hemen kurulumlara bakalım.

VSCode kurulum için web sitesini ziyaret edip sizin için uygun olan seçimi yaptıktan sonra kuruluma başlayabiliriz.

VSCode yaptığımız gibi Nodejs’in web sitesini ziyaret ettikten sonra uygun olan seçimi yapıp kuruluma başlıyoruz.

Kurulumları yaptıktan sonra ilk projemizi oluşturmak için hazırız.

npx create-react-app proje-adi

Komut satırını terminalde çalıştıralım.

Prosesleri onayladıktan sonra projemiz oluşacak.

Projemiz oluştu. Şimdi ilk projemizi çalıştırma zamanı

cd first-project
npm start

Komut satırından proje dizinine gittikten sonra ‘npm start’ diyerek ilk uygulamamız çalıştırabiliriz.

İlk uygulamamız çalıştı ve bu şekilde gözüküyor.

✨Vite Nedir ?

Vite, JavaScript topluluğunda kabul görülmüş yeni bir yapı aracıdır. Hız odaklı olarak tasarlanmış olup geliştirmeye temelde farklı bir yaklaşım sunmaktadır. Vite, ES modüller gibi modern tarayıcı özelliklerinden faydalanarak son derece hızlı bir geliştirme deneyimi sunmaktadır.

Neden Vite ? :

Hızlı Geliştirme: Vite, geliştirme sürecinde paketleme ihtiyacını ortadan kaldırmak için native ES modülü içe aktarmalarından yararlanan son derece hızlı geliştirme sunucusuyla tanınır.
Esnek Yapılandırma: Vite, projenizin kurulumunun her yönünü özelleştirmenize olanak tanıyan esnek bir yapılandırma sistemine sahiptir. Bu, geniş bir projeler yelpazesi için uygundur.
Verimli Derlemeler: Vite, ağaç sallama (tree-shaking) ve kod bölme (code-splitting) ile optimize edilmiş üretim derlemeleri oluşturur, bu da daha küçük paket boyutları ve artırılmış performans sağlar.
Framework Desteği: Vite, aslında Vue.js için inşa edilmiş olmasına rağmen, React ve Svelte gibi diğer framework’leri de mükemmel bir şekilde destekler, bu da onu çok yönlü bir seçenek haline getirir.
Eklenti Ekosistemi: Vite’in eklenti sistemi, çeşitli araçların kolay entegrasyonuna izin verir, bu da esneklik ve genişletilebilirlik sağlar.

✨Vite İle İlk React Uygulaması

npm create vite@latest

Bu komut satırı ile projemizi oluşturmaya başlıyoruz.

Prosesi onayladıktan sonra projeyi isimlendiriyoruz.

Proje için kullanmak istediğimiz framework’u ve varyantı seçtikten sonra projemiz oluştu.

cd vite-project
npm install
npm run dev

Komutları çalıştırdıktan sonra projemiz çalışmaya başladı.

İlk Vite-React projemizin çıktısına göz atalım.

Eğer yazıyı beğendiyseniz, diğer içeriklerime göz atmayı unutmayın. Keyifli okumalar! 📚
Bana destek olmak için kahve ısmarlayabilirsiniz 🌟
Benimle iletişime geçmek isterseniz: Esra Nur Mülkpınar