React Academy · Ders

Paylaşılan Kütüphaneler ve Dahili Paketler

Paylaşılan arayüz ve yardımcı program kütüphaneleri oluşturun ve bunları TypeScript yol takma adlarıyla uygulamalar arasında içe aktarın.

Paylaşılan Kütüphaneler ve Dahili Paketler, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Neden Paylaşılan Kitaplıklar?

Bileşenleri, kancaları ve yardımcı programları birden çok uygulamada yinelemek yerine bunları, monorepodaki herhangi bir uygulamanın kullanabileceği paylaşılan kitaplık projelerine ayırın.

Kitaplık Oluşturma

Tür bilgisine sahip, derlenebilir kitaplık projeleri oluşturmak için Nx oluşturucularını kullanın.

# UI component library:
npx nx generate @nx/react:library ui --directory=libs/ui --importPath=@myorg/ui

# Utility library:
npx nx generate @nx/js:library utils --directory=libs/utils --importPath=@myorg/utils

# Data access library (hooks, API calls):
npx nx generate @nx/react:library data-access --importPath=@myorg/data-access

Kitaplığın Herkese Açık API'si

Her şeyi tek bir index.ts dosyasından (herkese açık API) dışa aktarın. Kullanıcılar derin dahili yollardan değil, yalnızca @myorg/ui üzerinden içe aktarma yapmalıdır.

// libs/ui/src/index.ts
export { Button } from './lib/Button';
export { Card } from './lib/Card';
export { Input } from './lib/Input';
export type { ButtonProps } from './lib/Button';

// Consumer in apps/web:
import { Button, Card } from '@myorg/ui';
// NOT: import { Button } from '@myorg/ui/src/lib/Button'; // internal path

Kitaplık Türleri: yayımlanabilir ve derlenebilir

Derlenebilir kitaplıklar, monorepo derlemelerini hızlandırmak için artımlı olarak derlenir. Yayımlanabilir kitaplıklar ise harici kullanım için npm ile uyumlu bir paket de oluşturur.

# Buildable (monorepo internal use only):
npx nx generate @nx/react:library ui --buildable

# Publishable (for npm too):
npx nx generate @nx/react:library ui --publishable --importPath=@myorg/ui

Modül Sınırlarını Uygulama

Döngüsel bağımlılıkları önlemek ve hangi projelerin birbirinden içe aktarım yapabileceğini kısıtlamak için @nx/enforce-module-boundaries ESLint kuralını kullanın.

// nx.json or .eslintrc
"depConstraints": [
  // Apps can only import from libs:
  { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] },
  // Feature libs can't import other feature libs (via shared libs only):
  { "sourceTag": "type:feature", "notDependOnLibsWithTags": ["type:feature"] }
]

Paylaşılan Kitaplıklar için Storybook

Bileşenleri herhangi bir uygulamadan bağımsız ve yalıtılmış olarak belgelemek için Storybook'u kullanıcı arayüzü kitaplığı üzerinde çalıştırın.

# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui

# Run Storybook:
npx nx storybook ui

Kitaplıkları Sınama

Her kitaplığın kendine ait bir sınama hedefi vardır. Kitaplık değiştiğinde kitaplık ve değişiklikten etkilenen tüm uygulamalar için sınamaları çalıştırın.

# Test specific library:
npx nx test ui

# Test all affected by a change:
npx nx affected --target=test

Monorepolarda Sürüm Yönetimi

Bir monorepoda tüm paketler tek bir package.json dosyasını ve sürümü paylaşır. Yayımlanabilir kitaplıklar için bağımsız sürümlemeyi yönetmek üzere @jscutlery/semver veya Changesets gibi araçları kullanın.

Mevcut Kodu Kitaplıklara Taşıma

Paylaşılan kodu kademeli olarak bir kitaplığa taşıyın: kitaplığı oluşturun, dosyaları taşıyın, içe aktarmaları güncelleyin ve geri kalanını TypeScript yol takma adlarının yönetmesine izin verin.

# Move a component:
# 1. Copy src/components/Button.tsx → libs/ui/src/lib/Button.tsx
# 2. Export from libs/ui/src/index.ts
# 3. Update imports across apps from relative paths to '@myorg/ui'
# 4. Delete the original file

Compodoc veya Storybook Docs ile Belgeler

Kitaplık dosyalarındaki TypeScript türlerinden ve JSDoc açıklamalarından API belgeleri oluşturmak için Storybook'un autodocs etiketini veya Compodoc'u kullanın.

Kısa Kontrol

Paylaşılan bir Nx kitaplığından içe aktarım yapan kullanıcılar için tek giriş noktası ne olmalıdır?

Özet

nx generate ile kitaplıklar oluşturun, her şeyi tek bir index.ts dosyasından dışa aktarın ve ESLint kurallarıyla modül sınırlarını uygulayın. Daha hızlı artımlı derlemeler için derlenebilir kitaplıkları, npm'ye sürüm yayımlamanız gerektiğinde ise yayımlanabilir kitaplıkları kullanın. Yalıtılmış belgeler için Storybook'u kullanıcı arayüzü kitaplıkları üzerinde çalıştırın.

Sıkça Sorulan Sorular

“Paylaşılan Kütüphaneler ve Dahili Paketler” dersi ücretsiz mi?

Evet — “Paylaşılan Kütüphaneler ve Dahili Paketler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Paylaşılan Kütüphaneler ve Dahili Paketler” dersinde ne öğreneceğim?

Paylaşılan arayüz ve yardımcı program kütüphaneleri oluşturun ve bunları TypeScript yol takma adlarıyla uygulamalar arasında içe aktarın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Paylaşılan Kütüphaneler ve Dahili Paketler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

React Uygulamalarıyla Nx Monorepo Oluşturma
Paylaşılan Kütüphaneler ve Dahili Paketler
Nx Affected Komutları ve Önbelleğe Alma
Kod Üreticileri ve Çalışma Alanı Otomasyonu

← React Academy Sayfasına Dön