✅ 1. En Temel Kontrol DOM Render Ediliyor mu?
Tarayıcıda sayfa kaynağına (Ctrl+U) bak:
- <div id="root"> içinde bir şey var mı? (React için)
- Eğer tamamen boşsa, muhtemelen JS dosyaları hiç yüklenmemiştir. index.js ya da App.js çalışmıyordur.
✅ 2. ReactDOM.render veya createRoot Kullanımı
index.js ya da main.jsx içinde aşağıdakine benzer bir kod var mı?
js
KopyalaDüzenle
import React from "react";
import ReactDOM from "react-dom/client"; // React 18 için
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root" )); root.render(<App />);
- #root idsi HTML içinde var mı?
- Eski ReactDOM.render(<App />, document.getElementById("root")) şeklinde mi?
Eğer burada bir çakışma varsa, hiç bir component ekrana basılmaz.
✅ 3. App.js Component Render Ediyor mu?
App.js içine şunu geçici olarak yaz:
js
KopyalaDüzenle
const App = () => { return <h1>👋 Test Edildi - App Render Oldu</h1>; };
Eğer bu da görünmüyorsa, App hiç render edilmiyor demektir.
✅ 4. Routelar Boş mu?
React Router kullanıyorsan <Routes> içi boşsa render edilmez.
js
KopyalaDüzenle
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
const App = () => ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> </Routes> </BrowserRouter> );
Yaygın hata: <Route> içinde element={<Home />} yerine component={Home} yazmak. Bu React Router v6da çalışmaz.
✅ 5. API ile Veri Çekiyorsan: Boş veya undefined veri
API'den gelen veri null, undefined veya [] ise ve doğrudan render ediliyorsa ekran boş kalabilir.
Örnek:
js
KopyalaDüzenle
return ( <div> {data.map((item) => ( <Card {...item} /> ))} </div> );
Burada data undefined olursa hiçbir şey görünmez. Öncesinde şöyle bir kontrol ekle:
js
KopyalaDüzenle
if (!data) return <div>Veri yükleniyor...</div>;
✅ 6. StrictMode bazen sorun çıkarabilir (React 18)
Geçici olarak index.js'de <React.StrictMode>'u kaldırıp tekrar test et.
✅ 7. useEffect içi asenkron hatası
useEffect içinde async fonksiyon tanımlamadan direkt async olarak yazarsan render hiç yapılmaz.
Yanlış:
js
KopyalaDüzenle
useEffect(async () => { const res = await axios.get(...); setData(res.data); }, []);
Doğru:
js
KopyalaDüzenle
useEffect(() => { const fetchData = async () => { const res = await axios.get(...); setData(res.data); }; fetchData(); }, []);
✅ 8. Geliştirici Araçlarında Network Sekmesini Kontrol Et
- JS dosyaları yüklenmiş mi?
- 404 alan route var mı?
- /favicon.ico dışında 404 var mı?
✅ 9. console.log()ları Doğru Yere Koy
- App.js, Routes, Home.js gibi componentlerin her birinin başına ve return öncesine console.log() koy.
- Hangisi çalışıyor, hangisi render edilmiyor gör.
✅ 10. npm run build + serve ile test
bash
KopyalaDüzenle
npm run build npx serve -s build
Bazen dev sunucu (localhost:3000) düzgün çalışmaz ama build sonrası hata daha net çıkar.
Bonus: Next.js kullanıyorsan
- pages/_app.js, pages/index.js dosyalarını kontrol et.
- getServerSideProps / getStaticProps içinde hata varsa sayfa hiç render edilmez.
- console.log değil, tarayıcı değil, terminal loglarını da kontrol et.
✅ Özet Kontrol Listesi
Kontrol NoktasıDurumindex.js içindeki render yapısı doğru mu?🔲App.js boş değil mi?🔲Routes içinde en az bir Route var mı?🔲element={<.../>} tanımı doğru mu?🔲APIden gelen veri kontrolü yapılıyor mu?🔲useEffect içinde doğru async yapısı var mı?🔲Network tabında JS dosyaları yüklendi mi?🔲