Aplikasi React pertama kamu dengan Vite

Siapkan proyek React yang sebenarnya, jalankan, dan pahami apa yang telah kamu buat.

Tunjukkan pada saya: menyiapkan proyek

Vite (diucapkan “veet,” bahasa Prancis untuk “cepat”) adalah alat yang menyiapkan kerangka proyek React siap pakai untuk kamu. Buka terminal dan pindah ke tempat kamu ingin proyek tersebut dijalankan (seperti Desktop kamu):

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite mungkin menanyakan sesuatu kepada kamu – konfirmasi dengan Enter. Kemudian:

cd my-react-web
npm install
npm run dev -- --port 3901

npm install mengunduh semua yang dibutuhkan proyek (dibutuhkan beberapa saat – React dan pembantunya diunduh ke folder node_modules).
npm run dev -- --port 3901 memulai server pengembangan. Terminal akan menampilkan alamat http://localhost:3901. Buka di browser kamu.

Apakah kamu melihat logo berputar dan judul “Vite + React”? Selamat – aplikasi React pertama kamu telah berjalan! 🎉

💡

Apa itu localhost? Sebuah “server” yang hanya berjalan di komputer kamu. Hanya kamu yang dapat melihatnya – ini adalah tempat pengujian pribadi kamu. Dan bagian terbaiknya: saat kamu mengubah kode dan menyimpannya, halaman segera disegarkan. Tidak ada lagi F5 yang tak ada habisnya!

Tur proyek

Buka folder my-react-web di VS Code (File → Buka Folder). Tampaknya ada banyak file, tetapi hanya tiga yang penting bagi kamu saat ini:

Berkas	Apa itu
`indeks.html`	satu-satunya HTML di seluruh situs web – hampir kosong, hanya `<div id="root">`
`src/main.jsx`	starter: mengambil aplikasi dan memasukkannya ke dalam div
`src/App.jsx`	komponen utama – di sinilah kamu akan menulis kode
`src/App.css`	gaya – CSS biasa, seperti yang kamu ketahui

Abaikan sisanya untuk saat ini (jangan pernah membuka atau menghapus node_modules, package.json adalah daftar paket proyek).

Perubahan pertama kamu pada kode

Buka src/App.jsx. Hapus semuanya dan tulis:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Simpan – dan halaman di browser berubah dengan sendirinya. Inilah yang kamu lihat:

Komponen App adalah fungsi yang mengembalikan HTML (notasi ini disebut JSX).
{name} – kurung kurawal menyisipkan JavaScript ke dalam HTML. Apa pun: variabel, perhitungan {2 + 3}, bahkan kondisi.
ekspor Aplikasi default – “Saya menawarkan komponen ini ke file lain” (main.jsx adalah yang mengambilnya).

BEJ memiliki dua keunikan yang akan biasa kamu gunakan: alih-alih kelas, kamu menulis className (kelas adalah kata yang dicadangkan dalam JavaScript), dan komponen harus mengembalikan elemen pembungkus satu (itulah sebabnya ada <div> di sekeliling semuanya).

Giliran kamu 💪

Siapkan proyek dengan mengikuti panduan ini dan jalankan.
Edit App.jsx: judul dengan nama kamu, paragraf tentang apa yang sedang kamu bangun, dan variabel usia yang kamu tampilkan dalam kalimat Saya {usia} tahun.
Hapus tag penutup secara sengaja dan lihat seperti apa kesalahannya – Vite menunjukkannya langsung di browser, dengan nomor baris. Lalu perbaiki.
Hentikan server (Ctrl+C di terminal) dan mulai lagi (npm run dev -- --port 3901) – untuk menguasai seluruh siklus.

✅

Periksa diri kamu: Proyek berjalan di localhost, kamu dapat menghentikan dan memulainya, dan saat kamu mengedit App.jsx dan menyimpannya, browser akan menggambar ulang sendiri. Siklus pengembang berputar!

Apa yang bisa diambil dari pelajaran ini

npm create vite@latest menyiapkan proyek, npm install mengunduh paket, npm run dev memulai localhost.
kamu menulis kode di src/App.jsx: komponen adalah fungsi yang mengembalikan JSX, {} memasukkan JavaScript ke dalam HTML.
Di BEJ: className bukannya class, selalu satu elemen pembungkus.