Creating a Shopping Cart with React + Vite + Tailwind CSS – Simple React Project

Bu rehberde, React, Vite ve Tailwind CSS kullanarak bir alışveriş sepeti oluşturacağız. Bu basit React projesinde, kullanıcılar alışveriş sepetlerine ürün ekleyebilecek ve sepetlerini güncelleyebilecekler. Bu proje, React uygulamalarını oluşturmak için Vite kullanmanın kolaylığını göstermek için tasarlanmıştır. Tailwind CSS ise, hızlı bir şekilde kullanımı kolay ve güzel bir arayüz oluşturmanıza yardımcı olacak.

Adım 1: Proje Oluşturma
İlk adım olarak, bir React projesi oluşturmak için Vite’i kullanacağız. İlk olarak, Vite’i yüklemek için terminalde aşağıdaki komutu çalıştırın:

npm install create-vite

Daha sonra, proje klasörünüzü oluşturmak için aşağıdaki komutu çalıştırın:

npx create-vite my-shopping-cart

Proje klasörünüze gidin:

cd my-shopping-cart

Ve proje bağımlılıklarını yüklemek için aşağıdaki komutu çalıştırın:

npm install

Adım 2: Tailwind CSS ve React’i Yükleme
Şimdi Tailwind CSS ve React bağımlılıklarını projenize ekleyeceğiz. Bunun için aşağıdaki komutları terminalde sırayla çalıştırın:

npm install tailwindcss
npm install @headlessui/react
npm install @heroicons/react

Daha sonra, Tailwind CSS’i projenize eklemek için src/index.css dosyasını oluşturun ve içine aşağıdaki kodu ekleyin:

@tailwind base;
@tailwind components;
@tailwind utilities;

Son olarak, bu CSS dosyasını projenizin giriş dosyasına eklemek için src/main.jsx dosyasını açın ve aşağıdaki satırı ekleyin:

import './index.css';

Adım 3: Alışveriş Sepeti Komponentlerini Oluşturma
Şimdi alışveriş sepeti için gerekli komponentleri oluşturacağız. src/components klasörü altında iki yeni dosya oluşturun: ProductList.jsx ve Cart.jsx.

ProductList.jsx dosyasına aşağıdaki kodu ekleyin:

import React from 'react';

const ProductList = ({ products, addToCart }) => {
  return (
    <div>
      <h1>Products</h1>
      {products.map((product) => (
        <div key={product.id}>
          <p>{product.name} - ${product.price}</p>
          <button onClick={() => addToCart(product)}>Add to Cart</button>
        </div>
      ))}
    </div>
  );
};

export default ProductList;

Cart.jsx dosyasına aşağıdaki kodu ekleyin:

import React from 'react';

const Cart = ({ cart, removeFromCart }) => {
  return (
    <div>
      <h1>Cart</h1>
      {cart.map((item) => (
        <div key={item.id}>
          <p>{item.name} - ${item.price}</p>
          <button onClick={() => removeFromCart(item)}>Remove from Cart</button>
        </div>
      ))}
    </div>
  );
};

export default Cart;

Adım 4: Ana Uygulama Komponentini Oluşturma
Şimdi ana uygulama komponentimizi oluşturacağız. src/App.jsx dosyasını açın ve aşağıdaki kodu ekleyin:

import React, { useState } from 'react';
import ProductList from './components/ProductList';
import Cart from './components/Cart';

const App = () => {
  const [products, setProducts] = useState([
    { id: 1, name: 'Product 1', price: 10 },
    { id: 2, name: 'Product 2', price: 20 },
    { id: 3, name: 'Product 3', price: 30 },
  ]);

  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  const removeFromCart = (product) => {
    setCart(cart.filter((item) => item.id !== product.id));
  };

  return (
    <div>
      <ProductList products={products} addToCart={addToCart} />
      <Cart cart={cart} removeFromCart={removeFromCart} />
    </div>
  );
};

export default App;

Adım 5: Uygulamayı Başlatma
Son adım olarak, uygulamayı başlatmak için terminalde aşağıdaki komutu çalıştırın:

npm run dev

Tarayıcınızda http://localhost:3000 adresine giderek oluşturduğunuz alışveriş sepetini görebilirsiniz. Artık kullanıcılar ürün ekleyebilir, sepetlerini güncelleyebilir ve alışveriş yapabilirler.

Bu rehberde, Vite, React ve Tailwind CSS kullanarak basit bir alışveriş sepeti projesi oluşturmayı öğrendik. Bu proje, React uygulamaları oluşturmanın kolaylıkla nasıl olduğunu göstermek için tasarlanmıştır. Umarım bu rehber işinize yaramıştır!