1. React Nedir?

React, Facebook tarafından geliştirilen ve bileşen tabanlı bir yapı sunan bir JavaScript kütüphanesidir. En önemli özellikleri:

  • Bileşen (Component) Yapısı: Kullanıcı arayüzlerini tekrar kullanılabilir bileşenler halinde oluşturmanıza olanak tanır.
  • Sanal DOM (Virtual DOM): Sayfa performansını artırmak için değişiklikleri daha verimli bir şekilde işler.
  • Tek Yönlü Veri Akışı: Veri yönetimini kolaylaştırarak hata yapma olasılığını azaltır.

 

2. React Projesi Başlatma

İlk olarak, bir React projesi oluşturmak için aşağıdaki komutu terminalde çalıştırın:

npx create-react-app react-baslangic-proje
cd react-baslangic-proje
npm start

Bu komutlar, React projenizi oluşturur ve geliştirme sunucusunu başlatır.

 

3. İlk React Bileşeninizi Oluşturun

React projelerinde bileşenler en temel yapı taşlarıdır. src/components klasörünün içine MerhabaDunya.js adlı yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin:

import React from 'react';

function MerhabaDunya() {
  return (
    <div>
      <h1>Merhaba Dünya!</h1>
      <p>React ile kod yazmaya başladınız.</p>
    </div>
  );
}

export default MerhabaDunya;

Ardından, bu bileşeni src/App.js içine dahil edin:

import React from 'react';
import MerhabaDunya from './components/MerhabaDunya';

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

export default App;

Tarayıcınızda çalıştırdığınızda "Merhaba Dünya!" mesajını göreceksiniz.

 

4. Durum (State) Kullanımı

React’te bileşenlerin kendi iç durumlarını yönetebilmesi için useState kullanılır. Örnek bir sayaç bileşeni oluşturalım:

import React, { useState } from 'react';

function Sayac() {
  const [sayac, setSayac] = useState(0);

  return (
    <div>
      <h2>Sayaç: {sayac}</h2>
      <button onClick={() => setSayac(sayac + 1)}>Artır</button>
    </div>
  );
}

export default Sayac;

Bunu App.js içinde çağırarak çalıştırabilirsiniz:

import Sayac from './components/Sayac';

function App() {
  return (
    <div>
      <MerhabaDunya />
      <Sayac />
    </div>
  );
}

 

5. API’den Veri Çekme

Gerçek projelerde genellikle dış API’lerden veri çekmek gerekir. Bunu yapmak için useEffect kullanabiliriz:

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

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

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

  return (
    <div>
      <h2>API’den Gelen Veriler:</h2>
      <ul>
        {veri.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default VeriCekme;

Bu bileşeni de App.js içinde kullanarak API’den veri çekebilirsiniz.

 

6. Sonuç

Bu yazıda React ile temel kavramları öğrendik ve bir başlangıç projesi geliştirdik. Özetle:

  • React bileşenlerini nasıl oluşturacağınızı öğrendiniz.
  • useState ile durum yönetimini incelediniz.
  • useEffect ile API’den veri çekmeyi öğrendiniz.

Bu bilgilerle React projelerinde temel yapıyı oluşturabilirsiniz. Bir sonraki adımda daha gelişmiş konseptleri keşfederek projelerinizi büyütebilirsiniz. Görüşmek üzere! 🚀