React
Proje: Panel
Panel projesinin amacını ve adımlarını gözden geçirirsin.
Proje: Panel
Bu projede bir yönetim paneli (dashboard) kuracaksın. Üç ana parça var: layout ve rota, istatistik widget'ı ve modal ile ekleme. Her ders bir parçayı ekler.
Layout, sayfa değiştikçe sabit duran bir çerçeve verir. Rota ise URL'e göre içerik gösterir. Bunları React Router ile kurarsın.
Widget'lar veriyi kart şeklinde gösterir; modal ise yeni veri eklemek için açılır pencere sağlar. Proje sonunda çalışan, parçalı bir panelin olacak.
Teknoloji ve yapı
Panel React Router ile kurulur; her rota bir sayfa, <Outlet> ise içeriğin basıldığı yerdir. StatCard bileşeni label ve value proplarını alır.
Modal, isOpen state'i ile açılıp kapanır. Form gönderildiğinde onAdd çağrılır ve modal kapanır.
Her ders önceki dersin çözümünü başlangıç kodu olarak alır; böylece kod parça parça büyür.
Uygulama DashboardLayout iskeleti
DashboardLayout bileşeni yaz: <nav> içinde iki <NavLink> ("İstatistik" ve "Ayarlar"), sonra <main> içinde <Outlet /> olsun. BrowserRouter içinde <Routes> ile DashboardLayout'u path="/" rotasına koy ve dışa aktar. DashboardApp fonksiyonu yazıp export default ile dışa aktar.
Örnek çözümü göster
import { BrowserRouter, Routes, Route, NavLink, Outlet } from "react-router-dom";
function DashboardLayout() {
return (
<>
<nav>
<NavLink to="/stats">İstatistik</NavLink>
<NavLink to="/settings">Ayarlar</NavLink>
</nav>
<main>
<Outlet />
</main>
</>
);
}
function DashboardApp() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<DashboardLayout />}>
<Route path="stats" element={<p>İstatistikler</p>} />
<Route path="settings" element={<p>Ayarlar</p>} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default DashboardApp;
Kendini test et
-
Projenin ilk adımında ne kuracağız?
- Sepet ve ödeme
- Layout ve rota
- Kimlik doğrulama
- Bildirim sistemi
Cevabı göster
Layout ve rota — İlk adımda layout ve rota iskeletini kurarız.
-
Router import
import { BrowserRouter, Routes, Route, ____ } from "react-router-dom";
Cevabı göster
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
-
Proje: Panel: kavramları eşleştir
- layout
- Sayfa çerçevesi
- route
- URL'e karşılık
- widget
- Veri kartı
- modal
- Açılır pencere
Sıradaki ders: Layout ve rota
