React ve Vite ile TODO Uygulaması Oluşturma

React ve Vite ile TODO Uygulaması Oluşturma

Merhaba! Bu makalede, React ve Vite kullanarak bir TODO uygulaması nasıl oluşturulacağını adım adım açıklayacağım. Vite, hızlı ve modern bir ön uç geliştirme aracıdır. React ise modern web uygulamaları geliştirmek için popüler bir JavaScript kütüphanesidir. Bu ikili, geliştirme sürecini hızlandırmak ve verimli bir şekilde TODO uygulaması oluşturmak için mükemmel bir ikili oluşturur.

1. Projenin Kurulumu

İlk olarak, yeni bir React projesi oluşturmak için Vite’ı kullanacağız. Terminalinize aşağıdaki komutu yazın:

“`bash
npm create vite@latest my-todo-app — –template react
“`

Komutu çalıştırdıktan sonra, proje dizininize girin ve bağımlılıkları yükleyin:

“`bash
cd my-todo-app
npm install
“`

2. Uygulama Bileşenlerini Oluşturma

TODO uygulaması için, üç temel bileşen oluşturacağız:

• **App.js:** Ana uygulama bileşeni, diğer bileşenleri yönetecek.
• **TodoList.js:** TODO listesini görüntülemek ve işlemek için.
• **TodoItem.js:** Her bir TODO öğesini temsil edecek.

2.1 App.js

“`javascript
import React, { useState } from ‘react’;
import TodoList from ‘./TodoList’;

function App() {
const [todos, setTodos] = useState([]);

const addTodo = (newTodo) => {
setTodos([…todos, newTodo]);
};

return (

);
}

export default App;
“`

2.2 TodoList.js

“`javascript
import React from ‘react’;
import TodoItem from ‘./TodoItem’;

function TodoList({ todos, addTodo }) {
const handleAddTodo = (event) => {
if (event.key === ‘Enter’ && event.target.value !== ”) {
addTodo(event.target.value);
event.target.value = ”;
}
};

return (

);
}

export default TodoList;
“`

2.3 TodoItem.js

“`javascript
import React from ‘react’;

function TodoItem({ todo }) {
return (

);
}

export default TodoItem;
“`

3. Uygulamanın Çalıştırılması

Tüm bileşenleri oluşturduktan sonra, uygulamayı çalıştırabilirsiniz:

“`bash
npm run dev
“`

Uygulama, varsayılan tarayıcıda açılacaktır. Artık TODO listelerine öğe ekleyebilir, listeleyebilir ve yönetebilirsiniz.

4. Geliştirme ve Özelleştirme

TODO uygulamasının temel işlevselliğini oluşturduk. Şimdi, isteğe bağlı özellikler ekleyerek uygulamayı daha da geliştirebilirsiniz.

• **TODO öğelerini silme:** TodoItem bileşenine silme düğmesi ekleyebilirsiniz.
• **TODO öğelerini tamamlama:** Bir TODO öğesini tamamladığınızda, stilini değiştirmek veya bir işaretleme kutusu eklemek için kullanabilirsiniz.
• **TODO öğelerini düzenleme:** TODO öğelerini düzenleme imkanı sağlayabilirsiniz.
• **Yerel depolama:** TODO listesini yerel depolamaya kaydetmek için localStorage veya IndexedDB kullanabilirsiniz.
• **Görsel tasarım:** CSS ile uygulamanın stilini özelleştirebilirsiniz.

Sonuç

Bu makalede, React ve Vite kullanarak bir TODO uygulaması oluşturma adımlarını adım adım açıkladık. Bu temel yapıya ek olarak, uygulamayı daha işlevsel ve kullanıcı dostu hale getirmek için çeşitli özellikler ekleyebilirsiniz. Kendi TODO uygulamanızı oluşturmaya başlamak için bu makaleyi kullanabilirsiniz. Daha fazla bilgi için React ve Vite belgelerini inceleyebilirsiniz.

Umarım bu makale faydalı olmuştur. Herhangi bir sorunuz varsa, lütfen bana ulaşmaktan çekinmeyin. Ayrıca kendi web sitemi fatihsoysal.com‘u ziyaret edebilirsiniz.

#Etiketler: React, Vite, TODO Uygulaması, JavaScript, Frontend Geliştirme, Web Uygulamaları, Programlama, Kodlama, Geliştirme, Özelleştirme