React
Modal ile ekleme
Portal ve Suspense ile bir ekleme modalı yazarsın.
Proje sonucu
Bu projede bir panel kurduk: layout ve rota iskeleti, istatistik widget'ı ve modal ile ekleme. Her parça bir derste eklendi ve bir önceki dersin çözümü sonrakinin başlangıç kodu oldu.
React Router ile iç içe rotaları, <Outlet> ile çocuk rotaları, StatCard ile widget'ları ve AddStatModal ile form eklemeyi öğrendin.
Proje sonunda parçalı, gerçek bir uygulama iskeletin var. Bir sonraki seviyede bu yapıyı context ve veri çekme ile büyüteceğiz.
Son adım: birleştir
Şimdi tüm parçaları tek bir dosyada birleştireceksin. StatCard ve AddStatModal tanımlarını, StatsPage ve DashboardLayout bileşenlerini birlikte yazacaksın.
StatsPage iki state tutar: stats dizisi ve isOpen boolean. Ekle düğmesi modal'ı açar; modal'ın onAdd'i yeni bir StatCard ekler.
Bu yapı, gerçek projelerde sık görülür: küçük parçalar ayrı bileşenler, ana sayfa bunları birleştirir.
Uygulama Dashboard final
Tüm parçaları birleştir: StatCard, AddStatModal, StatsPage ve DashboardLayout bileşenlerini yaz. StatsPage içinde useState ile stats dizisi ve isOpen tut; "Ekle" düğmesi setIsOpen(true) yapsın. AddStatModal'dan gelen onAdd, yeni bir StatCard eklesin. DashboardApp BrowserRouter ile /stats rotasında StatsPage göstersin. export default DashboardApp.
Örnek çözümü göster
import { useState, useRef } from "react";
import { BrowserRouter, Routes, Route, NavLink, Outlet } from "react-router-dom";
function StatCard({ label, value }) {
return (
<article>
<h3>{label}</h3>
<p>{value}</p>
</article>
);
}
function AddStatModal({ isOpen, onAdd, onClose }) {
const inputRef = useRef(null);
if (!isOpen) return null;
function handleSubmit(e) {
e.preventDefault();
onAdd(inputRef.current.value);
onClose();
}
return (
<div>
<form onSubmit={handleSubmit}>
<input ref={inputRef} />
<button type="submit">Ekle</button>
</form>
</div>
);
}
function StatsPage() {
const [stats, setStats] = useState([{ label: "Kullanıcı", value: 120 }]);
const [isOpen, setIsOpen] = useState(false);
return (
<section>
{stats.map((s, i) => (
<StatCard key={i} label={s.label} value={s.value} />
))}
<button onClick={() => setIsOpen(true)}>Ekle</button>
<AddStatModal
isOpen={isOpen}
onAdd={(v) => setStats([...stats, { label: v, value: 0 }])}
onClose={() => setIsOpen(false)}
/>
</section>
);
}
function DashboardLayout() {
return (
<>
<nav><NavLink to="/stats">İstatistik</NavLink></nav>
<main><Outlet /></main>
</>
);
}
function DashboardApp() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<DashboardLayout />}>
<Route path="stats" element={<StatsPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default DashboardApp;
Kendini test et
-
Bu projede öğrendiklerinden değil?
- useTransition
- Modal ile ekleme
- StatCard bileşeni
- İç içe rota
Cevabı göster
useTransition — useTransition bu projede işlenmedi.
-
Modal'ı kapat
function handleClose() {
setIsOpen(____);
}
Cevabı göster
function handleClose() {
setIsOpen(false);
}
-
Modal ile ekleme: kavramları eşleştir
- BrowserRouter
- Router kabuğu
- Outlet
- Çocuk yuvası
- NavLink
- Menü bağlantısı
- StatCard
- Veri kartı
Sıradaki ders: Meydan okuma: useFetch hook
