Sign in Subscribe

ReactJS Dasar Biar Kamu Langsung Bisa Praktek

ReactJS Dasar Biar Kamu Langsung Bisa Praktek
Photo by Natalia Sedova/Unsplash

Halo teman-teman calon developer! Pernah denger ReactJS? Atau mungkin lagi kepo pengen nyelam ke dunia React tapi bingung mulai dari mana? Pas banget! Artikel ini dibuat khusus buat kalian yang pengen kenalan sama ReactJS dari dasar sampai bisa langsung nyoba bikin sesuatu. Santai aja, kita bakal bahasnya pelan-pelan biar gampang dicerna.

Apa Sih ReactJS Itu dan Kenapa Populer?

Jadi gini, ReactJS itu library JavaScript yang dibuat sama Facebook (sekarang Meta) buat bikin antarmuka pengguna (user interface atau UI) yang interaktif dan efisien, terutama buat aplikasi single-page application (SPA). Intinya, React itu membantu kita bikin tampilan website atau aplikasi web yang dinamis, cepat, dan rasanya kayak aplikasi desktop, padahal diakses lewat browser.

Kenapa populer banget?

  • Component-Based: React itu kayak main LEGO. Kita bikin potongan-potongan UI kecil yang namanya "komponen". Komponen ini bisa dipakai ulang di mana aja, bikin ngoding jadi lebih rapi, terstruktur, dan gampang di-maintain.
  • Declarative: Daripada bilang "ubah elemen ini, lalu tambahkan kelas itu, lalu sembunyikan elemen lain", di React kita cukup bilang "tampilkan ini kalau kondisinya begini". React yang ngurusin gimana caranya supaya UI-nya sesuai sama kondisi data terbaru. Ini bikin kode lebih gampang dipahami dan debugging juga lebih mudah.

Virtual DOM: Ini salah satu kunci performa React. React punya representasi virtual dari DOM (Document Object Model) yang asli. Ketika ada perubahan data, React akan menghitung perbedaan antara Virtual DOM yang baru dan yang lama, lalu hanya* memperbarui bagian yang berubah di DOM asli. Ini jauh lebih cepat daripada harus memanipulasi DOM asli secara langsung setiap kali ada perubahan kecil.

  • Ekosistem Luas: Komunitasnya gede banget, banyak banget library tambahan yang siap pakai buat berbagai kebutuhan (routing, state management, fetching data, dll.).

Singkatnya, React bikin hidup developer frontend jadi lebih gampang dan bikin aplikasi yang kita bangun jadi lebih powerful.

Modal Awal Buat Belajar React

Sebelum nyelam lebih dalam, ada beberapa modal dasar yang perlu kalian punya:

  1. HTML & CSS: Ya, ini wajib. React itu buat ngurusin tampilan, jadi kalian harus ngerti struktur dasar HTML dan gimana cara ngasih gaya pakai CSS.
  2. JavaScript: Ini yang paling penting. React itu kan library JavaScript, jadi kalian harus familiar sama konsep-konsep dasar JavaScript modern (ES6+), kayak variabel (let, const), arrow functions, modules (import/export), array methods (map, filter), dan asynchronous JavaScript (Promises, async/await) kalau mau main yang agak kompleks nanti. Jangan khawatir kalau belum jago-jago banget, sambil jalan juga bisa kok belajarnya.

Oke, kalau modal dasar udah siap, lets goo!

Mempersiapkan Lingkungan Belajar

Buat mulai ngoding React, kita butuh beberapa alat:

  1. Node.js dan npm/yarn: React butuh Node.js buat menjalankan tooling dan paket-paketnya. npm (Node Package Manager) atau yarn adalah package manager yang dipakai buat mengunduh dan mengelola library JavaScript yang kita pakai. Kalian bisa unduh Node.js di website resminya (nodejs.org). npm biasanya sudah otomatis terinstal bareng Node.js. Kalau mau pakai yarn, kalian bisa instal global setelah Node.js terinstal (npm install -g yarn).
  2. Text Editor / IDE: Kalian butuh tempat buat nulis kode. Rekomendasi paling populer adalah VS Code (Visual Studio Code) karena banyak ekstensi yang support banget buat pengembangan React.
  3. Cara Membuat Project React Baru: Dulu Create React App (CRA) sangat populer, tapi sekarang ada alternatif yang lebih cepat dan modern, namanya Vite. Untuk artikel dasar ini, kita bisa pakai Vite karena setup-nya cepat dan build time-nya ngebut.

