Yeni Başlayanlar İçin React ile Basit Bir Uygulama Nasıl Yapılır?

React, kullanıcı arayüzleri geliştirmek için kullanılan popüler bir JavaScript kütüphanesidir. Facebook tarafından geliştirilmiş olup, web uygulamalarında tekrar kullanılabilir bileşenler oluşturmamıza olanak tanır. Bu yazıda, React ile sıfırdan bir uygulama nasıl yapılır, adım adım açıklayacağız.

1. React Kurulumu

Öncelikle, React uygulaması oluşturmak için Node.js ve npm’nin (Node Package Manager) yüklü olması gerekmektedir. Eğer sisteminizde kurulu değilse Node.js resmi sitesinden indirebilirsiniz.

Yeni Bir Proje Oluşturun

React uygulamasını başlatmak için terminalde aşağıdaki komutu çalıştırın:

bash
npx create-react-app benim-uygulamam

Bu komut, yeni bir React projesi oluşturur ve gerekli dosyaları indirir. Proje adınızı dilediğiniz gibi değiştirebilirsiniz.

2. Projeyi Başlatın

Kurulum tamamlandıktan sonra, proje klasörünü açıp uygulamayı çalıştırabilirsiniz:

bash
cd benim-uygulamam
npm start

Bu komut, projenizi geliştirme modunda başlatır ve genellikle http://localhost:3000 adresinde çalıştırır. Tarayıcıda bu adresi ziyaret ederek React uygulamanızın başlangıç ekranını görebilirsiniz.

3. İlk Bileşeni Oluşturun

React uygulamaları bileşenlerden (components) oluşur. Basit bir bileşen oluşturmak için src klasörüne gidin ve MerhabaDunya.js adında bir dosya oluşturun. İçine aşağıdaki kodu ekleyin:

javascript
import React from 'react';

function MerhabaDunya() {
  return (
    <div>
      <h1>Merhaba Dünya!</h1>
      <p>React uygulamanıza hoş geldiniz.</p>
    </div>
  );
}

export default MerhabaDunya;

Bu kod, "Merhaba Dünya!" başlığı ve kısa bir açıklama içeren bir bileşen tanımlar.

4. Bileşeni App.js Dosyasına Dahil Edin

Oluşturduğunuz MerhabaDunya bileşenini ana uygulama dosyasına eklemek için App.js dosyasını açın ve şu şekilde düzenleyin:

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

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

export default App;

Bu düzenlemeyle App bileşeni, MerhabaDunya bileşenini içerir ve tarayıcıda "Merhaba Dünya!" mesajı görünecektir.

5. React Bileşenleriyle Etkileşimli Bir Özellik Ekleyin

Bir düğmeye tıkladığınızda sayacı artıran basit bir sayaç bileşeni ekleyelim. Sayac.js adlı bir dosya oluşturun ve içine aşağıdaki kodu ekleyin:

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

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

  const sayiyiArtir = () => {
    setSayi(sayi + 1);
  };

  return (
    <div>
      <h2>Sayaç: {sayi}</h2>
      <button onClick={sayiyiArtir}>Arttır</button>
    </div>
  );
}

export default Sayac;

Bu bileşen, sayacı gösterir ve düğmeye tıklandığında sayıyı bir artırır. Artık Sayac bileşenini App.js dosyasına ekleyerek uygulamanıza dahil edebilirsiniz.

6. Sayac Bileşenini Görüntüleyin

App.js dosyasını tekrar açın ve Sayac bileşenini ekleyin:

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

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

export default App;

Bu eklemeyle, uygulamanızda sayaç işlevselliğini görebilirsiniz.

Tebrikler! Basit ama etkileşimli bir React uygulaması oluşturmayı başardınız. Bu adımlarla temel bir uygulamayı nasıl yapılandıracağınızı ve React bileşenlerini nasıl kullanabileceğinizi öğrendiniz. React ile projeler geliştirmeye devam ederek daha karmaşık ve işlevsel uygulamalar yapabilirsiniz.