Sign in Subscribe

Gimana Rasanya Nulis Kode Pakai ReactJS Buat Pertama Kali

Gimana Rasanya Nulis Kode Pakai ReactJS Buat Pertama Kali
Photo by Sonika Agarwal/Unsplash

Hai guys, apa kabar? Lagi pada ngulik-ngulik dunia ngoding ya? Seru banget nih, apalagi kalau udah mulai melirik ke framework atau library yang bikin hidup developer lebih gampang. Nah, salah satu yang lagi naik daun dan kayaknya wajib banget kamu coba itu namanya ReactJS. Mungkin kamu udah sering denger, atau mungkin ini pertama kalinya kamu mikir, "Oke, saatnya nyentuh React!".

Rasanya gimana sih pas pertama kali nulis kode pakai ReactJS? Jujur aja ya, buat sebagian orang, awalnya itu campur aduk. Ada rasa penasaran, semangat buat nyobain teknologi baru yang katanya keren banget ini, tapi di sisi lain, ada juga sedikit (atau banyak) rasa nervous dan kebingungan. "Ini apaan sih JSX? Kok HTML nyampur sama JavaScript? Gimana cara bikin komponennya? State itu apa lagi?" Pertanyaan-pertanyaan itu wajar banget muncul di awal. Kayak lagi belajar bahasa baru gitu deh, ada aja kata-kata atau aturan yang bikin alis mengernyit.

Tapi santai aja, kamu nggak sendirian kok ngalamin itu. Hampir semua developer yang sekarang udah jago React juga pernah ada di posisi kamu sekarang. Groggy di awal itu normal. Yang penting, kamu mau coba dan nggak langsung nyerah.

Artikel ini bakal ngebahas pengalaman pertama kali ngoding pakai ReactJS, plus tips-tips simpel yang bisa bantu kamu biar perjalanan belajarnya lebih mulus dan nggak terlalu bikin pusing. Kita bakal bahas apa aja yang biasanya bikin kaget di awal, dan gimana cara ngadepinnya. Yuk, langsung aja kita kupas tuntas!

Mulai dari Mana? Setup Awal yang Bikin Deg-degan

Langkah pertama buat nyobain React itu biasanya setup proyek. Dulu, setup React itu lumayan PR. Kamu harus mikirin bundler kayak Webpack, ngurusin Babel buat transpilasi JSX dan fitur ES6+ lainnya, dan konfigurasi macem-macem. Ribet? Banget!

Untungnya, sekarang udah ada alat bantu yang bikin setup ini jadi gampang banget, yaitu Create React App (CRA) atau yang lebih modern lagi dan lagi hype banget, Vite.

Create React App: Ini kayak 'starter pack' resmi dari tim React. Kamu tinggal jalanin satu perintah di terminal, tunggu bentar, boom, proyek React dasar kamu udah siap! Udah termasuk Webpack, Babel, dan konfigurasi lainnya yang siap pakai. Cocok banget buat pemula yang nggak mau pusing mikirin tooling* di awal. Vite: Nah, kalau ini lebih baru dan lebih cepat buat development server-nya. Setup-nya juga gampang banget, cuma beda perintah dari CRA. Vite ini lagi banyak disukai karena kecepatan refresh-nya pas kamu ngubah kode (Hot Module Replacement - HMR) itu jauh lebih ngebut dibanding CRA. Kalau kamu nyari sesuatu yang kekinian dan ngebut*, Vite bisa jadi pilihan.

Buat pengalaman pertama, saran gue sih, pilih salah satu aja antara CRA atau Vite. Nggak perlu mikirin yang lain-lain dulu. Fokus aja gimana caranya proyek React kamu bisa jalan di browser. Begitu setup selesai dan kamu lihat tulisan "App" atau "Learn React" di browser, ada rasa lega campur bangga gitu deh. "Oke, project pertama based on React udah jalan!"

Tips buat setup awal:

  • Pastikan Node.js dan npm/yarn/pnpm udah terinstal di komputermu. React butuh ini.
  • Ikuti dokumentasi resmi CRA atau Vite. Mereka udah jelas banget panduannya.

Jangan takut sama terminal atau command prompt. Ini temen baikmu di dunia web development*. Kalau nemu error pas setup, copy-paste* pesan error-nya ke Google atau Stack Overflow. Biasanya udah banyak yang ngalamin dan ada solusinya.

Ketemu JSX: Ini HTML atau JavaScript Sih?