* Buka terminal atau command prompt. * Arahkan ke folder di mana kalian mau menyimpan project. * Jalankan perintah ini:

bash
        npm create vite@latest my-react-app --template react

atau pakai yarn:

bash
        yarn create vite my-react-app --template react

* my-react-app adalah nama folder project kalian, bisa diganti sesuai keinginan. * Ikuti petunjuknya. Nanti akan ada pilihan framework, pilih "React". * Setelah selesai, masuk ke folder project kalian:

bash
        cd my-react-app

* Instal dependencies-nya:

bash
        npm install

atau

bash
        yarn install

* Jalankan aplikasi pertamamu:

bash
        npm run dev

atau

bash
        yarn dev

* Buka browser dan akses alamat yang ditunjukkan di terminal (biasanya http://localhost:5173 atau port lain). Harusnya kalian sudah melihat halaman awal React yang dibuat oleh Vite.

Selamat! Kalian sudah berhasil membuat project React pertama kalian. Sekarang, mari kita bedah isinya dan mulai ngoding.

Bedah Struktur Folder (Versi Vite)

Kalau kalian buka project my-react-app di VS Code, kalian akan lihat struktur folder kira-kira begini:

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx      <-- Komponen utama
│   ├── index.css
│   ├── main.jsx     <-- Titik masuk aplikasi
│   └── vite-env.d.ts
├── .eslintrc.cjs
├── .gitignore
├── index.html       <-- Halaman HTML dasar
├── package.json     <-- Informasi project dan dependencies
├── vite.config.js
└── README.md
  • node_modules/: Isinya semua library yang dibutuhkan project kita (hasil dari npm install atau yarn install). Jangan dihapus atau diutak-atik manual di sini ya.
  • public/: Buat file-file statis kayak gambar atau font yang nggak perlu di-proses sama Vite.
  • src/: Nah, ini inti project kita! Semua kode React kita bakal ada di sini.

* main.jsx: Ini file titik masuk (entry point) aplikasi kita. Di sini kita kasih tahu React, "tolong render aplikasi saya, mulai dari komponen App, dan pasang di elemen HTML yang ID-nya 'root'". * App.jsx: Ini komponen utama (root component) dari aplikasi kita. Biasanya semua komponen lain akan dirender di dalam App. * index.css, App.css: File CSS buat styling.

  • index.html: File HTML dasar yang akan diakses browser. Di sini ada . Nah, di div inilah aplikasi React kita akan "dipasang".
  • package.json: Kayak KTP project kalian. Ada nama project, versi, daftar library yang dipakai, dan script buat jalanin aplikasi (misalnya dev buat development).

Konsep Inti 1: Komponen (Components)

Seperti yang dibilang tadi, React itu component-based. Komponen itu ibarat blok bangunan UI. Misalnya, di Instagram, ada komponen "Post", di dalam "Post" ada komponen "Foto/Video", "Caption", "Tombol Like", "Tombol Komentar", dll. Setiap komponen punya tugasnya sendiri.

Di React modern, kita paling sering pakai Functional Components. Ini cuma fungsi JavaScript biasa yang mengembalikan (return) kode yang terlihat seperti HTML (nanti kita bahas ini namanya JSX).

Contoh komponen sederhana di file src/components/Greeting.jsx (buat folder components di dalam src ya):

jsx
// src/components/Greeting.jsx
import React from 'react';function Greeting() {
  return (
    
      Halo, Selamat Datang di React!
      Ini komponen pertamaku!
    
  );
}

Nah, gimana cara nampilin komponen Greeting ini di aplikasi kita? Kita panggil di komponen App.jsx:

jsx
// src/App.jsx
import './App.css';
import Greeting from './components/Greeting'; // Import komponen Greetingfunction App() {
  return (
     {/ Pakai className ya, bukan class /}
       {/ Panggil komponennya seperti tag HTML /}
      Ini di dalam komponen App, setelah komponen Greeting.
    
  );
}

