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

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)

  1. Unduh Node.js dari situs resmi: https://nodejs.org/
  2. Instal Node.js, yang otomatis akan menginstal npm (Node Package Manager).
  3. Cek apakah instalasi berhasil dengan menjalankan perintah berikut di terminal atau Command Prompt (cmd):
    bash
    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)

  1. Buka VS Code, lalu buka terminal (Ctrl + ~ atau Terminal → New Terminal).
  2. Jalankan perintah berikut untuk membuat proyek React dengan Vite:
    bash
    npm create vite@latest my-react-app --template react
  3. Masuk ke folder proyek:
    bash
    cd my-react-app
  4. Instal dependensi:
    bash
    npm install

C. Menjalankan React.js di VS Code

  1. Jalankan perintah berikut untuk menjalankan aplikasi React di mode pengembangan:
    bash
    npm run dev
  2. React akan berjalan di browser pada http://localhost:5173/.

2. Struktur Folder Proyek React

Setelah proyek dibuat, struktur foldernya seperti ini:

pgsql
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

  1. Buka VS Code, lalu buka folder proyek React.
  2. Di dalam folder src/, buat file baru Hello.jsx untuk komponen baru:
    jsx
    function Hello() {
    return <h2>Halo, React dari Komponen Hello!</h2>;
    }    export default Hello;
  3. Tambahkan komponen ini ke App.jsx:
    jsx

    import Hello from "./Hello";

    function App() {
    return (
    <div>
    <h1>Selamat Datang di React.js!</h1>
    <Hello />
    </div>
    );
    }

    export default App;

  4. Simpan perubahan, lalu jalankan kembali:
    bash
    npm run dev
  5. 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

import { useState } from "react";

function App() {
const [count, setCount] = useState(0);

return (
<div>
<h1>React State & Event Example</h1>
<p>Counter: {count}</p>
<button onClick={() => setCount(count + 1)}>Tambah</button>
</div>
);
}

export default App;

📌 Penjelasan:

  • useState(0) → State untuk menyimpan nilai counter.
  • setCount(count + 1) → Menambah angka saat tombol diklik.

Mengapa Sertifikasi BNSP yang Cocok adalah Front-End Developer?

Sertifikasi Front-End Developer dari BNSP merupakan sertifikasi kompetensi yang mengukur kemampuan seseorang dalam mengembangkan tampilan dan interaksi pengguna pada aplikasi web. Sertifikasi ini sangat cocok bagi mereka yang ingin membuktikan keahliannya dalam pengembangan front-end dengan standar nasional.

1. Apa Itu Sertifikasi Front-End Developer BNSP?

Sertifikasi Front-End Developer BNSP adalah sertifikasi yang diberikan kepada individu yang telah memenuhi Standar Kompetensi Kerja Nasional Indonesia (SKKNI) dalam bidang pengembangan front-end.

Sertifikasi ini mencakup pemrograman front-end, seperti:
✅ HTML, CSS, dan JavaScript
✅ Framework seperti React.js, Vue.js, atau Angular
✅ Responsive Web Design (RWD)
✅ Integrasi API dengan AJAX atau Fetch API
✅ Version Control System (Git & GitHub)
✅ Optimasi UI/UX untuk pengalaman pengguna yang lebih baik

2. Mengapa Front-End Developer Perlu Sertifikasi BNSP?

✅ Validasi Keahlian Profesional

  • Membuktikan bahwa Anda kompeten dalam pengembangan front-end dan sesuai dengan standar industri.
  • Membantu dalam mendapatkan pekerjaan lebih cepat karena memiliki sertifikasi resmi.

✅ Diakui Secara Nasional dan Industri

  • Sertifikasi ini diakui oleh perusahaan dan instansi di seluruh Indonesia.
  • Membantu meningkatkan kepercayaan diri dan kredibilitas profesional sebagai front-end developer.

✅ Meningkatkan Peluang Karier dan Gaji

  • Banyak perusahaan mencari developer bersertifikasi untuk memastikan kandidat memiliki kompetensi yang diperlukan.
  • Membuka kesempatan untuk mendapatkan proyek freelance, kontrak kerja, atau promosi di tempat kerja.

