React ile İlk Web Uygulamanızı Geliştirme Rehberi

Giriş

React, modern web geliştirmede en popüler JavaScript kütüphanelerinden biridir. Facebook tarafından geliştirilen ve desteklenen React, kullanıcı arayüzleri oluşturmayı kolaylaştırır. Bu rehberde, React kullanarak sıfırdan basit ama etkili bir web uygulaması geliştireceğiz.

Neden React?

  • Bileşen Tabanlı Mimari: Kodunuzu tekrar kullanılabilir bileşenlere ayırabilirsiniz.
  • Sanallaştırılmış DOM: Performans iyileştirmesi sağlar.
  • Zengin Ekosistem: Çok sayıda açık kaynak kütüphane ile desteklenir.
  • Kolay Öğrenim: Temel JavaScript bilgisi ile hızlıca öğrenilebilir.

Geliştirme Ortamını Kurmak

1. Node.js ve npm Kurulumu

React projeleri için Node.js ve npm'in sisteminizde yüklü olması gerekir.

node -v
npm -v

Yüklü değilse, Node.js Resmi Sitesi üzerinden yükleyebilirsiniz.

2. create-react-app ile Proje Başlatmak

create-react-app, hızlıca React projeleri başlatmanızı sağlayan bir CLI aracıdır.

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

Bu komutlar ile yerel sunucuda çalışan bir React projesi başlatabilirsiniz.

Proje Yapısını Anlamak

my-first-react-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── App.css
│   └── index.js
├── package.json
└── README.md
  • public/index.html: Tek bir HTML dosyası.
  • src/index.js: React uygulamasının başladığı nokta.
  • src/App.js: Ana uygulama bileşeni.

İlk React Bileşenini Oluşturmak

App.js Dosyasını Düzenleyin

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Merhaba, React!</h1>
      <p>İlk React uygulamanıza hoş geldiniz.</p>
    </div>
  );
}

export default App;

Uygulamanızı Başlatın

npm start

Tarayıcınızda http://localhost:3000 adresine gidin.

Bileşenler ile Çalışmak

React bileşenleri ikiye ayrılır: Fonksiyonel ve Sınıf Tabanlı.

Fonksiyonel Bileşen

function Welcome(props) {
  return <h1>Merhaba, {props.name}</h1>;
}

Sınıf Tabanlı Bileşen

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Merhaba, {this.props.name}</h1>;
  }
}

useState ile Durum Yönetimi

React, durum yönetimi için useState hook'unu sunar.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Sayım: {count}</p>
      <button onClick={() => setCount(count + 1)}>Artır</button>
    </div>
  );
}

export default Counter;

useEffect ile Yan Etkileri Yönetmek

useEffect ile API çağrıları veya DOM manipülasyonları yapılabilir.

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

function UserList() {
  const [users, setUsers] = useState([]);

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

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

React Router ile Sayfa Yönlendirme

npm install react-router-dom

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Anasayfa</h2>;
}

function About() {
  return <h2>Hakkında</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Anasayfa</Link> | <Link to="/about">Hakkında</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

Stil Verme (CSS ile)

App.css dosyasını düzenleyin:

.App {
  text-align: center;
}

button {
  padding: 10px;
  background-color: #61dafb;
  border: none;
  cursor: pointer;
}

Projenizi Yayınlamak

npm run build
  • build/ klasörü, uygulamanızın dağıtıma hazır halini içerir.
  • Netlify, Vercel gibi platformlar üzerinden kolayca yayınlayabilirsiniz.

Sonuç

React ile basit bir web uygulaması geliştirmek oldukça kolaydır. Bu rehberde, temel kavramları ve React'in güçlü özelliklerini keşfettik. Şimdi, öğrendiklerinizi kullanarak daha karmaşık uygulamalar geliştirmeye başlayabilirsiniz!

???? Hangi React özelliği sizin favoriniz? Yorumlarda paylaşın!