Tag: panduan

React.js adalah pustaka JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) berbasis komponen. Berikut langkah-langkah instalasi dan penggunaan React.js di VS Code beserta contoh sederhana. 1. Instalasi React.js A. Instal Node.js & npm (Node Package Manager) Unduh Node.js dari situs resmi: https://nodejs.org/ Instal Node.js, yang otomatis akan menginstal npm (Node Package Manager). Cek apakah instalasi berhasil dengan menjalankan perintah berikut di terminal atau Command Prompt (cmd): bash SalinEdit node -v npm -v Jika muncul versi Node.js dan npm, berarti instalasi berhasil. B. Buat Proyek React dengan Vite (Lebih Cepat dari Create React App) Buka VS Code, lalu buka terminal (Ctrl + ~ atau Terminal → New Terminal). Jalankan perintah berikut untuk membuat proyek React dengan Vite: bash SalinEdit npm create vite@latest my-react-app --template react Masuk ke folder proyek: bash SalinEdit cd my-react-app Instal dependensi: bash SalinEdit npm install C. Menjalankan React.js di VS Code Jalankan perintah berikut untuk menjalankan aplikasi React di mode pengembangan: bash SalinEdit npm run dev React akan berjalan di browser pada http://localhost:5173/. 2. Struktur Folder Proyek React Setelah proyek dibuat, struktur foldernya seperti ini: pgsql SalinEdit my-react-app │── node_modules/ │── public/ │── src/ │ │── App.jsx → Komponen utama React │ │── main.jsx → Entry point aplikasi │ │── index.css → Styling utama │── package.json → Konfigurasi npm │── vite.config.js → Konfigurasi Vite 3. Membuat Komponen React Sederhana Buka VS Code, lalu buka folder proyek React. Di dalam folder src/, buat file baru Hello.jsx untuk komponen baru: jsx SalinEdit function Hello() { return Halo, React dari Komponen Hello!; } export default Hello; Tambahkan komponen ini ke App.jsx: jsx SalinEdit import Hello from "./Hello"; function App() { return ( Selamat Datang di React.js! ); } export default App; Simpan perubahan, lalu jalankan kembali: bash SalinEdit npm run dev Buka browser di http://localhost:5173/, dan Anda akan melihat teks "Selamat Datang di React.js!" serta "Halo, React dari Komponen Hello!". 4. Menambahkan Event & State di React Tambahkan fitur tombol dengan state di App.jsx: jsx SalinEdit import { useState } from "react"; function App() { const [count, setCount] = useState(0); return ( React State & Event Example Counter: {count} setCount(count + 1)}>Tambah ); } export default App; 📌 Penjelasan: useState(0) → State untuk menyimpan nilai counter. setCount(count + 1) → Menambah angka saat tombol diklik.

Tag: panduan

Panduan Instalasi dan Penggunaan React js di VS Code dengan Studi Kasus: Pengembangan Aplikasi Pengajuan Cuti Menggunakan React.js

Tutorial Studi Kasus: Implementasi Grafana untuk Pemantauan Data di Perusahaan XYZ