Günümüzde web uygulamaları hızla gelişiyor ve her geçen gün daha fazla geliştirici, güçlü ve verimli araçlar arıyor. Eğer siz de modern web uygulamaları geliştirmek istiyorsanız, React.js tam da ihtiyacınız olan araç olabilir. React, Facebook tarafından geliştirilen ve son derece popüler bir JavaScript kütüphanesidir. Özellikle kullanıcı arayüzleri oluşturmak için ideal bir çözümdür. Peki, React.js ile web uygulaması nasıl yapılır? Hadi gelin, adım adım keşfedelim!

Node.js: JavaScript çalışma ortamı sağlar.
npm: Node Paket Yöneticisi, React ve diğer bağımlılıkları kurmanızı sağlar.

npx create-react-app react-web-uygulamasi
cd react-web-uygulamasi
npm start

Bu komutları çalıştırdığınızda, React uygulamanız başlıyor ve otomatik olarak tarayıcınızda açılıyor. Harika, ilk adım başarıyla tamamlandı!

import React from 'react';

function MerhabaDunya() {
  return (
    

      
Merhaba, Dünya!
      
React ile ilk uygulamanı geliştirmeye başladın!
    
  );
}

export default MerhabaDunya;

Bu basit bileşen, ekranda "Merhaba, Dünya!" yazısını ve bir paragrafı görüntüleyecektir. Şimdi, bu bileşeni uygulamanızda görmek için, `src/App.js` dosyasını açın ve aşağıdaki gibi değiştirelim:

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

function App() {
  return (
    

      
    
  );
}

export default App;

Bu kodda, `MerhabaDunya` bileşenini `App.js` içerisine dahil ettik. Şimdi sayfayı yenileyin, "Merhaba, Dünya!" mesajınızı göreceksiniz.

- State: Bir bileşenin içinde tutulan veriler. Durumu değiştirmek, bileşenin yeniden render edilmesini sağlar.
- Props: Parent (ana) bileşenlerden child (alt) bileşenlere veri geçişini sağlar.

Örneğin, kullanıcı ismini girmesi için bir input alanı oluşturalım ve bu ismi ekranda gösterelim:

import React, { useState } from 'react';

function KullaniciAdi() {
  const [isim, setIsim] = useState('');

  const handleInputChange = (event) => {
    setIsim(event.target.value);
  };

  return (
    

      
      
Hoş geldiniz, {isim ? isim : 'misafir'}!
    
  );
}

export default KullaniciAdi;

Burada, `useState` hook'u ile bir durum (state) tanımladık ve kullanıcının girdiği ismi ekranda dinamik olarak gösterdik. Kullanıcı ismini yazdıkça, React bileşenini günceller ve kullanıcıyı ismiyle karşılar.

İlk olarak, React Router’ı projeye ekleyelim:

npm install react-router-dom

Sonrasında, `App.js` dosyasını şu şekilde güncelleyelim:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import KullaniciAdi from './KullaniciAdi';

function App() {
  return (
    
      
        
        
          
Merhaba Sayfası
        
      
    
  );
}

export default App;

Bu kodda, iki sayfa (bir ana sayfa ve bir "Merhaba Sayfası") oluşturduk ve kullanıcı sayfalar arasında geçiş yapabileceği şekilde yönlendirme sağladık. React Router ile kolayca sayfa geçişleri yapabilirsiniz.

Her şey tamam olduğunda, uygulamanızı canlıya almak için bir sunucuya (örneğin Netlify ya da Vercel) deploy edebilirsiniz.

### Sonuç
React.js ile web uygulaması geliştirmek, öğrenmesi keyifli ve pratikte oldukça güçlü bir beceri. Artık siz de bu adımlarla React ile temel bir uygulama geliştirmeyi öğrenmiş oldunuz. Sürekli geliştirme yaparak daha kapsamlı projeler oluşturabilir ve web dünyasında kendinizi gösterebilirsiniz!