3. Skema Kompetensi dalam Sertifikasi BNSP Front-End Developer

Berikut adalah unit kompetensi utama yang diuji dalam sertifikasi ini:

A. Membangun Struktur dan Tampilan Web

✅ Menggunakan HTML5 & CSS3 untuk membangun elemen dan layout halaman web.
✅ Menggunakan Bootstrap, Tailwind CSS, atau framework lainnya untuk membuat desain responsif.
✅ Memahami konsep SEO dasar untuk optimasi halaman web.

B. Mengembangkan Interaksi Pengguna dengan JavaScript

✅ Menggunakan JavaScript (ES6+) untuk membuat animasi dan interaksi di web.
✅ Menggunakan DOM Manipulation untuk mengontrol elemen di dalam web.
✅ Menggunakan Fetch API / AJAX untuk komunikasi dengan backend.

C. Menggunakan Framework Front-End (React.js / Vue.js / Angular)

✅ Menggunakan React.js untuk membuat komponen UI yang modular.
✅ Menggunakan Vue.js atau Angular untuk membangun aplikasi web modern.
✅ Mengelola state dengan Redux atau Vuex untuk aplikasi yang lebih kompleks.

D. Version Control dan Deployment

✅ Menggunakan Git & GitHub untuk manajemen versi proyek.
✅ Deploy aplikasi ke Netlify, Vercel, atau Firebase Hosting.

4. Persyaratan Mengikuti Sertifikasi Front-End Developer BNSP

✅ Minimal Lulusan SMK/S1 di bidang IT atau memiliki pengalaman kerja di bidang front-end development.
✅ Menguasai dasar-dasar HTML, CSS, dan JavaScript.
✅ Memiliki portofolio proyek front-end (minimal satu proyek nyata).
✅ Membawa perangkat laptop sendiri saat ujian sertifikasi.

5. Proses Sertifikasi Front-End Developer BNSP

📌 1. Pendaftaran

  • Mendaftar di LSP (Lembaga Sertifikasi Profesi) yang menyediakan skema Front-End Developer.
  • Mengisi formulir pendaftaran dan melengkapi dokumen pendukung (CV, portofolio, dll.).

📌 2. Ujian Teori & Praktek

  • Ujian teori menguji pemahaman tentang HTML, CSS, JavaScript, dan konsep front-end lainnya.
  • Ujian praktik berupa pembuatan website atau aplikasi web sederhana sesuai dengan studi kasus yang diberikan.

📌 3. Wawancara Asesor

  • Menghadapi sesi wawancara dengan asesor dari BNSP untuk menjelaskan proyek dan pendekatan dalam pengembangan front-end.

📌 4. Penerbitan Sertifikat

  • Jika dinyatakan kompeten, peserta akan mendapatkan sertifikat resmi BNSP yang berlaku selama 3 tahun.

6. Kesimpulan

Sertifikasi Front-End Developer BNSP sangat cocok bagi Anda yang ingin memvalidasi keterampilan profesional dalam pengembangan antarmuka web. Dengan sertifikat ini, Anda dapat:

✅ Meningkatkan kredibilitas sebagai front-end developer profesional.
✅ Mempermudah mendapatkan pekerjaan atau proyek freelance.
✅ Mendapatkan pengakuan resmi sesuai dengan standar SKKNI.

lanjutan react js https://mobilefaculty.com/menambahkan-react-router-tailwind-css-dan-fitur-api-di-react-js/ 

Studi Kasus: Pengembangan Aplikasi Pengajuan Cuti Menggunakan React.js

Latar Belakang: Perusahaan XYZ ingin mengembangkan aplikasi web sederhana untuk mengelola pengajuan cuti karyawan. Aplikasi ini akan memanfaatkan React.js untuk antarmuka pengguna dan Tailwind CSS untuk styling yang responsif dan modern. Dengan adanya API yang terintegrasi, aplikasi ini juga akan memudahkan proses pengajuan dan persetujuan cuti.

