Pekan 3: Membuat Aplikasi Frontend Sederhana dengan React + Vite

☁️ Komputasi Awan

🔄 Deskripsi Singkat

Mahasiswa akan membuat kerangka kerja aplikasi frontend menggunakan React yang dikonfigurasi dengan Vite. Fokusnya adalah membuat tampilan dasar yang menampilkan tulisan sederhana (misalnya, "Hello, React!") guna memastikan setup dan integrasi berjalan dengan baik.

🎯 Capaian Pembelajaran

Memahami workflow pembuatan proyek React dengan Vite.
Mampu menjalankan aplikasi React secara lokal dengan Vite.
Mengenal dasar-dasar React seperti komponen, props, dan state.
Memahami struktur proyek modern yang dihasilkan oleh Vite.

🔍 Pengenalan React & Vite

React adalah library JavaScript untuk membangun antarmuka pengguna secara deklaratif, dengan konsep komponen yang reusable.

Vite adalah build tool modern yang menawarkan kecepatan tinggi dalam proses development berkat hot module replacement (HMR) dan optimasi build.

Gambar: Logo React dan Vite

🛠️ Workflow Pembuatan Proyek dengan Vite

Instalasi Node.js dan npm: Pastikan Node.js sudah terpasang di sistem.

Membuat Proyek Baru: Jalankan perintah berikut:

npm create vite@latest my-react-app -- --template react

Instalasi Dependensi: Jalankan npm install atau yarn.
Menjalankan Development Server: Gunakan perintah npm run dev atau yarn dev.

💻 Contoh Aplikasi React Sederhana

Berikut adalah contoh kode untuk menampilkan tulisan Hello, React! menggunakan React:


import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return Hello, React!;
}

ReactDOM.render(, document.getElementById('root'));

Gambar: Tampilan Aplikasi React Sederhana

👩‍💻 Pembagian Tugas Tim

Backend Engineer: Menyesuaikan endpoint di aplikasi Flask untuk uji coba fetch data jika dibutuhkan.
Infrastructure Engineer: Menyiapkan Node.js environment dan setup boilerplate proyek React menggunakan Vite.

📝 Rangkuman & Diskusi

Pengenalan React dan Vite serta keunggulan keduanya.
Workflow pembuatan proyek React dengan Vite dari instalasi Node.js hingga running development server.
Contoh aplikasi sederhana yang menampilkan Hello, React!.
Pentingnya kolaborasi antara tim backend dan frontend.

Sesi tanya jawab dan diskusi