{"id":1657,"date":"2026-03-30T10:31:17","date_gmt":"2026-03-30T10:31:17","guid":{"rendered":"https:\/\/online.binus.ac.id\/computer-science\/?p=1657"},"modified":"2026-03-31T02:28:38","modified_gmt":"2026-03-31T02:28:38","slug":"membangun-web-modern-dengan-react-js-dari-dasar-hingga-project-pertama","status":"publish","type":"post","link":"https:\/\/online.binus.ac.id\/computer-science\/2026\/03\/30\/membangun-web-modern-dengan-react-js-dari-dasar-hingga-project-pertama\/","title":{"rendered":"Membangun Web Modern dengan React JS: Dari Dasar hingga Project Pertama"},"content":{"rendered":"<p data-path-to-node=\"4\">Penulis: Bayu Permana Putra &#8211; Alumni BION CS (2440116675)<\/p>\n<p data-path-to-node=\"4\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1663\" src=\"https:\/\/online.binus.ac.id\/computer-science\/wp-content\/uploads\/sites\/4\/2026\/03\/reactJS.jpg\" alt=\"\" width=\"1280\" height=\"720\" srcset=\"https:\/\/online.binus.ac.id\/computer-science\/wp-content\/uploads\/sites\/4\/2026\/03\/reactJS.jpg 1280w, https:\/\/online.binus.ac.id\/computer-science\/wp-content\/uploads\/sites\/4\/2026\/03\/reactJS-300x169.jpg 300w, https:\/\/online.binus.ac.id\/computer-science\/wp-content\/uploads\/sites\/4\/2026\/03\/reactJS-1024x576.jpg 1024w, https:\/\/online.binus.ac.id\/computer-science\/wp-content\/uploads\/sites\/4\/2026\/03\/reactJS-768x432.jpg 768w, https:\/\/online.binus.ac.id\/computer-science\/wp-content\/uploads\/sites\/4\/2026\/03\/reactJS-480x270.jpg 480w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/p>\n<p data-path-to-node=\"4\">Sumber: https:\/\/medium.com\/nerd-for-tech\/react-fundamentals-basics-what-is-and-how-to-start-react-app-9258b2af87e9<\/p>\n<p data-path-to-node=\"4\">Halo rekan-rekan pengembang! Pernah merasa kewalahan saat harus mengelola tampilan website yang semakin kompleks? React JS hadir untuk menjawab tantangan itu dengan pendekatan yang interaktif, cepat, dan modular. Berikut adalah intisari dari apa yang perlu kalian pahami untuk mulai mendalami React.<\/p>\n<h3 data-path-to-node=\"5\">1. Struktur Proyek yang Rapi<\/h3>\n<p data-path-to-node=\"6\">Saat pertama kali membuat proyek React (misalnya menggunakan Vite atau Create React App), kalian akan melihat beberapa folder utama:<\/p>\n<ul data-path-to-node=\"7\">\n<li>\n<p data-path-to-node=\"7,0,0\"><b data-path-to-node=\"7,0,0\" data-index-in-node=\"0\">node_modules:<\/b> Tempat berkumpulnya semua <i data-path-to-node=\"7,0,0\" data-index-in-node=\"40\">library<\/i> JavaScript yang dibutuhkan.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"7,1,0\"><b data-path-to-node=\"7,1,0\" data-index-in-node=\"0\">public:<\/b> Berisi aset statis seperti gambar atau ikon yang bisa diakses publik.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"7,2,0\"><b data-path-to-node=\"7,2,0\" data-index-in-node=\"0\">SRC:<\/b> Ini adalah &#8220;dapur&#8221; utama kita. Di sinilah semua kode logika dan komponen aplikasi berada.<\/p>\n<\/li>\n<\/ul>\n<h3 data-path-to-node=\"8\">2. Kekuatan Komponen dan Props<\/h3>\n<p data-path-to-node=\"9\">Salah satu konsep terpenting di React adalah <b data-path-to-node=\"9\" data-index-in-node=\"45\">Komponen<\/b>. Kita bisa memecah bagian website (seperti Navbar, Footer, atau Card) menjadi unit-unit kecil yang bisa digunakan kembali.<\/p>\n<p data-path-to-node=\"10\">Agar komponen-komponen ini bisa saling &#8220;berbicara&#8221;, kita menggunakan <b data-path-to-node=\"10\" data-index-in-node=\"69\">Props<\/b>. Bayangkan Props sebagai cara mengirimkan data dari komponen induk (<i data-path-to-node=\"10\" data-index-in-node=\"143\">parent<\/i>) ke komponen anak (<i data-path-to-node=\"10\" data-index-in-node=\"169\">child<\/i>). Misalnya, kalian punya komponen &#8220;Hello&#8221;, kalian bisa mengirimkan nama yang berbeda-beda melalui Props.<\/p>\n<h3 data-path-to-node=\"11\">3. Mengelola Data dengan State dan Event<\/h3>\n<p data-path-to-node=\"12\">Jika Props digunakan untuk menerima data dari luar, <b data-path-to-node=\"12\" data-index-in-node=\"52\">State<\/b> digunakan untuk menyimpan informasi di dalam komponen itu sendiri.<\/p>\n<ul data-path-to-node=\"13\">\n<li>\n<p data-path-to-node=\"13,0,0\"><b data-path-to-node=\"13,0,0\" data-index-in-node=\"0\">UseState:<\/b> Ini adalah <i data-path-to-node=\"13,0,0\" data-index-in-node=\"21\">hook<\/i> paling dasar untuk membuat state. Contohnya, untuk menghitung jumlah klik (<i data-path-to-node=\"13,0,0\" data-index-in-node=\"101\">counter<\/i>).<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"13,1,0\"><b data-path-to-node=\"13,1,0\" data-index-in-node=\"0\">Event:<\/b> Digunakan untuk memicu aksi, seperti menangkap input dari <i data-path-to-node=\"13,1,0\" data-index-in-node=\"65\">keyboard<\/i> atau klik pada tombol.<\/p>\n<\/li>\n<\/ul>\n<h3 data-path-to-node=\"14\">4. Latihan Praktis: Membuat &#8220;To-Do List&#8221; Sederhana<\/h3>\n<p data-path-to-node=\"15\">Belajar teori saja tidak cukup. Mari kita lihat bagaimana konsep di atas digabungkan dalam proyek <i data-path-to-node=\"15\" data-index-in-node=\"98\">To-Do List<\/i>:<\/p>\n<ul data-path-to-node=\"16\">\n<li>\n<p data-path-to-node=\"16,0,0\">Kita menggunakan <b data-path-to-node=\"16,0,0\" data-index-in-node=\"17\">State<\/b> untuk menampung daftar tugas dan input teks terbaru.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"16,1,0\">Gunakan fungsi <b data-path-to-node=\"16,1,0\" data-index-in-node=\"15\">Filter<\/b> pada array untuk fitur hapus tugas berdasarkan indeksnya.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"16,2,0\">Gunakan <b data-path-to-node=\"16,2,0\" data-index-in-node=\"8\">Conditional Rendering<\/b> jika ingin menampilkan pesan tertentu saat daftar tugas masih kosong.<\/p>\n<\/li>\n<\/ul>\n<h3 data-path-to-node=\"17\">Penutup: Teruslah Bereksperimen<\/h3>\n<p data-path-to-node=\"18\">React memiliki ekosistem yang sangat luas. Materi dasar ini adalah pintu masuk kalian. Saran saya sebagai alumni: jangan hanya membaca, langsung buka Visual Studio Code kalian, jalankan <code data-path-to-node=\"18\" data-index-in-node=\"186\">npm run dev<\/code>, dan mulailah membangun sesuatu.<\/p>\n<p data-path-to-node=\"19\">Semoga bermanfaat dan selamat berkarya di dunia <i data-path-to-node=\"19\" data-index-in-node=\"48\">Front-End Development<\/i>!<\/p>\n<hr data-path-to-node=\"20\" \/>\n<p data-path-to-node=\"21\"><i data-path-to-node=\"21\" data-index-in-node=\"0\">Disarikan dari materi sharing Bayu Permana Putra (Alumni BINUS ONLINE).<\/i> <i data-path-to-node=\"21\" data-index-in-node=\"65\">Tonton tutorial lengkapnya di sini: <a class=\"ng-star-inserted\" href=\"https:\/\/www.youtube.com\/watch?v=7JBJPsAvFZM\" target=\"_blank\" rel=\"noopener\" data-hveid=\"0\" data-ved=\"0CAAQ_4QMahgKEwjYpPznrMeTAxUAAAAAHQAAAAAQjgI\">https:\/\/www.youtube.com\/watch?v=7JBJPsAvFZM<\/a><\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Penulis: Bayu Permana Putra &#8211; Alumni BION CS (2440116675) Sumber: https:\/\/medium.com\/nerd-for-tech\/react-fundamentals-basics-what-is-and-how-to-start-react-app-9258b2af87e9 Halo rekan-rekan pengembang! Pernah merasa kewalahan saat harus mengelola tampilan website yang semakin kompleks? React JS hadir untuk menjawab tantangan itu dengan pendekatan yang interaktif, cepat, dan modular. Berikut adalah intisari dari apa yang perlu kalian pahami untuk mulai mendalami React. 1. Struktur Proyek [&hellip;]<\/p>\n","protected":false},"author":702,"featured_media":1663,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-article"],"_links":{"self":[{"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/posts\/1657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/users\/702"}],"replies":[{"embeddable":true,"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/comments?post=1657"}],"version-history":[{"count":3,"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/posts\/1657\/revisions"}],"predecessor-version":[{"id":1880,"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/posts\/1657\/revisions\/1880"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/media\/1663"}],"wp:attachment":[{"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/media?parent=1657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/categories?post=1657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/online.binus.ac.id\/computer-science\/wp-json\/wp\/v2\/tags?post=1657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}