WEBINAR & WORKSHOP - ACCELERATING & OPTIMIZING: MAKING ORGANIZATION WEBSITE USING REACT.JS & NODE.JS
WEBINAR & WORKSHOP “ACCELERATING & OPTIMIZING: MAKING ORGANIZATION WEBSITE USING REACT.JS & NODE.JS”
Pada hari Selasa, tanggal 15 Juli 2025, telah dilaksanakan kegiatan Webinar dan Workshop bertajuk "Accelerating & Optimizing: Making Organization Website Using React.js & Node.js" Kegiatan ini merupakan salah satu bentuk diseminasi hasil program Magang dan Studi Independen Bersertifikat (MSIB) Batch 8 yang diselenggarakan oleh Program Studi Teknik Informatika, Fakultas Teknik, Universitas Muhammadiyah Jakarta (UMJ). Acara ini dilaksanakan oleh Kelompok 8 KKN.
Kegiatan diikuti oleh 44 peserta yang mayoritas berasal dari mahasiswa Universitas Muhammadiyah Jakarta, serta beberapa peserta dari universitas lain dan kalangan umum yang memiliki minat dalam bidang pengembangan Fullstack Web Developer. Kegiatan ini dibagi menjadi dua sesi utama, yaitu sesi webinar dan sesi workshop.
Pada sesi webinar, materi disampaikan oleh Fikri Naufal Maulana, yang merupakan alumni program MSIB dari mitra NF Academy. Pada sesi webinar, materi disampaikan oleh Fikri Naufal Maulana, alumni program MSIB dari mitra NF Academy. Dalam pemaparannya, beliau menjelaskan pentingnya peran front-end development di era digital saat ini. Front-end kini tidak hanya bertanggung jawab pada tampilan visual sebuah halaman web, tetapi juga membentuk pengalaman pengguna (user experience) yang interaktif dan responsif.
Fikri juga memaparkan bagaimana front-end development berkembang dari sekadar penggunaan HTML statis menjadi arsitektur modern berbasis komponen, serta penggunaan framework atau library seperti React.js. React menjadi salah satu teknologi pilihan utama karena kemampuannya membangun antarmuka pengguna secara efisien dan modular, serta didukung oleh komunitas yang sangat besar.
Dalam materi tersebut, peserta diajak memahami alasan kuat di balik penggunaan React.js. Beberapa di antaranya adalah efisiensi waktu pengembangan berkat komponen yang dapat digunakan kembali (reusable components), antarmuka pengguna yang dinamis dan cepat, serta kemudahan integrasi dengan teknologi lain. Fikri juga menjelaskan hubungan antara React.js sebagai library front-end dan Node.js sebagai runtime backend, yang bersama-sama dapat membentuk sistem aplikasi web yang utuh.
Peserta juga diperkenalkan pada perbandingan antara HTML biasa dan React.js. Dalam React, pengembangan dilakukan secara berbasis komponen dan menggunakan Virtual DOM—suatu konsep di mana React menciptakan representasi virtual dari DOM untuk mengoptimalkan pembaruan tampilan. Hal ini menjadikan React jauh lebih efisien dibandingkan manipulasi DOM langsung seperti pada HTML konvensional.
Untuk mendukung proses pengembangan, Fikri menunjukkan bagaimana memulai proyek React.js menggunakan Create React App maupun Vite. Ia juga menjelaskan struktur folder standar dalam proyek React, serta pentingnya memahami dasar-dasar React, seperti:
Komponen (Components): Bagian terkecil dari UI yang bersifat modular dan dapat digunakan ulang.
JSX: Sintaks khusus yang memungkinkan penulisan HTML di dalam JavaScript.
Props: Mekanisme untuk mengirim data dari komponen induk ke komponen anak.
State: Data internal dalam komponen yang dapat berubah seiring interaksi pengguna.
Virtual DOM: Representasi virtual dari DOM nyata yang membantu React merender perubahan dengan efisien.
Sementara itu, pada sesi workshop yang dipandu oleh Putra Pebriano, alumni MSIB dari mitra Bakrie Foundation, peserta diajak untuk mempraktikkan langsung pembuatan sebuah website mind mapping interaktif menggunakan React JS, React Flow, dan Node JS. Workshop dimulai dengan penjelasan mengenai tujuan dari pengembangan website tersebut, yaitu untuk membantu pengguna dalam menyusun dan memvisualisasikan ide atau rencana secara terstruktur. Materi dilanjutkan dengan pembahasan struktur codingan dan alur logika dalam aplikasi, serta implementasi langkah demi langkah mulai dari setup awal proyek hingga integrasi visualisasi peta pikiran menggunakan React Flow dan pengelolaan data sederhana dengan Node JS.
Kami berharap bahwa melalui kegiatan webinar dan workshop ini, para peserta tidak hanya mendapatkan wawasan teoretis, tetapi juga mampu mengaplikasikan pengetahuan yang didapat dengan membuat proyek website mind mapping mereka sendiri. Saya berharap hasil dari workshop ini dapat digunakan dalam kehidupan sehari-hari, khususnya dalam membantu menyusun dan mengelola ide-ide atau rencana melalui mind mapping digital secara mandiri dan efektif.
Kegiatan webinar dan workshop ini mendapat sambutan yang sangat positif dari para peserta. Hal tersebut terlihat dari keaktifan peserta dalam sesi diskusi dan tanya jawab, baik pada saat webinar maupun workshop. Banyak peserta yang mengajukan pertanyaan yang relevan seputar materi yang telah disampaikan. Antusiasme ini menjadi bukti bahwa kegiatan ini
Link sertifikat : https://drive.google.com/drive/folders/1XtmY7U5ymLlizDZryzFX0HVtAlEEhukh?usp=drive_link