Pelatihan Sertifikasi BNSP Online Junior Web Developer: Menerapkan React.js

Pendahuluan

React.js adalah pustaka JavaScript yang banyak digunakan untuk membangun antarmuka pengguna (UI) yang interaktif dan dinamis. Dengan konsep komponen, state, dan props, React.js memungkinkan pengembang untuk membuat aplikasi web modern dengan struktur yang lebih efisien dan mudah dikelola.

Dalam pelatihan ini, peserta akan belajar dasar-dasar React.js, mulai dari pembuatan komponen hingga mengelola state menggunakan React Hooks. Selain itu, peserta juga akan memahami bagaimana React.js dapat dikombinasikan dengan API untuk membangun aplikasi yang dinamis.

Pelatihan ini dirancang untuk mempersiapkan peserta mengikuti sertifikasi BNSP Junior Web Developer, yang merupakan sertifikasi kompetensi kerja yang diakui secara nasional.

---

Unit Kompetensi

Peserta akan mempelajari unit kompetensi berikut dalam pelatihan ini:

1. Pengenalan React.js

   • Instalasi React.js dan setup project

   • Struktur folder dalam proyek React.js

   • Konsep dasar JSX dan komponen

2. State Management dengan React Hooks

   • useState untuk mengelola data dinamis

   • useEffect untuk efek samping dalam komponen

   • Menggunakan useContext untuk global state

3. Membuat Aplikasi dengan React Router

   • Navigasi antar halaman dengan React Router

   • Penggunaan Link dan Route

   • Parameter dalam route

4. Koneksi API dengan React

   • Fetching data dari API menggunakan fetch dan Axios

   • Menampilkan data API dalam komponen React

   • Mengelola error dan loading state

5. Deployment Aplikasi React.js

   • Build aplikasi React untuk produksi

   • Hosting di Vercel atau Netlify

   • Konfigurasi environment variabel

---

Contoh Studi Kasus dan Penyelesaian

Studi Kasus:
Membuat aplikasi daftar tugas sederhana (To-Do List) menggunakan React.js dengan fitur menambah, menghapus, dan menandai tugas selesai.

Penyelesaian:

1. Membuat Komponen ToDoList

   jsx

   SalinEdit

   import React, { useState } from "react";

   function ToDoList() {
   const [tasks, setTasks] = useState([]);
   const [task, setTask] = useState("");

   const addTask = () => {
   if (task.trim() !== "") {
   setTasks([...tasks, { text: task, completed: false }]);
   setTask("");
   }
   };

   const toggleTask = (index) => {
   const newTasks = [...tasks];
   newTasks[index].completed = !newTasks[index].completed;
   setTasks(newTasks);
   };

   const deleteTask = (index) => {
   setTasks(tasks.filter((_, i) => i !== index));
   };

   return (
   <div>
   <h2>To-Do List</h2>
   <input value={task} onChange={(e) => setTask(e.target.value)} />
   <button onClick={addTask}>Tambah</button>
   <ul>
   {tasks.map((task, index) => (
   <li key={index}>
   <span style={{ textDecoration: task.completed ? "line-through" : "none" }}>
   {task.text}
   </span>
   <button onClick={() => toggleTask(index)}>✔</button>
   <button onClick={() => deleteTask(index)}>❌</button>
   </li>
   ))}
   </ul>
   </div>
   );
   }

   export default ToDoList;


Aplikasi ini memungkinkan pengguna menambahkan daftar tugas, menandai tugas sebagai selesai, dan menghapus tugas yang sudah tidak diperlukan.

---

Silabus Pelatihan (2 Hari)

---

Kesimpulan

Pelatihan ini dirancang untuk memberikan pemahaman yang kuat tentang React.js, mulai dari dasar hingga pembuatan aplikasi berbasis API. Dengan mengikuti pelatihan ini, peserta akan memiliki kemampuan untuk membangun aplikasi web modern dengan React dan siap mengikuti sertifikasi BNSP Junior Web Developer.

Pelatihan ini tersedia online, dengan harga yang terjangkau, hanya Rp1.250.000. Untuk informasi lebih lanjut dan pendaftaran, kunjungi:
👉 Detail Pelatihan & Sertifikasi