Proje tasarımı
- React Native kursu
- Uzman
- Ders 43/47
- 6 dk
Uzman finali mini uygulamasının iskeletini tasarlarsın.
Proje: İzleme Paneli
Bu projede bir İzleme Paneli uygulaması yazacaksın. Beş derste adım adım ilerleyeceğiz; her ders bir öncekinin çözümünün üzerine bir parça ekler. Sonuçta: yeni mimari (Fabric) ile bileşenler, performance profiling ile optimizasyon, monorepo yapısı ile paylaşılan paketler elde edeceksin.
İlk ders projenin iskeletini kurar: App bileşeni, metrics state'i ve bir başlık metni. Sonra yeni mimari bileşenini ekleriz. Performance için Profiler bağlarız. Monorepo paketini içe aktarırız. Son olarak tüm parçaları birleştiririz. Bu, uzman seviye React Native bilgini bir araya getiren bir finaldır.
Beş derslik yol haritası
Yol haritamız beş derslik. Birinci ders: iskelet — App, metrics state, başlık. İkinci ders: yeni mimari — Fabric bileşeni. Üçüncü ders: performance — Profiler ve memo. Dördüncü ders: monorepo — paylaşılan paket. Beşinci ders: birleştirme — tüm katmanları bağlama.
Her ders bir code adımıyla biter. Bir sonraki dersin başlangıç kodu, bir önceki dersin çözümünü içerir. Böylece yaptığın her adım kalıcıdır; silinmez. Bu birikimli yapı, gerçek bir projenin nasıl büyüdüğünü gösterir. Son derste tüm parçalar bir araya gelir ve eksiksiz bir uygulama oluşur.
Uygulama App iskeletini kur
Bir App bileşeni yaz. useState({}) ile metrics state'i tut. Bileşen <Text>İzleme Paneli</Text> döndürsün.
Başlangıç kodu
import React, { useState } from 'react';
import { Text, View } from 'react-native';
// App bileşenini ve metrics state'ini buraya ekleÖrnek çözüm
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>İzleme Paneli</Text>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu projenin kalbinde ne var?
function App() { /* ... */ }- Bir animasyon
- Bir resim
- metrics state'i Doğru cevap
- Bir oyun skoru
Açıklama: metrics state'i projenin kalbidir.
2 useState çağrısı
const [metrics, setMetrics] = ____({});const [metrics, setMetrics] = useState({});Açıklama: useState metrics state'ini başlatır.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
metrics |
Panel verisi |
setMetrics |
State güncelleyici |
App |
Kök bileşen |
Text |
Başlık gösterir |