Paylaşılan paketler
- React Native kursu
- Uzman
- Ders 23/47
- 5 dk
Paylaşılan paketler ve kod paylaşımını öğrenirsin.
Paylaşılan paketler
Monorepo'nun gücü paylaşılan paketlerden gelir. packages/ui tüm uygulamalara bileşen, packages/utils yardımcı fonksiyon, packages/theme ise tema sağlar. Her paket kendi package.json'una sahiptir.
Paket adı genelde scope'lu yazılır: @my/ui, @my/utils. Bu, çakışmayı önler ve npm'de gruplamayı kolaylaştırır. Uygulamalar bu paketleri bağımlılık olarak ekler.
Paketten içe aktarma
Bir paylaşılan paket, uygulamanın package.json'una bağımlılık olarak eklenir. Ardından kodda normal import ile kullanılır: import { Button } from '@my/ui';. Yarn/npm sembolik link kurar; değişiklik anında yansır.
Paketin main ya da exports alanı, hangi dosyanın import edileceğini söyler. Yayınlanmamış paketlerde "@my/ui": "*" ile yerel kopya kullanılır.
Uygulama Button paketini kullan
Bir App bileşeni içinde @my/ui paketinden Button'ı içe aktar. Bir Button render et; title prop'u "Kaydet" olsun.
Başlangıç kodu
import React from 'react';
// Button'ı @my/ui'den içe aktar
export default function App() {
return null;
}Örnek çözüm
import React from 'react';
import { Button } from '@my/ui';
export default function App() {
return <Button title="Kaydet" />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Scope'lu paket adı
Paylaşılan bir UI paketi için yaygın ad ____ olur.Paylaşılan bir UI paketi için yaygın ad @my/ui olur.Açıklama: @my/ui scope'lu paket adıdır.
2 Paket adlarını eşleştir
| Kavram | Anlamı |
|---|---|
@my/ui |
Bileşenler |
@my/utils |
Yardımcılar |
@my/theme |
Tema |
@my/api |
API istemci |
3 Paylaşılan paket nasıl içe aktarılır?
- Normal import ile
- fetch ile
- AsyncStorage ile Doğru cevap
- Platform.OS ile
Açıklama: Paylaşılan paket normal import ile kullanılır.