"React ile Sıfırdan Bir To-Do Uygulaması Geliştirme Rehberi"

🎯 React Nedir?

React, Facebook tarafından geliştirilen ve şu anda Meta tarafından desteklenen popüler bir JavaScript kütüphanesidir. React, kullanıcı arayüzleri oluşturmak için kullanılır ve bileşen tabanlı bir yapıya sahiptir.

---

🛠️ Gerekli Araçlar ve Kurulum

Öncelikle bilgisayarında aşağıdaki araçların kurulu olduğundan emin ol:

1. Node.js ve npm: React projelerini çalıştırmak için gereklidir.

   • Node.js İndir sayfasından yükleyebilirsin.
   • Kurulduktan sonra aşağıdaki komutlarla kontrol edebilirsin:

     node -v
     npm -v
     

      

2. Bir kod editörü (örneğin, Visual Studio Code).

🚀 React Projesi Oluşturma

React projesi oluşturmak için Vite veya Create React App kullanabilirsin. Hızlı ve modern olduğu için Vite'i kullanacağız.

1. Vite ile Yeni Proje Başlat

Terminal veya komut satırında aşağıdaki komutu çalıştırarak yeni bir React projesi oluşturabilirsin:

npm create vite@latest my-todo-app --template react

Komutun çalışması tamamlandıktan sonra proje dizinine geç:

cd my-todo-app

2. Bağımlılıkları Kur

Projedeki bağımlılıkları yüklemek için şu komutu çalıştır:

npm install

3. Projeyi Başlat

Geliştirme sunucusunu başlatmak için:

npm run dev

Tarayıcıda http://localhost:5173 adresine giderek projeni görebilirsin.

📂 Proje Yapısı

Oluşturulan dosya ve klasörler şöyle olacak:

my-todo-app/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── App.jsx
    ├── main.jsx
    └── index.css

---

📝 To-Do Uygulaması Oluşturma

Şimdi adım adım To-Do uygulamamızı geliştirelim.

1. src/App.jsx Dosyasını Düzenle

src/App.jsx dosyasını aşağıdaki gibi düzenle:

import { useState } from 'react';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [task, setTask] = useState('');

  // Yeni görev ekleme fonksiyonu
  const addTask = () => {
    if (task.trim() !== '') {
      setTasks([...tasks, task]);
      setTask(''); // Input'u temizle
    }
  };

  // Görev silme fonksiyonu
  const deleteTask = (index) => {
    const newTasks = tasks.filter((_, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    <div className="App">
      <h1>My To-Do App</h1>
      <div>
        <input
          type="text"
          placeholder="Yeni görev ekle..."
          value={task}
          onChange={(e) => setTask(e.target.value)}
        />
        <button onClick={addTask}>Ekle</button>
      </div>
      <ul>
        {tasks.map((t, index) => (
          <li key={index}>
            {t} <button onClick={() => deleteTask(index)}>Sil</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

2. src/App.css ile Basit Stil Ekle

src/App.css dosyasını aşağıdaki gibi düzenleyerek uygulamana stil ekle:

.App {
  text-align: center;
  font-family: Arial, sans-serif;
  margin-top: 50px;
}

input {
  padding: 8px;
  font-size: 16px;
  margin-right: 10px;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

li button {
  margin-left: 10px;
  background-color: red;
  color: white;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
}

---

✅ Çalıştır ve Test Et

Projeni tekrar çalıştırmak için terminalde şu komutu kullan:

npm run dev

Tarayıcıda http://localhost:5173 adresine giderek To-Do uygulamanı görebilirsin.

🎉 Tebrikler!

React ile ilk To-Do uygulamanı başarıyla geliştirdin! 🚀

---

🔧 Geliştirme ve İyileştirme Önerileri

1. Yerel Depolama (Local Storage):
   Görevleri tarayıcıda saklayarak sayfa yenilendiğinde kaybolmamalarını sağlayabilirsin.

2. Tamamlanmış Görevleri İşaretleme:
   Görevlerin tamamlandığını işaretlemek için checkbox ekleyebilirsin.

3. Düzenleme (Edit) Özelliği:
   Eklenen görevleri düzenlemek için bir buton ekleyebilirsin.

4. Daha Fazla Stil:
   CSS veya bir stil kütüphanesi (örneğin Tailwind CSS) kullanarak uygulamanı güzelleştirebilirsin.