Kalau kalian lihat di browser, sekarang ada tulisan dari komponen Greeting. Gampang kan? Kita tinggal menggunakan komponen lain seperti tag HTML biasa.

Konsep Inti 2: JSX (JavaScript XML)

Oke, tadi kita lihat ada kode di dalam return komponen yang bentuknya mirip HTML tapi ada di dalam file JavaScript (.jsx). Itu namanya JSX. JSX itu singkatan dari JavaScript XML.

JSX bukan HTML murni, dan bukan string. JSX itu sintaks extension buat JavaScript yang memungkinkan kita menulis struktur UI yang familiar kayak HTML. Nanti kode JSX ini akan ditranspilasi (diubah) oleh tools seperti Babel (yang terintegrasi di Vite) menjadi pemanggilan fungsi React murni (React.createElement()).

Beberapa aturan penting di JSX:

  • Harus Mengembalikan Satu Elemen Root: Setiap komponen atau blok JSX harus mengembalikan satu parent element. Jadi, kalau ada beberapa elemen di level teratas, mereka harus dibungkus dalam satu div, span, atau elemen lain. Kalian juga bisa pakai Fragment <> kalau nggak mau nambahin elemen extra di DOM.
jsx
    // BENAR
    return (
      
        Judul
        Deskripsi
      
    );// BENAR (pakai Fragment)
    return (
      <>
        Judul
        Deskripsi
      
    );// SALAH
    // return (
    //   Judul
    //   Deskripsi // Error karena ada dua elemen root
    // );
  • Gunakan className bukan class: Karena class adalah reserved keyword di JavaScript, di JSX kita pakai className buat mendefinisikan kelas CSS.
jsx
    ...
  • Kurung Kurawal {} untuk Kode JavaScript: Kalau mau masukin variabel JavaScript, ekspresi, atau memanggil fungsi di dalam JSX, gunakan kurung kurawal {}.
jsx
    const name = "Developer";
    return (
      Halo, {name}! // Memasukkan variabel name
    );
  • CamelCase untuk Atribut HTML: Atribut HTML yang namanya lebih dari satu kata ditulis pakai camelCase, contohnya htmlFor (bukan for) buat label, tabIndex (bukan tabindex).

Self-Closing Tags: Tag elemen yang nggak punya konten di dalamnya (misalnya

, ,) harus ditutup sendiri pakai garis miring di akhir (/>).

jsx

JSX ini bikin kode React jadi lebih readable dan mirip sama HTML yang udah familiar buat kita.

Konsep Inti 3: Props (Properties)

Seringkali, komponen itu perlu data dari luar buat nampilin sesuatu yang dinamis. Misalnya, komponen Greeting tadi, kita pengen biar sapaannya bisa custom, nggak cuma "Halo, Selamat Datang". Data yang kita kasih dari komponen induk (parent) ke komponen anak (child) ini namanya Props.

Props itu kayak argumen ke fungsi, tapi buat komponen React. Kita passing data lewat atribut saat memanggil komponen.

Contoh, kita ubah komponen Greeting biar bisa nerima nama sebagai props:

jsx
// src/components/Greeting.jsx
import React from 'react';// Menerima props sebagai argumen pertama
function Greeting(props) {
  return (
    
      {/ Mengakses data dari props /}
      Halo, {props.name}!
      Selamat datang di aplikasi kami.
    
  );
}

Atau dengan destructuring (cara yang lebih umum dan bersih):

jsx
// src/components/Greeting.jsx
import React from 'react';// Menerima props dan langsung mengambil properti 'name'
function Greeting({ name }) {
  return (
    
      Halo, {name}!
      Selamat datang di aplikasi kami.
    
  );
}

Sekarang, di komponen App.jsx, kita panggil komponen Greeting dan kasih atribut name:

jsx
// src/App.jsx
import './App.css';
import Greeting from './components/Greeting';function App() {
  const userName = "Budi"; // Data yang mau kita passingreturn (
    
      {/ Passing data userName ke props 'name' /}
      
       {/ Bisa juga langsung string /}
       {/ Bisa juga angka /}
      Ini di dalam komponen App.
    
  );
}