Nah, ini dia salah satu hal pertama yang bikin kaget di React: JSX. Pas pertama lihat kode React, kok ada tag-tag mirip HTML di dalam file JavaScript (.js atau .jsx)? Kayak gini nih:

jsx
function App() {
  return (
    
      Halo, Dunia React!
      Ini komponen pertamaku.
    
  );
}

Ini namanya JSX (JavaScript XML). Ini bukan HTML beneran, dan juga bukan string HTML biasa. JSX ini adalah syntax extension buat JavaScript yang memungkinkan kamu menulis struktur UI (mirip HTML) di dalam kode JavaScript. Nanti, JSX ini bakal "ditranspilasi" (diubah) sama Babel jadi kode JavaScript murni yang dipahami browser.

Fungsinya JSX ini apa? Biar lebih gampang aja nulis struktur UI yang dinamis. Bayangin kalau kamu harus bikin elemen DOM satu per satu pakai document.createElement('div'), terus div.appendChild(h1), h1.textContent = '...'. Ribet kan? Dengan JSX, kodenya jadi lebih declarative dan mirip sama apa yang kamu lihat di browser.

Awalnya mungkin terasa aneh, kayak nyampuraduk. Tapi lama kelamaan, kamu bakal ngerasa ini jauh lebih intuitif buat bikin komponen UI.

Hal-hal yang perlu diperhatikan soal JSX di awal:

  • className bukan class: Di HTML kita pakai class, tapi di JSX pakainya className. Kenapa? Karena class itu kata kunci (keyword) di JavaScript (untuk bikin class).

Kurung Kurawal {}: Kalau kamu mau masukin variabel JavaScript, ekspresi, atau bahkan memanggil fungsi di dalam JSX, pakainya kurung kurawal {}. Contoh:

{namaVariabel}

.

Satu Elemen Root: Setiap komponen React (yang me-return JSX) harus me-return satu elemen "root". Jadi, nggak boleh langsung return dua elemen paralel kayak gini: return (

Satu

Dua

);. Solusinya? Bungkus pakai satu elemen parent* (biasanya,,, atau yang paling modern dan nggak nambah elemen DOM tambahan: atau shorthand-nya <>).

  • Atribut camelCase: Atribut HTML kayak onclick jadi onClick, onchange jadi onChange, tabindex jadi tabIndex, dll. Atribut yang tadinya pakai dash (-) diganti jadi camelCase.

Tips menghadapi JSX:

  • Anggap aja ini cara nulis HTML di dalam JS, tapi dengan beberapa aturan tambahan.

Sering-sering lihat contoh kode. Makin sering lihat, makin familiar sama syntax*-nya. Jangan takut salah. Browser Console atau terminal tempat development server jalan bakal kasih tahu kalau ada kesalahan syntax* JSX.

Mengenal Komponen: Blok Bangunan UI

React itu intinya component-based. Artinya, kamu bakal ngebangun seluruh aplikasi dari komponen-komponen kecil yang bisa dipakai ulang (reusable). Bayangin Lego. Satu set Lego itu terdiri dari banyak balok-balok kecil dengan bentuk dan ukuran yang berbeda. Nah, komponen di React itu ibarat balok-balok Lego itu. Kamu bikin komponen Header, komponen Sidebar, komponen Button, komponen Card, dan lain-lain. Komponen-komponen kecil ini lalu digabung-gabungin buat bikin halaman yang lebih besar.

Pas pertama kali bikin komponen, rasanya kayak, "Oh, gini toh cara misahin UI jadi bagian-bagian kecil." Kamu bakal nulis fungsi JavaScript (atau class, tapi sekarang kebanyakan pakai fungsi) yang me-return JSX. Contoh komponen sederhana:

jsx
function Tombol(props) {
  return (
    {props.teks}
  );
}

Ada dua jenis komponen di React: Functional Components (pakai fungsi) dan Class Components (pakai class JavaScript). Belakangan ini, functional components jadi lebih populer, apalagi setelah munculnya React Hooks. Buat pemula, fokus aja dulu belajar functional components. Lebih simpel dan modern.

Tips soal komponen:

  • Pikirkan UI aplikasi kamu sebagai kumpulan blok. Mana aja yang bisa dijadiin komponen terpisah? Contoh: header, footer, navigasi, kartu produk, form input.
  • Beri nama komponen dengan huruf kapital di awal (PascalCase), contoh: NamaKomponenKu. Ini konvensi di React.
  • Setiap komponen sebaiknya punya satu tugas atau mewakili satu bagian UI yang logis. Jangan bikin komponen yang kerjanya terlalu banyak (terlalu "gemuk").

