CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özet - Geliştirme araçları

Flipper, DevTools ve console'u birleştirerek bir debug oturumu yazarsın.

Özet - Geliştirme araçları

Bu grupta beş geliştirme aracını tanıdın. Flipper ağ, layout ve console'ı tek pencerede toplar. React DevTools bileşen ağacını ve props/state'i gösterir. Console hızlı değer yazdırır.

Remote debug Chrome DevTools'a bağlanır; debugger anahtar kelimesi kesme noktasıdır. Performance monitor FPS ve RAM'i canlı gösterir; JS ve UI satırı vardır. Bu beş araç, gerçek bir uygulamanın hatasını bulma ve performansı anlama sürecini destekler. Hepsini birlikte kullanmak, hata ayıklamayı hızlı ve görsel kılar.

Uygulama İnceleme için bileşen yaz

DevTools ve console'da incelemek için bir App bileşeni yaz. İçinde console.log('App açıldı') çağrısı ve debugger anahtar kelimesi olsun. Bileşen null döndürsün.

Başlangıç kodu

App.js
// App bileşenini yaz
// içine console.log ve kesme noktası koy
// null döndürsün

Örnek çözüm

App.js
function App() {
  console.log("App açıldı");
  debugger;
  return null;
}

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 Bileşen ağacını incelemek için?

App.js
npx ???
  • React DevTools Doğru cevap
  • Flipper
  • Performance monitor
  • Console

Açıklama: React DevTools bileşen ağacını gösterir.

2 Aracı amacına eşle

Kavram Anlamı
Flipper Tek pencerede toplar
React DevTools Bileşen ağacı
console Hızlı değer yazdırır
remote debug Chrome DevTools
perf monitor FPS ve RAM

3 React DevTools komutu

Soru 
$ ____ react-devtools
Cevap 
$ npx react-devtools

Açıklama: npx react-devtools bağımsız sürümü açar.

Orta seviye bölümündeki tüm dersler

1 Hooks

  1. useEffect
  2. Dependency array
  3. Cleanup
  4. useRef
  5. useMemo
  6. Özet - Hooks

2 Özel hook'lar

  1. Özel hook
  2. useToggle
  3. useCounter
  4. usePrevious
  5. Hook kompozisyonu
  6. Özet - Özel hook'lar

3 Context

  1. Context nedir?
  2. createContext
  3. Provider
  4. useContext
  5. Context default değeri
  6. Özet - Context

4 Proje: Notlar uygulaması

  1. Proje tasarımı
  2. Not modeli
  3. Not ekleme
  4. AsyncStorage
  5. Birleştirme

5 useReducer

  1. useReducer
  2. Reducer fonksiyonu
  3. Action dispatch
  4. Initial state
  5. useReducer vs useState
  6. Özet - useReducer

6 Form yönetimi

  1. Controlled form
  2. Form state
  3. Validation
  4. Submit
  5. Form kütüphaneleri
  6. Özet - Form yönetimi

7 API ve fetch

  1. fetch
  2. GET isteği
  3. async/await
  4. JSON parse
  5. Error handling
  6. Özet - API ve fetch

8 Proje: Quiz uygulaması

  1. Quiz modeli
  2. Soruları yükleme
  3. Quiz oynatma
  4. Skor hesaplama
  5. Birleştirme

9 Tab navigasyonu

  1. Bottom Tabs
  2. createBottomTabNavigator
  3. Tab icons
  4. Material Top Tabs
  5. Tab badge
  6. Özet - Tab navigasyonu

10 Drawer navigasyonu

  1. Drawer navigator
  2. createDrawerNavigator
  3. Drawer items
  4. Drawer toggle
  5. Nested navigation
  6. Özet - Drawer navigasyonu

11 Yaşam döngüsü

  1. Mount
  2. Update
  3. Unmount
  4. useEffect lifecycle
  5. Layout effect
  6. Özet - Yaşam döngüsü

12 Proje: E-ticaret

  1. Proje tasarımı
  2. Ürün listesi
  3. Ürün detayı
  4. Sepet
  5. Birleştirme

13 Animated

  1. Animated.Value
  2. Animated.View
  3. Animated.timing
  4. Animated.spring
  5. interpolate
  6. Özet - Animated

14 Jestler

  1. PanResponder
  2. onMoveShouldSetPanResponder
  3. onPanResponderMove
  4. onPanResponderRelease
  5. react-native-gesture-handler
  6. Özet - Jestler

15 Tema

  1. Açık/koyu tema
  2. Theme context
  3. Theme toggle
  4. useColorScheme
  5. Persistent theme
  6. Özet - Tema

16 Performans

  1. React.memo
  2. useCallback
  3. useMemo
  4. FlatList optimizasyonu
  5. InteractionManager
  6. Özet - Performans

17 Test

  1. Jest
  2. React Native Testing Library
  3. render
  4. getByText
  5. fireEvent
  6. Özet - Test

18 Geliştirme araçları

  1. Flipper
  2. React DevTools
  3. Console
  4. Remote debug
  5. Performance monitor
  6. Özet - Geliştirme araçları

19 İzinler

  1. İzin nedir?
  2. expo-permissions
  3. Kamera izni
  4. Konum izni
  5. Bildirim izni
  6. Özet - İzinler

20 Orta seviye finali

  1. Proje tasarımı
  2. Context ve hooks
  3. API entegrasyonu
  4. Navigation
  5. Birleştirme