Outputnya nanti akan menampilkan sapaan untuk "Budi", "Siti", dan "123". Keren kan? Komponen yang sama bisa dipakai berkali-kali dengan data yang berbeda.

Props itu Read-Only: Penting diingat, komponen tidak boleh mengubah props yang diterimanya. Props sifatnya immutable (tidak bisa diubah) dari sisi komponen penerima. Kalau datanya perlu diubah, kita butuh yang namanya State.

Konsep Inti 4: State

Props itu buat data yang datang dari luar dan sifatnya statis (dari sisi komponen anak). Tapi gimana kalau komponen itu punya data internal yang bisa berubah seiring waktu, misalnya nilai counter, status tombol (aktif/tidak aktif), atau input dari user? Nah, ini yang namanya State.

Di Functional Components, kita mengelola state pakai Hook yang namanya useState. Hook itu fungsi spesial di React yang memungkinkan kita "menghubungkan" functional component ke fitur-fitur React, kayak state.

Cara pakai useState:

  • Import dari React: import React, { useState } from 'react';
  • Panggil di dalam komponen: const [namaState, setNamaState] = useState(nilaiAwal);

* namaState: Nama variabel state-nya. * setNamaState: Fungsi buat mengubah nilai state tersebut. Nama fungsi ini convention-nya pakai "set" di depannya diikuti nama state-nya. * nilaiAwal: Nilai awal dari state tersebut.

Contoh: Komponen Counter sederhana

jsx
// src/components/Counter.jsx
import React, { useState } from 'react'; // Import useStatefunction Counter() {
  // Deklarasi state 'count' dengan nilai awal 0
  const [count, setCount] = useState(0);// Fungsi untuk menambah count
  const handleIncrement = () => {
    setCount(count + 1); // Mengubah nilai state count
  };// Fungsi untuk mengurangi count
  const handleDecrement = () => {
    setCount(count - 1); // Mengubah nilai state count
  };return (
    
      Counter Sederhana
      Nilai count: {count} {/ Menampilkan nilai state /}
      Tambah {/ Pakai event handler /}
      Kurang
    
  );
}

Dan panggil di App.jsx:

jsx
// src/App.jsx
import './App.css';
import Greeting from './components/Greeting';
import Counter from './components/Counter'; // Import komponen Counterfunction App() {
  return (
    
      
       {/ Panggil komponen Counter /}
    
  );
}

Sekarang kalau kalian klik tombol "Tambah" atau "Kurang" di browser, angka counternya akan berubah. Saat state berubah, React akan otomatis me-render ulang (re-render) komponen tersebut dengan nilai state yang baru. Ini yang bikin UI kita jadi interaktif!

Penting: Selalu ubah state pakai fungsi set... yang diberikan oleh useState. Jangan ubah state secara langsung (misalnya count = count + 1;), karena React nggak akan tahu kalau state-nya berubah dan UI nggak akan di-render ulang.

Konsep Inti 5: Event Handling

React punya cara sendiri buat menangani event di browser (misalnya klik tombol, input teks, submit form). Mirip sama HTML, tapi pakai penamaan camelCase dan kita passing function sebagai value-nya.

Contoh di komponen Counter tadi, kita punya onClick={handleIncrement}. onClick adalah prop event handler di elemen button, dan kita kasih fungsi handleIncrement ke prop tersebut.

Ketika tombol diklik, fungsi handleIncrement akan dipanggil. Di dalam fungsi itulah kita melakukan perubahan state menggunakan setCount.

Beberapa event handler umum di React:

  • onClick
  • onChange (untuk input, textarea, select)
  • onSubmit (untuk form)
  • onMouseEnter, onMouseLeave
  • dll.

Event handler ini bisa menerima objek event sebagai argumen pertamanya, mirip seperti di JavaScript biasa.

jsx
function handleChange(event) {
  console.log(event.target.value); // Mengakses nilai input
}

Konsep Inti 6: Conditional Rendering