Fokus ke reusability*. Gimana caranya komponen ini bisa dipakai di tempat lain dengan data yang berbeda? (Ini nanti nyambung ke Props).

Props: Ngasih Data ke Komponen

Kalau komponen itu ibarat balok Lego, Props (singkatan dari Properties) itu ibarat cara kamu ngasih warna atau stiker ke balok Lego itu, atau ngasih tahu balok pintu mau dibuka ke arah mana. Props adalah cara buat ngirim data dari komponen "induk" (parent) ke komponen "anak" (child).

Contoh di atas: alert('Tombol diklik!')} />. Di sini, teks dan handleClick itu adalah props yang dikirim dari komponen yang memanggil . Di dalam komponen Tombol, props itu diterima sebagai argumen pertama dari fungsi komponen, biasanya dalam bentuk objek props. Lalu, kita bisa akses nilai teks pakai props.teks dan fungsi handleClick pakai props.handleClick.

Konsep props ini penting banget di React. Ini cara utama komunikasi antar komponen (dari parent ke child).

Hal penting tentang Props: Props itu read-only*. Artinya, komponen anak nggak boleh ngubah nilai props yang dia terima dari parent. Kalau mau ngubah data, itu urusannya State (nanti kita bahas). Bisa ngirim data jenis apa aja lewat props: string, number, boolean, array, object, bahkan fungsi*.

Tips soal Props:

  • Pikirkan props sebagai "konfigurasi" untuk komponen anak. Apa aja yang perlu diketahui komponen anak biar dia bisa tampil dan berfungsi sesuai keinginan parent-nya?

Pakai object destructuring di argumen fungsi komponen biar lebih ringkas: function Tombol({ teks, handleClick }) { ... }. Ini sama aja kayak nerima objek props terus akses props.teks dan props.handleClick, tapi syntax*-nya lebih enak dibaca.

State: Ngatur Data di Dalam Komponen

Kalau Props itu buat data yang datang dari luar (parent), State itu buat data yang dimiliki dan dikelola oleh komponen itu sendiri. State adalah apa yang membuat UI di React bisa interaktif dan berubah-ubah seiring waktu, berdasarkan interaksi user atau data baru yang datang.

Contoh paling gampang: tombol "Like". Jumlah like-nya kan bisa berubah kalau diklik kan? Nah, jumlah like itu disimpan di dalam State komponen tombol atau komponen parent-nya. Pas tombol diklik, kita update state jumlah like, dan React bakal otomatis mengulang render (me-render ulang) komponen itu dengan data state yang baru, sehingga angka like di UI ikut berubah.

Dulu, State cuma bisa dipakai di Class Components. Tapi sejak munculnya React Hooks, kita bisa pakai State di Functional Components pakai hook useState. Ini bikin functional components jadi powerful banget.

Cara pakai useState:

jsx
import React, { useState } from 'react';function Konter() {
  // deklarasi state 'jumlah' dengan nilai awal 0
  const [jumlah, setJumlah] = useState(0);return (
    
      Jumlah: {jumlah}
       setJumlah(jumlah + 1)}>
        Tambah
      
    
  );
}

useState(0) itu menginisialisasi state jumlah dengan nilai awal 0. Fungsi ini me-return sebuah array dengan dua elemen:

  1. Variabel state saat ini (jumlah).
  2. Sebuah fungsi untuk mengupdate state (setJumlah).

Pas tombol "Tambah" diklik, kita panggil setJumlah(jumlah + 1). Ini bakal ngasih tahu React, "Hei, state jumlah di komponen Konter berubah jadi jumlah + 1 ya!". React lalu bakal me-render ulang komponen Konter dengan nilai jumlah yang baru.

Hal penting tentang State: State itu private buat komponen yang mendefinisikannya (kecuali kalau di-lifting up* ke parent, tapi itu topik lain). Untuk mengubah state, kamu harus pakai fungsi updater yang diberikan oleh useState (contoh: setJumlah). Kamu nggak boleh langsung ngubah variabel state-nya (contoh: jumlah = jumlah + 1; - ini nggak akan* me-render ulang komponen). Update state itu bisa asynchronous. Artinya, pas kamu panggil setJumlah, state-nya belum tentu langsung berubah di baris kode berikutnya. Kalau kamu butuh nilai state yang paling baru setelah update, ada cara lain (misalnya pakai callback* di fungsi updater, atau pakai useEffect).

Tips soal State:

  • Pikirkan data apa di UI kamu yang bisa berubah. Data itulah yang kemungkinan perlu disimpan di State.

