FluentStack

Membuat React Project Lokal

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 7: React FundamentalsIntermediate45 menitBahasa Indonesia

Membuat React Project Lokal

Membuat project React lokal pertama dengan Vite dan template React TypeScript.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan tujuan Local React App milestone
  • Mengecek kesiapan Node.js dan npm
  • Membuat project React lokal dengan Vite
  • Memahami kenapa project React butuh install dependencies
ReactVitenpmLocal Workflow

Isi lesson

7 blok
  1. 1.
    Sekarang React pindah ke perangkat kamuBelum selesaiWajib
  2. 2.
    Prasyarat sebelum membuat projectBelum selesaiWajib
  3. 3.
    Tool dan dokumentasi setupBelum selesaiOpsional
  4. 4.
    Command membuat project Vite React TypeScriptBelum selesaiWajib
  5. 5.
    Checklist local taskBelum selesaiWajib
  6. 6.
    Folder dibuat di lokasi yang salahBelum selesaiOpsional
  7. 7.
    RingkasanBelum selesaiWajib

Sekarang React pindah ke perangkat kamu

Wajib

Di module sebelumnya, kamu belajar React lewat lesson dan practice di FluentStack. Local React App berbeda: kamu akan membuat folder project React sungguhan di perangkat sendiri, menjalankan dev server, mengedit file di code editor, lalu menyimpan project dengan Git dan GitHub.

Tujuannya bukan membuat app besar. Tujuannya adalah memahami workflow React lokal: project dibuat dari template, dependencies diinstall, dev server berjalan, file di `src` diedit, browser menampilkan hasil, dan perubahan disimpan sebagai commit.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Prasyarat sebelum membuat project

Pastikan Node.js dan npm sudah tersedia. Kamu pernah mengeceknya di Local Tooling and npm Basics. Jika belum yakin, jalankan `node -v` dan `npm -v` di terminal. Jika command tidak dikenali, install Node.js dulu sebelum melanjutkan.

Bagian ini memengaruhi progres lesson.

Resource resmi

Opsional

Tool dan dokumentasi setup

Gunakan link resmi ini jika tool belum tersedia atau kamu ingin mengecek command pembuatan project.

Node.jsWajib

Download Node.js

Install Node.js agar command node dan npm tersedia di terminal.

Download Node.js
ViteDirekomendasikan

Getting Started

Dokumentasi resmi Vite untuk membuat project frontend baru.

Buka Vite Guide
ReactDirekomendasikan

Start a New React Project

Panduan resmi React tentang pilihan setup project baru.

Buka React Docs

Opsional, tidak menghambat penyelesaian lesson.

Command membuat project Vite React TypeScript

Wajib
bash
npm create vite@latest fluent-react-notes -- --template react-ts
cd fluent-react-notes
npm install

Command pertama membuat folder project. `cd` masuk ke folder itu. `npm install` mengunduh dependencies yang dibutuhkan agar project bisa dijalankan.

Bagian ini memengaruhi progres lesson.

Checklist local task

Wajib

Kerjakan di perangkat kamu:

  • Buka terminal di lokasi tempat kamu biasa menyimpan project.
  • Jalankan `node -v` dan `npm -v` untuk memastikan tooling tersedia.
  • Jalankan command Vite untuk membuat project `fluent-react-notes`.
  • Masuk ke folder project dengan `cd fluent-react-notes`.
  • Jalankan `npm install` dan tunggu sampai selesai.
  • Buka folder project di code editor.
  • Pastikan ada file `package.json` dan folder `src`.

Checklist ini tidak diperiksa otomatis oleh FluentStack. Tandai selesai setelah folder project benar-benar dibuat di perangkat kamu.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Opsional

Folder dibuat di lokasi yang salah

Jika kamu tidak menemukan folder project, cek lokasi terminal saat command dijalankan. Gunakan `pwd` di macOS/Linux atau `cd` di Windows untuk melihat folder aktif. Simpan project di lokasi kerja yang mudah ditemukan, bukan di folder download sementara.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib
  • Local React App adalah milestone workflow React di perangkat sendiri.
  • Vite React TypeScript memberi setup ringan untuk belajar React lokal.
  • `npm install` dibutuhkan karena project React punya dependencies.
  • Folder project harus dibuka sebagai workspace di code editor.
  • Berikutnya kamu akan menjalankan dev server dengan `npm run dev`.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Sekarang React pindah ke perangkat kamu.

Memuat progresReview module