Kita seringkali perlu menampilkan atau menyembunyikan elemen UI berdasarkan kondisi tertentu (misalnya, tampilkan pesan error kalau data gagal diambil, tampilkan tombol kalau user sudah login). Di React, ini namanya Conditional Rendering.

Cara paling umum:

  1. if / else (di luar JSX): Kalian bisa pakai logika if atau else di luar blok return JSX, lalu mengembalikan JSX yang berbeda.
jsx
    function Greeting({ isLoggedIn }) {
      if (isLoggedIn) {
        return Selamat datang kembali!;
      }
      return Silakan login.;
    }
  1. Operator Ternary (kondisi ? true : false) (di dalam JSX): Ini cara ringkas buat kondisi sederhana di dalam JSX.
jsx
    function Status({ isLoading }) {
      return (
        
          {isLoading ? Loading... : Data siap.}
        
      );
    }
  1. Operator Logika && (AND) (di dalam JSX): Kalau cuma perlu menampilkan sesuatu jika kondisi benar, tanpa ada alternatif else. Jika kondisi kiri benar, React akan mengevaluasi dan menampilkan ekspresi di kanan &&. Jika kondisi kiri salah, React akan mengabaikan ekspresi di kanan.
jsx
    function Warning({ showWarning }) {
      return (
        
          {showWarning && Ada peringatan!}
        
      );
    }

Pilih cara yang paling pas dan bikin kode kalian mudah dibaca.

Konsep Inti 7: Lists and Keys

Gimana cara nampilin daftar item dari sebuah array, misalnya daftar nama, daftar produk, atau daftar komentar? Di React, kita pakai method array map() buat meng-iterasi array dan mengembalikan elemen JSX untuk setiap itemnya.

Contoh: Menampilkan daftar nama

jsx
// src/components/NameList.jsx
import React from 'react';function NameList() {
  const names = ['Andi', 'Budi', 'Citra', 'Dedi'];return (
    
      Daftar Nama:
      
        {/ Mapping array names /}
        {names.map((name, index) => (
          // Untuk setiap item, kembalikan elemen li
          // Penting: Tambahkan key prop!
          
            {name} {/ Menampilkan nama /}
          
        ))}
      
    
  );
}

Dan panggil di App.jsx:

jsx
// src/App.jsx
// ... import lainnya
import NameList from './components/NameList';function App() {
  return (
    
      {/ ... komponen lainnya /}
       {/ Panggil NameList /}
    
  );
}

Pentingnya key Prop: Ketika membuat daftar elemen pakai map(), React mengharuskan setiap elemen dalam daftar tersebut punya atribut key yang nilainya unik di antara elemen saudara (sibling) lainnya.

Kenapa key penting?

  • Performance: React menggunakan key untuk mengidentifikasi item mana yang berubah, ditambahkan, atau dihapus. Ini membantu React melakukan update DOM yang paling efisien.
  • Correctness: Tanpa key yang unik, React mungkin mengalami masalah saat mencoba meng-update daftar, terutama kalau daftarnya bisa diurutkan ulang, ditambah, atau dihapus itemnya. Ini bisa menyebabkan bug aneh pada UI atau state komponen.

Biasanya, nilai key diambil dari ID unik data yang kalian punya (misalnya ID produk dari database). Kalau nggak punya ID unik, kalian bisa pakai index array (seperti contoh di atas), TAPI ini hanya disarankan kalau:

  • Daftarnya statis (tidak akan berubah susunannya).
  • Daftarnya tidak akan ditambah atau dikurangi itemnya.
  • Daftarnya tidak akan di-filter.

Kalau kondisi-kondisi di atas nggak terpenuhi, CARI atau BUAT ID unik buat setiap item data kalian.

Sedikit tentang Hook Lain: useEffect

Selain useState, Hook lain yang sangat penting adalah useEffect. Hook ini dipakai buat menangani "side effects" dalam komponen functional. Side effect itu kayak:

  • Mengambil data (fetching data) dari API.
  • Manipulasi DOM secara manual (jarang dilakukan di React, tapi kadang perlu).
  • Menjalankan timer atau subscription.
  • Melakukan sesuatu setelah komponen di-render.

useEffect menerima dua argumen:

  1. Fungsi yang akan dijalankan (fungsi effect).
  2. Array dependencies (optional).
jsx
import React, { useState, useEffect } from 'react';function DataFetcher() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);// useEffect dengan array dependencies kosong []
  // Ini berarti effect hanya akan dijalankan sekali setelah render pertama (mirip componentDidMount)
  useEffect(() => {
    console.log("Fetching data...");
    // Contoh ambil data (pakai setTimeout biar kelihatan asyn-nya)
    const timer = setTimeout(() => {
      setData({ message: "Data berhasil diambil!" });
      setIsLoading(false);
    }, 2000); // Simulasi delay 2 detik// Opsional: cleanup function
    // Akan dijalankan saat komponen di-unmount atau sebelum effect dijalankan lagi
    return () => {
      console.log("Cleanup timer...");
      clearTimeout(timer);
    };}, []); // Array dependencies kosong: effect hanya berjalan sekalireturn (
    
      Status Data:
      {isLoading ? Loading... : {data.message}}
    
  );
}

Jika array dependencies diisi dengan variabel state atau props ([stateSaya, propSaya]), effect akan dijalankan ulang setiap kali nilai variabel tersebut berubah. Jika array dependencies tidak diberikan sama sekali, effect akan dijalankan setiap kali komponen di-render ulang. Kalau array-nya kosong [], effect hanya berjalan sekali setelah render pertama (dan cleanup-nya saat unmount). Memahami dependencies array ini krusial saat pakai useEffect.

Tips Biar Belajar React Makin Lancar

  1. Langsung Praktek: Jangan cuma baca atau nonton tutorial. Coba ketik kodenya sendiri, ubah-ubah, lihat hasilnya. Bikin project kecil-kecilan yang kamu minati (misalnya aplikasi to-do list, kalkulator, atau galeri foto sederhana).
  2. Pahami Konsep Inti: Pastikan kamu benar-benar paham bedanya Props dan State, gimana cara kerja JSX, dan kenapa key itu penting.
  3. Baca Dokumentasi Resmi: Dokumentasi React (react.dev) itu sumber terbaik dan paling up-to-date. Awalnya mungkin terasa berat, tapi coba cari bagian yang kamu butuhkan.
  4. Jangan Takut Error: Error itu teman. Baca pesan errornya baik-baik, cari di Google atau Stack Overflow. Hampir pasti ada orang lain yang pernah ngalamin error yang sama.
  5. Belajar Konsep JavaScript Modern: Semakin jago JavaScript, semakin gampang ngoding React.
  6. Eksplor Hook Lain: Setelah useState dan useEffect, coba pelajari Hook lain seperti useContext (buat state management global sederhana), useRef, dll.

Setelah Dasar-Dasar Ini, Belajar Apa Lagi?

Begitu kamu udah nyaman sama komponen, props, state, JSX, dan Hook dasar, ada banyak hal menarik lainnya di dunia React:

  • Routing: Gimana cara bikin navigasi antar halaman di aplikasi SPA pakai library seperti React Router.
  • State Management: Buat aplikasi yang kompleks, state bisa jadi rumit. Belajar tentang Context API bawaan React atau library eksternal seperti Redux atau Zustand bisa sangat membantu.
  • Fetching Data: Belajar cara yang lebih proper buat ngambil data dari API, misalnya pakai library seperti Axios atau fungsi fetch bawaan browser yang dibungkus rapi.
  • Styling: Berbagai cara styling di React (CSS biasa, CSS Modules, Styled Components, Tailwind CSS).
  • Next.js / Remix: Framework React yang memberikan fitur tambahan seperti Server-Side Rendering (SSR), Static Site Generation (SSG), routing berbasis file, dll., yang bikin pengembangan aplikasi web jadi lebih powerfull dan performa lebih baik.

Memulai itu langkah terpenting. Dengan memahami dasar-dasar yang kita bahas di artikel ini, kalian sudah punya fondasi yang kuat buat nyelam lebih dalam ke dunia React. Jangan ragu buat mencoba, eksperimen, dan bikin project sendiri. Semangat terus belajar dan berkarya!