React Academy · Ders

React Uygulamalarıyla Nx Monorepo Oluşturma

Bir Nx çalışma alanı iskeleti oluşturun, React uygulamaları ekleyin ve proje grafiğini öğrenin.

React Uygulamalarıyla Nx Monorepo Oluşturma, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. 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.

Nx Neden Kullanılır?

Nx, monorepo'lar için akıllı bir derleme sistemidir. Değişikliklerden etkilenen görevlere dayalı çalıştırma (yalnızca değişenleri derleme ve sınama), önbelleğe alma (değişmemiş görevleri yeniden çalıştırmama) ve uygulamalarla kütüphaneler için iskelet oluşturma araçları sağlar.

Yeni Nx Çalışma Alanı Oluşturma

React için önceden yapılandırılmış yeni bir Nx çalışma alanı oluşturun.

# Create workspace:
npx create-nx-workspace@latest myorg --preset=react-monorepo
# or for Next.js:
npx create-nx-workspace@latest myorg --preset=next

Çalışma Alanı Yapısı

Nx, kodu apps/ (dağıtılabilir uygulamalar) ve libs/ (paylaşılan kütüphaneler) olarak düzenler. Her projenin, görev hedeflerini içeren kendi project.json dosyası vardır.

myorg/
  apps/
    web/           # React SPA
    admin/         # Admin React SPA
    api/           # NestJS backend
  libs/
    ui/            # shared UI components
    data-access/   # data fetching hooks
    utils/         # shared utilities
  nx.json          # workspace config
  package.json     # single package.json

React Uygulaması Ekleme

Tüm yapılandırması önceden hazırlanmış yeni bir uygulama eklemek için Nx React oluşturucusunu kullanın.

# Add a new React app:
npx nx generate @nx/react:app customer-portal

# Add a Next.js app:
npx nx generate @nx/next:app marketing

Görevleri Çalıştırma

Tek tek projeler veya tüm projeler için derleme, sınama, lint denetimi ve sunma görevlerini çalıştırın.

# Serve a specific app:
npx nx serve web

# Build all apps:
npx nx run-many --target=build --all

# Test a specific library:
npx nx test ui

Proje Grafiği

nx graph, tüm uygulamalarla kütüphanelerin ve bunların bağımlılıklarının etkileşimli bir görselleştirmesini açar; hangi projelerin hangi kütüphanelere bağlı olduğunu görebilirsiniz.

npx nx graph

Nx Önbelleğe Alma

Nx, görev çıktılarını yerel olarak önbelleğe alır. Değişmemiş bir görevi yeniden çalıştırdığınızda sonuç önbellekten anında alınır. Nx Cloud, önbelleğe almayı ekip üyeleri ve CI arasında paylaşılan uzak bir önbelleğe genişletir.

# First run: builds and caches
npx nx build web  # ~30s

# Second run (no changes): cache hit
npx nx build web  # <1s — served from cache

Görev İşlem Hatları

Görev bağımlılıklarını nx.json içinde tanımlayın. build çalıştırıldığında, önce tüm üst akış bağımlılıkları için build otomatik olarak çalıştırılır.

// nx.json
{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"], // run dependency builds first
      "cache": true
    },
    "test": {
      "cache": true
    }
  }
}

Uygulama Kuralları için Etiketler

Projeleri (ör. scope:ui, type:app) etiketleyin ve uygulamaların diğer uygulamaların dahili kodunu içe aktarmasını önlemek için ESLint kurallarını kullanın.

// project.json
{
  "tags": ["scope:web", "type:app"]
}

// .eslintrc.json
{
  "rules": {
    "@nx/enforce-module-boundaries": ["error", {
      "depConstraints": [
        { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] }
      ]
    }]
  }
}

TypeScript Yol Takma Adları

Nx, paylaşılan kitaplıkları derin göreli yollar yerine @myorg/ui olarak içe aktarabilmeniz için tsconfig.base.json dosyasını yol takma adlarıyla otomatik olarak yapılandırır.

// tsconfig.base.json (auto-generated)
{
  "compilerOptions": {
    "paths": {
      "@myorg/ui": ["libs/ui/src/index.ts"],
      "@myorg/utils": ["libs/utils/src/index.ts"]
    }
  }
}

// Usage in apps:
import { Button } from '@myorg/ui';

Kısa Kontrol

Bir Nx monoreposunda nx affected --target=build ne yapar?

Özet

create-nx-workspace ile bir Nx çalışma alanı oluşturun. Uygulamalar ve kitaplıklar için nx generate, görevler için nx serve/build/test, CI içinde ise yalnızca değişen projeleri işlemek için nx affected kullanın. Önbelleğe alma, değişmemiş görevlerin anında sonuç döndürmesini sağlar.

Sıkça Sorulan Sorular

“React Uygulamalarıyla Nx Monorepo Oluşturma” dersi ücretsiz mi?

Evet — “React Uygulamalarıyla Nx Monorepo Oluşturma” 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.

“React Uygulamalarıyla Nx Monorepo Oluşturma” dersinde ne öğreneceğim?

Bir Nx çalışma alanı iskeleti oluşturun, React uygulamaları ekleyin ve proje grafiğini öğrenin. 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 1. dersidir.

“React Uygulamalarıyla Nx Monorepo Oluşturma” 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