React Nedir? Başlangıç Rehberi, Temel Kavramlar ve Örnek
Kodlar
Giriş
React, modern web uygulamaları geliştirmek için kullanılan
açık kaynaklı bir JavaScript kütüphanesidir. Facebook tarafından geliştirilen
React, kullanıcı arayüzlerini oluşturmak, yönetmek ve etkileşimli hale getirmek
için güçlü bir araçtır. Bu makalede, React'in temel kavramlarına odaklanarak,
başlangıç seviyesinde bir anlatım olacaktır. Ayrıca, React
ile ilgili örnek kodlar da sunacağım.
React Nedir?
React, kullanıcı arayüzlerini geliştirmek için kullanılan
bir JavaScript kütüphanesidir. Web uygulamaları, React'i kullanarak kullanıcı
arayüzlerini modüler bileşenlere bölebilirler. Her bileşen, kendi içinde
mantığı ve görünümü bir arada tutar. Bu, uygulama geliştirmeyi daha
yönetilebilir ve ölçeklenebilir hale getirir.
React'in Temel Kavramları:
1. Bileşenler (Components)
React uygulamaları, bileşenlerden oluşur. Bileşenler,
kullanıcı arayüzünün farklı parçalarını temsil ederler. Örneğin, bir düğme, bir
form veya bir haber kartı birer bileşen olabilir. Bileşenler, kendi içlerinde
state (durum) ve props (özellikler) tutabilirler.
2. JSX (JavaScript XML)
JSX, React uygulamalarında kullanılan bir söz dizimidir.
JSX, JavaScript'e benzer bir şekilde görünse de, HTML benzeri bir söz dizimi
kullanır. Bu sayede, React bileşenlerini oluşturmak daha kolay ve okunaklı hale
gelir. Örnek bir JSX kodu:
const element = <h1>Mesajınızı buraya
yazın</h1>;
3. State ve Props
State, bir bileşenin içindeki veriyi ve bileşenin nasıl davranacağını tanımlar. Props ise bir bileşene dışarıdan veri iletmek için kullanılır. State, bileşen içinde değiştirilebilirken, props dışarıdan veri almak için kullanılır.
4. React ve Virtual DOM
React, Virtual DOM (sanal DOM) adı verilen bir mekanizma kullanarak verimli bir şekilde güncelleme işlemlerini gerçekleştirir. Bu, tüm sayfanın yeniden çizilmesi yerine sadece değişen bileşenlerin güncellenmesini sağlar ve uygulamanın daha hızlı çalışmasını sağlar.
React Başlangıç Adımları
React ile başlamak için aşağıdaki adımları takip edebilirsiniz:
Adım 1: Node.js ve npm Kurulumu
React uygulamalarını geliştirmek için Node.js ve npm (Node Package Manager) gereklidir. Node.js'i resmi web sitesinden indirip kurabilirsiniz. Node.js yükledikten sonra, npm otomatik olarak gelir.
Adım 2: Yeni Bir React Uygulaması Oluşturma
Yeni bir React uygulaması oluşturmak için "Create React App" adlı komutu kullanabilirsiniz. Aşağıdaki komut, yeni bir proje klasörü oluşturur: