Proje: Panel
- React kursu
- Orta seviye
- Ders 73/80
- 4 dk
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.
Başlangıç kodu
import { BrowserRouter, Routes, Route, NavLink, Outlet } from "react-router-dom";
// DashboardLayout ve DashboardApp bileşenlerini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Projenin ilk adımında ne kuracağız?
- Sepet ve ödeme
- Layout ve rota Doğru cevap
- Kimlik doğrulama
- Bildirim sistemi
Açıklama: İlk adımda layout ve rota iskeletini kurarız.
2 Router import
import { BrowserRouter, Routes, Route, ____ } from "react-router-dom";import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";Açıklama: Outlet, iç içe rotaların içeriğini basar.
3 Proje: Panel: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
layout |
Sayfa çerçevesi |
route |
URL'e karşılık |
widget |
Veri kartı |
modal |
Açılır pencere |