Gunakan useState buat data yang simpel (angka, string, boolean, array, object*). Kalau mau update state berdasarkan nilai state sebelumnya, pakai functional update*: setJumlah(prevJumlah => prevJumlah + 1). Ini lebih aman kalau ada beberapa update yang terjadi berdekatan.

Lifecycle Komponen & Efek Samping dengan useEffect

Dulu di Class Components ada yang namanya component lifecycle methods (kayak componentDidMount, componentDidUpdate, componentWillUnmount). Ini buat ngatur apa yang terjadi pada berbagai "tahapan kehidupan" komponen (misalnya pas baru muncul di layar, pas diupdate, pas mau hilang dari layar).

Di Functional Components, konsep ini digantikan sama hook useEffect. useEffect ini dipakai buat ngurusin "efek samping" (side effects) di komponen kamu. Efek samping itu apa? Contohnya:

  • Mengambil data dari API (fetching data).
  • Manipulasi DOM secara langsung (jarang dibutuhkan di React, tapi kadang perlu).

Menyiapkan atau membersihkan event listeners*. Menyiapkan atau membersihkan subscriptions*. Mengatur timer* (setTimeout, setInterval).

useEffect berjalan setelah komponen selesai di-render. Syntax dasarnya gini:

jsx
import React, { useState, useEffect } from 'react';function DataFetcher() {
  const [data, setData] = useState(null);useEffect(() => {
    // Efek samping: Ambil data dari API
    fetch('https://api.contoh.com/data')
      .then(response => response.json())
      .then(result => setData(result));// Opsional: Fungsi cleanup (mirip componentWillUnmount)
    return () => {
      // Batalkan proses fetching jika komponen hilang sebelum selesai
      // atau bersihkan event listener, timer, dll.
      console.log('Cleanup effect');
    };
  }, []); // Dependency Array: Effect hanya jalan sekali saat komponen pertama kali muncul (mount)if (!data) {
    return Loading...;
  }return (
    
      Data:
      {JSON.stringify(data, null, 2)}
    
  );
}

Hal penting tentang useEffect:

  • Argumen pertama adalah fungsi yang berisi kode efek samping kamu.

Argumen kedua adalah dependency array* (array kosong [] atau berisi variabel/state/props). Array ini ngasih tahu React kapan useEffect harus dijalankan ulang: Array kosong ([]): Effect hanya berjalan sekali* setelah render pertama (mirip componentDidMount). Cocok buat fetching data awal. Tidak ada dependency array (argumen kedua dihilangkan): Effect berjalan setiap* kali komponen di-render ulang. Jarang dipakai. Array berisi variabel/state/props ([variabel1, state2]): Effect berjalan setiap kali* salah satu nilai di dalam array itu berubah. Ini yang paling umum dan fleksibel (mirip componentDidUpdate). Fungsi return di dalam argumen pertama useEffect adalah fungsi cleanup. Ini bakal dijalankan sebelum effect dijalankan ulang (jika dependencies berubah) atau saat komponen unmount (hilang dari layar) (mirip componentWillUnmount). Penting buat mencegah memory leaks*.

Tips soal useEffect:

  • Jangan taruh kode efek samping (kayak fetching data, manipulasi DOM) langsung di body fungsi komponen. Taruh di dalam useEffect.

Perhatikan dependency array*! Ini sering jadi sumber bug kalau salah ngaturnya. Kalau effect kamu butuh mengakses state atau props tertentu, pastikan state/props itu ada di dependency array. Selalu pikirkan fungsi cleanup* kalau effect kamu melakukan sesuatu yang butuh dihentikan atau dibersihkan (misalnya, setup timer, event listener global, subscription).

Menghadapi Error: Teman Belajar Terbaikmu

Pas pertama kali ngoding React, siap-siap aja ketemu error. Tenang, itu normal banget! Error itu bukan musuh, tapi justru teman terbaik yang ngasih tahu di mana letak kesalahanmu.

Di React, error biasanya muncul di dua tempat:

  1. Browser Console: Kalau error-nya terkait dengan JavaScript di frontend (misalnya salah akses properti, salah panggil fungsi, error runtime).
  2. Terminal/Command Prompt: Kalau error-nya terkait dengan kompilasi, syntax JSX yang salah, atau error di development server-nya.

Pesan error dari React biasanya cukup informatif. Baca baik-baik! Seringkali mereka ngasih tahu di file mana error-nya terjadi dan di baris ke berapa.

