React.js, kullanıcı arayüzü (UI) oluşturmak için kullanılan bir JavaScript kütüphanesidir.
Facebook tarafından geliştirilen React, bileşen tabanlı bir yaklaşım sunar ve verimli bir şekilde dinamik ve etkileşimli web uygulamaları oluşturmayı amaçlar.
React, sanal DOM (Virtual DOM) kullanarak sadece güncellenen bileşenlerin yeniden render edilmesini sağlar, bu da performansı artırır.
React.js’in temel özelliklerinden bazıları şunlardır:
- Bileşen Tabanlı Yaklaşım: React, uygulamanızı küçük ve yeniden kullanılabilir bileşenlere ayırmanıza olanak tanır. Bileşenler, kendilerine ait durumları (state) ve özellikleri (props) olan bağımsız yapılardır. Bu sayede, bileşenleri bir araya getirerek karmaşık bir UI oluşturabilirsiniz.
- Sanal DOM (Virtual DOM): React, sanal DOM kullanarak performansı optimize eder. Sanal DOM, gerçek DOM ağacının bir kopyasıdır ve React bileşenlerinin durumu değiştiğinde gerçek DOM ağacıyla karşılaştırılır. Yalnızca değişiklikleri içeren kısımlar gerçek DOM’a uygulanır, bu da gereksiz yeniden render işlemlerini minimize eder ve uygulamanın daha hızlı çalışmasını sağlar.
- JSX: React, JavaScript kodunun içine HTML benzeri bir sözdizimi olan JSX‘i kullanır. JSX, React bileşenlerini oluşturmayı ve bileşenler arasında veri akışını sağlamayı kolaylaştırır. JSX, aynı zamanda React bileşenlerini okunabilir ve kolayca anlaşılabilir hale getirir.
Birinci ders adımında, React.js ile basit bir fonksiyonel bileşen oluşturarak başlayabilirsiniz.
İşte bir örnek:
1. Adım: Proje Oluşturma İlk adımda, React.js ile çalışmak için bir proje oluşturmanız gerekmektedir. Node.js kurulu olduğundan emin olun ve aşağıdaki komutu bir komut satırında çalıştırarak yeni bir React projesi oluşturun:
npx create-react-app my-app
Bu komut, “my-app” adında yeni bir React projesi oluşturacaktır. Oluşturulan projenin dizinine geçiş yapın:
cd my-app
2. Adım: Fonksiyonel Bileşen Oluşturma İkinci adımda, src
klasörü içinde yeni bir dosya oluşturun ve bu dosyaya Example.js
adını verin. Ardından, aşağıdaki kodu Example.js
dosyasına yapıştırın:
import React from 'react';
const Example = () => {
return (
<div>
<h1>Merhaba, Dünya!</h1>
<p>Bu bir React fonksiyonel bileşenidir.</p>
</div>
);
}
export default Example;
Bu örnekte, Example
adında bir fonksiyonel bileşen oluşturduk. Bu bileşen, bir div
içinde bir başlık (h1
) ve bir paragraf (p
) içerir.
3. Adım: Ana Bileşende Kullanma Üçüncü adımda, src
klasörü içinde yer alan App.js
dosyasını açın ve Example
bileşenini ekleyin:
import React from 'react';
import Example from './Example';
const App = () => {
return (
<div>
<h1>React.js Örneği</h1>
<Example />
</div>
);
}
export default App;
Bu örnekte, App
adında bir bileşen oluşturduk ve Example
bileşenini içine ekledik.
4. Adım: Uygulamayı Başlatma Son adımda, komut satırında aşağıdaki komutu çalıştırarak React uygulamasını başlatın:
npm start
Bu komut, React uygulamanızı yerel sunucuda (localhost) çalıştıracak ve tarayıcınızda görüntülenecektir.
Artık tarayıcınızda React uygulamanızı görebilirsiniz. Uygulama, Example
bileşenini içeren bir başlık ve paragraf içeren bir sayfa gösterecektir.
Bu örnek, React.js’deki temel bileşen oluşturma ve kullanma konusunda size bir fikir verecektir. İlerleyen adımlarda, React.js ile daha karmaşık bileşenler oluşturmayı, bileşenler arasında veri akışını yönetmeyi ve daha fazlasını öğreneceksiniz.