React Academy · Pelajaran

Membuat Monorepo Nx dengan Aplikasi React

Buat kerangka workspace Nx, tambahkan aplikasi React, dan pahami graf proyek.

Membuat Monorepo Nx dengan Aplikasi React adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Mengapa Nx?

Nx adalah sistem build cerdas untuk monorepo. Nx menyediakan pelaksanaan tugas berdasarkan proyek yang terdampak (hanya build dan uji perubahan), caching (tidak pernah menjalankan ulang tugas yang tidak berubah), serta generator untuk membuat kerangka aplikasi dan pustaka.

Membuat Ruang Kerja Nx Baru

Buat ruang kerja Nx baru yang telah dikonfigurasi sebelumnya untuk React.

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

Struktur Ruang Kerja

Nx mengatur kode ke dalam apps/ (aplikasi yang dapat di-deploy) dan libs/ (pustaka bersama). Setiap proyek memiliki project.json sendiri dengan target tugas.

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

Menambahkan Aplikasi React

Gunakan generator React Nx untuk menambahkan aplikasi baru dengan seluruh konfigurasinya yang sudah terhubung.

# 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

Menjalankan Tugas

Jalankan build, pengujian, lint, dan serve untuk proyek tertentu atau semua proyek.

# 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

Grafik Proyek

nx graph membuka visualisasi interaktif semua aplikasi dan pustaka beserta dependensinya—lihat proyek mana yang bergantung pada pustaka tertentu.

npx nx graph

Caching Nx

Nx menyimpan hasil tugas dalam cache secara lokal. Menjalankan ulang tugas yang tidak berubah akan langsung menggunakan cache. Nx Cloud memperluas caching ke cache jarak jauh yang digunakan bersama oleh anggota tim dan CI.

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

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

Alur Tugas

Definisikan dependensi tugas dalam nx.json. Menjalankan build secara otomatis menjalankan build untuk semua dependensi hulu terlebih dahulu.

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

Tag untuk Penegakan

Beri tag pada proyek (misalnya, scope:ui, type:app) dan gunakan aturan ESLint untuk mencegah aplikasi mengimpor kode internal aplikasi lain.

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

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

Alias Jalur TypeScript

Nx secara otomatis mengonfigurasi tsconfig.base.json dengan alias jalur sehingga Anda dapat mengimpor pustaka bersama sebagai @myorg/ui, bukan menggunakan jalur relatif bertingkat.

// 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';

Pemeriksaan Singkat

Apa yang dilakukan nx affected --target=build dalam monorepo Nx?

Ringkasan

Buat ruang kerja Nx dengan create-nx-workspace. Gunakan nx generate untuk aplikasi dan pustaka, nx serve/build/test untuk tugas, serta nx affected di CI agar hanya proyek yang berubah yang diproses. Penembolokan memastikan tugas yang tidak berubah mengembalikan hasil secara seketika.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat Monorepo Nx dengan Aplikasi React” gratis?

Ya — teks lengkap “Membuat Monorepo Nx dengan Aplikasi React” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuat Monorepo Nx dengan Aplikasi React”?

Buat kerangka workspace Nx, tambahkan aplikasi React, dan pahami graf proyek. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Membuat Monorepo Nx dengan Aplikasi React” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Membuat Monorepo Nx dengan Aplikasi React
Pustaka Bersama & Paket Internal
Perintah Nx Affected & Penyimpanan Tembolok
Generator Kode & Otomatisasi Workspace

← Kembali ke React Academy