Tips menghadapi error:

  • Baca Pesan Errornya: Jangan panik. Pelan-pelan baca pesan errornya. Apa yang dibilang? Di file mana? Baris berapa?

Google It: Copy-paste* pesan error yang paling spesifik ke Google atau Stack Overflow. Peluang besar orang lain udah pernah ngalamin error yang sama dan ada solusinya.

  • Cek Dokumentasi: Kalau error-nya terkait penggunaan API React (misalnya salah pakai hook), cek dokumentasi resmi React.

Debug: Gunakan console.log() buat ngecek nilai variabel atau di bagian mana kode kamu berhenti berjalan. Di browser modern, kamu juga bisa pakai debugger* yang powerful. Mulai dari yang Simpel: Kalau error-nya bikin pusing, coba undo kode terakhir yang kamu tulis sampai aplikasi kamu jalan lagi. Lalu tambahin kodenya sedikit demi sedikit sambil dicek tiap langkahnya. Ini cara debugging* yang efektif.

Tips Tambahan buat Pemula React

Selain hal-hal teknis di atas, ada beberapa tips lain yang bisa bikin pengalaman belajar React kamu lebih menyenangkan dan efektif:

  1. Jangan Buru-buru Pakai State Management: Awalnya, cukup pakai useState dan useContext (untuk ngirim props tanpa ngeboros di banyak level komponen). Nggak perlu langsung belajar Redux, Zustand, atau yang lain. Itu topik lanjutan nanti.
  2. Fokus ke Konsep Inti: Pastikan kamu paham banget soal Components, JSX, Props, State (useState), dan Side Effects (useEffect). Ini pondasi React.
  3. Bikin Proyek Kecil: Jangan langsung bikin aplikasi social media atau e-commerce. Mulai dari yang simpel kayak aplikasi to-do list, kalkulator, atau menampilkan data dari API sederhana. Proyek kecil bikin kamu bisa latihan konsep dasar tanpa kewalahan.
  4. Ikut Tutorial Interaktif: Banyak tutorial online yang ngasih latihan langsung di browser. Ini bagus banget buat langsung praktik.
  5. Pahami Kenapa Pakai React: React bukan cuma tentang syntax, tapi juga tentang cara berpikir membangun UI. Pahami kenapa komponen itu penting, kenapa state dan props dipisah, dan kenapa pola declarative itu lebih enak.
  6. Komunitas itu Penting: Bergabunglah dengan komunitas developer (online atau offline). Kalau stuck, bisa tanya-tanya. Belajar bareng juga lebih seru.
  7. Sabar dan Konsisten: Belajar hal baru memang butuh waktu. Akan ada saatnya kamu ngerasa stuck atau frustrasi. Jangan nyerah! Istirahat sebentar, lalu coba lagi. Konsisten latihan tiap hari, meskipun cuma sebentar.

Rasanya Setelah Lewat Tahap Awal

Setelah kamu melewati fase awal yang penuh kebingungan dengan JSX, Props, dan State, kamu bakal mulai ngerasain "aha!" momen. Kamu bakal mulai ngelihat pola-pola di kode React, ngerti kenapa kodenya ditulis kayak gitu, dan mulai bisa mikirin struktur aplikasi kamu dalam bentuk komponen.

Meskipun awalnya mungkin terasa canggung, lama kelamaan nulis kode React bakal terasa natural. Kamu bakal mulai ngerasain gimana React bikin hidup lebih gampang buat ngurusin UI yang kompleks dan interaktif. Hot Module Replacement (HMR) di development server (apalagi kalau pakai Vite) yang langsung nampilin perubahan kode tanpa refresh halaman penuh itu satisfying banget! Kamu jadi bisa iterasi (coba-coba dan perbaiki) UI lebih cepat.

Pengalaman pertama kali nulis kode ReactJS itu memang kayak naik roller coaster mini. Ada naik-turunnya, ada kagetnya, tapi di akhirnya, ada rasa puas karena udah berhasil menaklukkan sesuatu yang baru dan powerful. React ini worth it banget buat dipelajari, apalagi kalau kamu serius di frontend development.

Jadi, buat kamu yang baru mau mulai atau lagi di tengah-tengah pengalaman pertama sama React, semangat terus ya! Nggak ada yang instan di dunia ngoding. Teruslah eksplorasi, coba-coba bikin sesuatu, jangan takut salah, dan nikmati proses belajarnya. Begitu kamu udah klik sama React, pintunya bakal kebuka lebar ke banyak kemungkinan di dunia web development modern. Selamat ngoding!