Langkah-langkah Pengembangan Aplikasi

  1. Instalasi dan Setup Proyek React
    • Buka terminal dan jalankan perintah berikut untuk membuat proyek baru menggunakan Vite:
      bash

      Copy
      npm create vite@latest cuti-karyawan --template react
cd cuti-karyawan
npm install
npm install tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
    • Konfigurasikan Tailwind CSS dengan menambahkan direktif Tailwind ke file tailwind.config.js dan index.css.
  2. Membuat Struktur Folder
    • Buat folder di dalam src/ bernama components, pages, dan api.
    • Di dalam folder components, buat file LeaveRequestForm.jsx dan di dalam folder api, buat file api.js.
  3. Membuat Komponen Formulir Pengajuan Cuti
    • Di LeaveRequestForm.jsx:
      jsx

      Copy
      import { useState } from 'react';

function LeaveRequestForm() {
  const [name, setName] = useState('');
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [leaveType, setLeaveType] = useState('');
  const [reason, setReason] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Lakukan panggilan API untuk mengirim data formulir.
  };

  return (
    <form onSubmit={handleSubmit} className="p-4">
      <input type="text" placeholder="Nama" onChange={(e) => setName(e.target.value)} />
      <input type="date" onChange={(e) => setStartDate(e.target.value)} />
      <input type="date" onChange={(e) => setEndDate(e.target.value)} />
      <select onChange={(e) => setLeaveType(e.target.value)}>
        <option value="">Pilih Tipe Cuti</option>
        <option value="Tahunan">Cuti Tahunan</option>
        <option value="Sakit">Cuti Sakit</option>
      </select>
      <textarea placeholder="Alasan Cuti" onChange={(e) => setReason(e.target.value)} />
      <button type="submit">Ajukan Cuti</button>
    </form>
  );
}

export default LeaveRequestForm;
  4. Mengintegrasikan API
    • Di api.js, buat fungsi untuk mengirim pengajuan cuti ke backend:
      javascript

      Copy
      const API_URL = "http://yourapi.com/leaves"; // Ganti dengan URL API Anda

export const submitLeaveRequest = async (data) => {
  const response = await fetch(API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  return response.json();
};
  5. Menghubungkan Komponen dengan API
    • Dalam LeaveRequestForm, panggil submitLeaveRequest ketika formulir diajukan:
      jsx

      Copy
      const handleSubmit = async (e) => {
  e.preventDefault();
  const leaveData = { name, startDate, endDate, leaveType, reason };
  const result = await submitLeaveRequest(leaveData);
  console.log(result);
};
  6. Membuat Dashboard untuk Menampilkan Status Pengajuan
    • Di halaman Dashboard.jsx, buat interface untuk melihat semua pengajuan cuti yang telah diajukan.
  7. Menambahkan Router dan Navigasi
    • Instal React Router:
      bash

      Copy
      npm install react-router-dom
    • Atur rute untuk aplikasi menggunakan BrowserRouter untuk navigasi antara halaman formulir dan dashboard.
  8. Menampilkan dan Mengelola Pengajuan di Dashboard -Pada dashboard, gunakan state dan efek untuk mengelola dan menampilkan data pengajuan cuti yang ditarik dari API.

Kesimpulan

Pelatihan dan pengembangan aplikasi pengajuan cuti menggunakan React.js dan alat modern lainnya memungkinkan perusahaan untuk meningkatkan efisiensi dalam proses manajemen cuti. Dengan penggunaan komponen yang dapat digunakan kembali dan pemisahan kode yang baik, aplikasi ini tidak hanya memenuhi kebutuhan internal tetapi juga meningkatkan pengalaman pengguna.

Kami LSP memiliki skema pelatihan yang dirancang secara profesional dengan instruktur berpengalaman dan menyediakan sertifikat BNSP yang relevan untuk memvalidasi keterampilan dalam pengembangan aplikasi dan manajemen proyek.

Leave a Reply

Your email address will not be published. Required fields are marked *