React Nedir?

React, Facebook tarafından geliştirilen ve kullanıcı arayüzü oluşturmak için kullanılan JavaScript kütüphanesidir. Web uygulamaları geliştirmek için özellikle etkili olan React, bileşen tabanlı yapıya sahiptir ve bileşenler arasında verimli şekilde iletişim kurmayı sağlar. Virtual DOM kullanarak performansı artırır ve bileşen tabanlı yapı sayesinde kodun yeniden kullanılabilirliğini ve bakımını kolaylaştırır. Bu makalede, React’in temel prensipleri, kullanımı ve web uygulamalarında nasıl kullanılabileceği ayrıntılı ele alınacaktır. Ayrıca, React’in avantajları, popüler kullanım senaryoları ve geliştiricilerin verimliliğini artırmak için ipuçları da incelenecektir.

React Nedir?

React, Facebook tarafından geliştirilen JavaScript kütüphanesidir. Kullanıcı arayüzü oluşturmak için özellikle tek sayfa uygulamaları için kullanılır. React, bileşen tabanlı yapıya sahiptir, bu da uygulamayı bağımsız ve yeniden kullanılabilir parçalara ayırmanıza olanak tanır. Virtual DOM kullanarak performansı artırır ve verimli şekilde güncelleme yapabilir.

React Temel Özellikleri Nelerdir?

React’ın temel özellikleri şunlardır:

Bileşen Tabanlı Yapı: React, uygulamayı bağımsız ve yeniden kullanılabilir bileşenlere ayırarak geliştirmeyi sağlar.

Virtual DOM: React, Virtual DOM kullanarak sayfanın sadece değişen kısımlarını günceller, bu da performansı artırır.

JSX Sözdizimi: JSX, JavaScript’e HTML benzeri bir sözdizimi ekler, bu da bileşenleri tanımlamayı ve kullanmayı daha kolay hale getirir.

Tek Yönlü Veri Akışı: React, genellikle “props” olarak adlandırılan verilerin üstten alta doğru (parentten çocuğa) tek yönlü olarak iletilmesini teşvik eder.

Durum (State): Bileşenlerin içinde kullanılan durumlar, uygulamanın dinamik ve etkileşimli olmasını sağlar.

React Router: React uygulamalarında sayfa yönlendirme ve gezinme işlemleri için kullanılan bir kütüphanedir.

Lifecycle Metotları: Bileşenlerin oluşturulması, güncellenmesi ve yok edilmesi gibi yaşam döngüsü olaylarına tepki veren metotları içerir.

Flux ve Redux: React ile birlikte kullanılan durum yönetimi için Flux mimarisi veya Redux gibi kütüphanelerle birlikte çalışabilir.

Bu özellikler, React’ın güçlü ve esnek bir kullanıcı arayüzü geliştirme çerçevesi olmasını sağlar.

React Nasıl Kullanılır?

React, kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. React’i kullanmaya başlamak için aşağıdaki adımları takip edebilirsin:

1. Ortamı Hazırlamak

React ile geliştirme yapabilmek için Node.js ve npm (Node Package Manager) yüklü olmalıdır. Eğer yüklü değilse, Node.js resmi web sitesinden indirebilirsin.

2. Yeni React Projesi Oluşturmak

React projeni oluşturmak için create-react-app aracını kullanabilirsin. Komut satırında şu komutu çalıştır:

bash
npx create-react-app proje-adi
cd proje-adi
npm start

Bu komutlar, yeni bir React uygulaması oluşturur ve yerel sunucuda çalıştırır. Varsayılan olarak, uygulama http://localhost:3000 adresinde çalışır.

3. React Bileşenleri (Components)

React uygulamaları, bileşenlerden oluşur. Bileşenler, tekrar kullanılabilir ve bağımsız kod parçalarıdır. İşte basit bir bileşen örneği:

javascript
import React from 'react';

function MerhabaDunya() {
  return (
    <div>
      <h1>Merhaba, Dünya!</h1>
    </div>
  );
}

export default MerhabaDunya;

4. Bileşenleri Kullanmak

Oluşturduğun bileşenleri App.js dosyasına dahil edebilirsin:

javascript
import React from 'react';
import './App.css';
import MerhabaDunya from './MerhabaDunya';

function App() {
  return (
    <div className="App">
      <MerhabaDunya />
    </div>
  );
}

export default App;

5. State ve Props

React bileşenleri, dinamik veri yönetimi için state ve props kullanır. state, bileşen içinde yönetilen veri iken, props, bir bileşenden diğerine veri iletmek için kullanılır.

State kullanımı örneği:

javascript
import React, { useState } from 'react';

function Sayaç() {
  const [sayi, setSayi] = useState(0);

  return (
    <div>
      <p>Sayım: {sayi}</p>
      <button onClick={() => setSayi(sayi + 1)}>Arttır</button>
    </div>
  );
}

export default Sayaç;

6. Etkiler (Effects)

React’in useEffect kancası, bileşenin yaşam döngüsü boyunca yan etkileri yönetmek için kullanılır.

javascript
import React, { useState, useEffect } from 'react';

function VeriCek() {
  const [veri, setVeri] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(data => setVeri(data));
  }, []);

  return (
    <div>
      {veri ? <pre>{JSON.stringify(veri, null, 2)}</pre> : 'Yükleniyor...'}
    </div>
  );
}

export default VeriCek;

7. Stil ve CSS

React’te stiller, doğrudan CSS dosyaları kullanılarak veya CSS-in-JS kütüphaneleri ile uygulanabilir. Varsayılan olarak, create-react-app bir App.css dosyası ile gelir. Stil dosyasını bileşene dahil edebilirsin:

javascript
import './App.css';

8. Daha Fazlası

Daha fazla bilgi ve ileri düzey konular için React resmi dokümantasyonunu ziyaret edebilirsin.

Sık Sorulan Sorular

Herhangi bir sorunuz olursa, sormaktan çekinmeyin! Makale altlarında bulunan yorum kısımlarından ya da iletişim kanallarından bize ulaşabilirsiniz.