javascript site

Yuso. · 4 May 2025

şimdi gidiyorum visual studio code da java scripts jsx dili ile açıyorum projeyi çalıştırmak için React ve TailwindCSS olması lazım sonra terminale yazıyorum kurmak için
npx create-react-app your-app-name
cd your-app-name
npm install tailwindcss postcss autoprefixer
bunlarda sıkıntı yok arkadaşlar ama sonra tailwind.config.js dosyası oluşturmak için npx tailwindcss init yazıyorum yok bi türlü geçemedim bunu hep hata veriyo hatada bu
npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\YUSUF\AppData\Local\npm-cache\_logs\2025-05-04T16_15_35_922Z-debug-0.log
bi ara farklı bi hata alıyodum o gitti şimdi bu geldi çalıştırmaya çalıştığım kodu aşşağıya yazıcam yardımcı olun lütfen

JavaScript:

import { useState, useEffect } from 'react';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog";

export default function Home() {
  const [searchQuery, setSearchQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [rememberMe, setRememberMe] = useState(false);

  useEffect(() => {
    const savedLogin = localStorage.getItem('loggedIn');
    if (savedLogin === 'true') {
      setIsLoggedIn(true);
    }
  }, []);

  const handleLogin = () => {
    if (username === 'admin' && password === '1234') {
      if (rememberMe) localStorage.setItem('loggedIn', 'true');
      setIsLoggedIn(true);
    } else {
      alert("Giriş başarısız");
    }
  };

  const handleSearch = () => {
    const dummy = [
      { name: 'Ömer Asam', firm: 'Çağ Plus' },
      { name: 'Hasan Kaya', firm: 'Çağ Plus' },
      { name: 'Mehmet Yılmaz', firm: 'İz Yapı' },
    ];
    const filtered = dummy.filter(item =>
      item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.firm.toLowerCase().includes(searchQuery.toLowerCase())
    );
    setResults(filtered);
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-start p-6">
      <h1 className="text-3xl font-bold mt-8 mb-4 text-center">Artı 2000</h1>
      <h2 className="text-xl font-medium mb-6 text-center">Taşeron Çalışan Arama</h2>

      <div className="flex gap-2 mb-6">
        <Input
          placeholder="İsim ya da firma ismi yaz..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
        <Button onClick={handleSearch}>Ara</Button>
      </div>

      <div className="mb-6">
        <Button variant="outline">Tüm Liste</Button>
      </div>

      <div className="mb-10">
        <Dialog>
          <DialogTrigger asChild>
            <Button>Giriş Yap</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogTitle>Giriş Paneli</DialogTitle>
            <div className="flex flex-col gap-3 mt-2">
              <Input
                placeholder="Kullanıcı Adı"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
              <Input
                placeholder="Şifre"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={rememberMe}
                  onChange={() => setRememberMe(!rememberMe)}
                />
                Bu cihazda girişi kaydet
              </label>
              <Button onClick={handleLogin}>Giriş Yap</Button>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      {results.length > 0 && (
        <Card className="w-full max-w-md">
          <CardContent className="p-4">
            <h3 className="font-semibold mb-2">Arama Sonuçları:</h3>
            <ul className="list-disc list-inside">
              {results.map((item, idx) => (
                <li key={idx}>{item.name} – {item.firm}</li>
              ))}
            </ul>
          </CardContent>
        </Card>
      )}

      {isLoggedIn && (
        <div className="mt-10 text-green-700 font-semibold">
          🎉 Giriş başarılı! Kontrol paneline erişim sağlandı.
        </div>
      )}
    </div>
  );
}

fazeL · 18 Ağu 2025

Merhaba, sorununuz kodda değil ortam kurulumunda gözüküyor.

Node.js sürümü çok eski, React 18 ve Tailwind için en az Node.js 16+ lazım.
Terminalde node -v yaz, versiyon 16’dan düşükse güncelle.
Buradan güncelleyebilirsin: nodejs.org
npx tailwindcss init komutu çalışmaz çünkü sen sadece paketleri kurdun ama global CLI yok.
Tailwind’i projede kullanmak için npx değil, bu şekilde kurman gerekiyor.

Bash:

npx tailwindcss init -p

Buradaki -p parametresi postcss.config.js dosyasını da otomatik oluşturur. Eğer yine hata alıyorsan:

rm -rf node_modules package-lock.json (Windows’ta rmdir /s /q node_modules && del package-lock.json) Sonra npm install tekrar çalıştır. Ardından npx tailwindcss init -p Ayrıca create-react-app artık önerilmiyor. Facebook ekibi bakımını bıraktı. Bunun yerine Vite kullanman daha hızlı ve sorunsuz olur:

Bash:

npm create vite@latest my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Sonra tailwind.config.js içinde content kısmını ayarla:

JavaScript:

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
],

ve index.css içine ekle:

CSS:

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

Mevcut create-react-app ile devam edeceksen npx tailwindcss init -p komutunu kullan. Daha güncel yöntem istiyorsan Vite ile sıfırdan başla, Tailwind kurması da çok kolay.

Yuso. · 18 Ağu 2025

fazeL' Alıntı:
Merhaba, sorununuz kodda değil ortam kurulumunda gözüküyor.

Node.js sürümü çok eski, React 18 ve Tailwind için en az Node.js 16+ lazım.
Terminalde node -v yaz, versiyon 16’dan düşükse güncelle.
Buradan güncelleyebilirsin: nodejs.org
npx tailwindcss init komutu çalışmaz çünkü sen sadece paketleri kurdun ama global CLI yok.
Tailwind’i projede kullanmak için npx değil, bu şekilde kurman gerekiyor.

Bash:

npx tailwindcss init -p

Buradaki -p parametresi postcss.config.js dosyasını da otomatik oluşturur. Eğer yine hata alıyorsan:

rm -rf node_modules package-lock.json (Windows’ta rmdir /s /q node_modules && del package-lock.json) Sonra npm install tekrar çalıştır. Ardından npx tailwindcss init -p Ayrıca create-react-app artık önerilmiyor. Facebook ekibi bakımını bıraktı. Bunun yerine Vite kullanman daha hızlı ve sorunsuz olur:

Bash:

npm create vite@latest my-app cd my-app npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Sonra tailwind.config.js içinde content kısmını ayarla:

JavaScript:

content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ],

ve index.css içine ekle:

CSS:

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

Mevcut create-react-app ile devam edeceksen npx tailwindcss init -p komutunu kullan. Daha güncel yöntem istiyorsan Vite ile sıfırdan başla, Tailwind kurması da çok kolay.

teşşekür ederim hocam

javascript site

Yuso.

Katılımcı Üye

fazeL

Uzman üye

Yuso.

Katılımcı Üye

Sosyal medya sayfalarımız