React To-Do Uygulaması Oluşturma #1

Merhaba arkadaşlar, bu yazımda sizlerle React To-Do Uygulaması Oluşturma konusundan bahsedeceğim.

React kullanarak basit bir to-do uygulaması oluşturma serimizin ilk yazısında React‘ın temellerini öğrenirken adım adım bir proje geliştireceğiz. İlk adım olarak, proje kurulumunu gerçekleştirecek ve temel bileşenleri oluşturacağız. Hazırsanız, başlayalım!

1. React Projesinin Oluşturulması:
   React projesini oluşturmak için Node.js ve npm’in yüklü olduğundan emin olun. Ardından, aşağıdaki komutu kullanarak yeni bir React projesi oluşturabilirsiniz.

npx create-react-app todo-app

Bu komut, todo-app adında yeni bir React projesi oluşturacaktır. Daha sonra Proje klasörüne gidiyoruz:

cd todo-app

2. Bağımlılıkların Kurulumu:
   React projesi oluşturulduktan sonra, projenin çalışması için gerekli olan bağımlılıkları kurmamız gerekebilir. Proje klasöründe aşağıdaki komutu çalıştırarak gerekli bağımlılıkların yüklenmesini aşağıdaki komut ile sağlayabiliriz.

npm install

Bu komut, projenin package.json dosyasındaki bağımlılıkları otomatik olarak indirecek ve yükleyecektir.

3. Temel Bileşenlerin Oluşturulması:
   React projesi, component tabanlı bir yapıya sahiptir. Bu adımda, gerekli componentleri(bileşen) oluşturarak projenin temel yapısını oluşturacağız.

App component: Projenin ana componenti olacak ve diğer componentleri içerecektir. Projemiz oluşturulduğunda App.js dosyası bizim için otomatik olarak oluşturulacaktır. Eğer böyle bir dosya yoksa siz Proje klasöründeki src klasörüne gidin ve App.js adında yeni bir dosya oluşturun. Ardından, aşağıdaki kodu App.js dosyasına ekleyin.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Yapılacaklar Listesi</h1>
      {/* Diğer bileşenleri buraya ekleyeceğiz */}
    </div>
  );
}

export default App;

TodoList Componenti: Yapılacaklar listesini görüntülemek için kullanacağımız bir component olacaktır. Proje klasöründe src klasörüne gidin ve TodoList.js adında yeni bir dosya oluşturun. Ardından, aşağıdaki kodu TodoList.js dosyasına ekleyin.

import React from 'react';

function TodoList() {
  return (
    <ul>
      {/* Yapılacakları burada listeleme yapacağız */}
    </ul>
  );
}

export default TodoList;

Oluşturduğumuz TodoListComponenti‘ni App.js içerisine dahil ederek bu componentin kullanılmasını gerçekleştiriyoruz. App.js içerisini aşağıdaki şekilde düzenleyin.

import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div>
      <h1>Yapılacaklar Listesi</h1>
      <TodoList />
    </div>
  );
}

export default App;

Bu şekilde TodoList componenti App component içinde kullanılmış olacaktır.

5. Projenin Çalıştırılması:
   Şimdi React projesini çalıştırabiliriz. Proje klasöründe aşağıdaki komutu çalıştırarak uygulamamızı tarayıcı üzerinde görüntüleyebiliriz.

npm start

Bu komut, projeyi yerel bir sunucuda çalıştıracak ve tarayıcınızda proje uygulamasını gösterecektir.

Bu yazımızda, React projesi oluşturarak temel componentleri oluşturmayı gerçekleştirdik. App componenti, temel yapının ana componenti olarak kullanıldı ve TodoList componenti içindeki yapılacakları listelemek için kullanıldı. Şimdi tarayıcınızda proje uygulamasını görebilirsiniz.

Sonraki Adım:
Bir sonraki yazımızda, API ile veri alışverişi yapmayı ve görevler listesini getirme işlemini sağlayacağız. Bu şekilde, to-do uygulamamız daha işlevsel hale getirmiş olacağız.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…