Tutorial React: Panduan Pemula

Selamat datang, calon pengembang React! Anda telah membuat pilihan yang luar biasa. React adalah pustaka JavaScript yang kuat dan populer untuk membangun antarmuka pengguna, dan mempelajarinya adalah cara pasti untuk meningkatkan keterampilan pengembangan web Anda. Panduan komprehensif langkah demi langkah ini akan membawa Anda dari nol menjadi ahli, membekali Anda dengan pengetahuan praktis yang Anda butuhkan untuk mulai membangun aplikasi React Anda sendiri di tahun 2025. Kita akan fokus pada praktik, bukan hanya membaca, jadi bersiaplah untuk menulis beberapa kode!

Mari Siapkan Lingkungan Pengembangan React Anda

Sebelum kita bisa mulai membangun antarmuka pengguna yang menakjubkan, kita perlu menyiapkan tempat kerja. Anggap saja ini seperti menyiapkan bengkel Anda sebelum memulai proyek baru.

Menginstal yang Penting: Node.js dan npm

Aplikasi React dibangun dan dikelola menggunakan Node.js dan manajer paketnya, npm (Node Package Manager).

• Node.js: Ini adalah runtime JavaScript yang memungkinkan Anda menjalankan kode JavaScript di luar peramban web.
• npm: Ini adalah repositori besar paket perangkat lunak yang dapat Anda instal dan gunakan dengan mudah dalam proyek Anda.

Untuk memulai, kunjungi situs web resmi Node.js dan unduh versi Long-Term Support (LTS) terbaru. Penginstalnya mudah; cukup ikuti instruksi di layar. Setelah terinstal, Anda akan memiliki Node.js dan npm yang siap digunakan. Anda dapat memverifikasi instalasi dengan membuka terminal atau command prompt Anda dan mengetik:

Bash

node -v
npm -v

Perintah-perintah ini akan mencetak versi Node.js dan npm yang telah Anda instal, secara berurutan.

Proyek React Pertama Anda dengan Vite

Di masa lalu, create-react-app adalah alat utama untuk memulai proyek React baru. Namun, lanskap pengembangan web modern bergerak cepat, dan di tahun 2025, Vite adalah pilihan yang direkomendasikan karena kecepatannya yang luar biasa dan efisiensinya.

Untuk membuat proyek React baru dengan Vite, buka terminal Anda dan jalankan perintah berikut:

Bash

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

Mari kita bedah perintah ini:

• npm create vite@latest: Perintah ini menggunakan npm untuk menjalankan versi terbaru dari paket create-vite.
• my-first-react-app: Ini adalah nama folder proyek Anda. Anda bisa mengubahnya sesuai keinginan.
• -- --template react: Ini memberitahu Vite bahwa kita ingin membuat proyek dengan template React.

Setelah perintah selesai, Anda akan memiliki direktori baru dengan nama proyek Anda. Masuk ke direktori ini:

Bash

cd my-first-react-app

Selanjutnya, Anda perlu menginstal dependensi proyek. Ini adalah paket lain yang dibutuhkan aplikasi React Anda agar berfungsi dengan benar. Jalankan perintah ini:

Bash

npm install

Akhirnya, untuk melihat aplikasi React baru Anda beraksi, jalankan server pengembangan:

Bash

npm run dev

Terminal Anda akan menampilkan URL lokal, biasanya http://localhost:5173. Buka URL ini di peramban web Anda, dan Anda akan melihat aplikasi React default yang dibuat oleh Vite. Selamat, Anda baru saja menyiapkan proyek React pertama Anda!

Inti React: Komponen dan JSX

Sekarang setelah Anda memiliki aplikasi React yang berjalan, mari selami konsep inti yang membuat React begitu kuat: komponen dan JSX.

Apa Itu Komponen?

Pada intinya, aplikasi React adalah kumpulan bagian UI yang dapat digunakan kembali dan mandiri yang disebut komponen. Bayangkan halaman web dibangun dengan balok LEGO. Setiap balok adalah komponen, dan Anda dapat menggabungkannya untuk membuat struktur yang lebih kompleks.

Dalam proyek my-first-react-app Anda, buka folder src dan Anda akan menemukan file bernama App.jsx. Ini adalah komponen aplikasi utama Anda. Mari sederhanakan isinya untuk memahami dasar-dasarnya:

JavaScript

// src/App.jsx

function App() {
  return (
    <div>
      <h1>Hello, React World!</h1>
      <p>This is my very first React component.</p>
    </div>
  );
}

export default App;

Dalam kode ini:

• Kita mendefinisikan fungsi JavaScript bernama App. Ini adalah functional component (komponen fungsional), yang merupakan cara modern dan direkomendasikan untuk membuat komponen di React.
• Fungsi ini returns (mengembalikan) sesuatu yang terlihat seperti HTML. Ini adalah JSX.
• Akhirnya, kita export default App agar bagian lain dari aplikasi kita dapat menggunakan komponen ini.

Memahami JSX: JavaScript XML

JSX adalah ekstensi sintaks untuk JavaScript yang memungkinkan Anda menulis kode seperti HTML di dalam file JavaScript Anda. Ini sebenarnya bukan HTML, tetapi membuat penulisan kode UI jauh lebih intuitif dan mudah dibaca.

Di balik layar, alat yang disebut transpiler (dalam kasus kita, didukung oleh Vite) mengubah JSX ini menjadi JavaScript biasa yang dapat dipahami oleh peramban.

Mari kita modifikasi App.jsx kita untuk melihat kekuatan JSX. Kita dapat menyematkan ekspresi JavaScript langsung di dalam JSX kita dengan menggunakan kurung kurawal {}.

JavaScript

// src/App.jsx

function App() {
  const name = "Pengembang Pemula";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Halo, {name}!</h1>
      <p>Selamat datang di perjalanan React Anda di tahun {year}.</p>
    </div>
  );
}

export default App;

Simpan file, dan peramban Anda akan otomatis memperbarui untuk menampilkan konten baru. Ini adalah fitur Vite yang disebut Hot Module Replacement (HMR), dan ini memberikan pengalaman pengembangan yang luar biasa.

Membuat Komponen Kustom Pertama Anda

Mari kita buat komponen kita sendiri. Di folder src, buat file baru bernama Greeting.jsx.

JavaScript

// src/Greeting.jsx

function Greeting() {
  return (
    <h2>Ini adalah sapaan dari komponen kustom saya!</h2>
  );
}

export default Greeting;

Sekarang, mari kita gunakan komponen Greeting baru ini di dalam komponen App.jsx kita.

JavaScript

// src/App.jsx
import Greeting from './Greeting'; // Impor komponen Greeting

function App() {
  const name = "Pengembang Pemula";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Halo, {name}!</h1>
      <p>Selamat datang di perjalanan React Anda di tahun {year}.</p>
      <Greeting /> {/* Gunakan komponen Greeting */}
    </div>
  );
}

export default App;

Dengan mengimpor dan kemudian menggunakan <Greeting /> seperti tag HTML biasa, kita telah menyusun UI kita dari beberapa komponen. Ini adalah blok bangunan fundamental dari aplikasi React.

Meneruskan Data dengan Props

Komponen Greeting kita agak statis. Bagaimana jika kita ingin menyapa orang yang berbeda? Di sinilah props (singkatan dari properties) berperan. Props adalah cara Anda meneruskan data dari komponen induk ke komponen anak.

Membuat Komponen Dinamis dengan Props

Mari kita modifikasi Greeting.jsx kita untuk menerima prop name.

JavaScript

// src/Greeting.jsx

function Greeting(props) {
  return (
    <h2>Halo, {props.name}! Ini adalah sapaan dari komponen kustom saya.</h2>
  );
}

export default Greeting;

Sekarang, di App.jsx, kita bisa meneruskan prop name ke komponen Greeting kita.

JavaScript

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

Anda sekarang akan melihat tiga sapaan yang berbeda, masing-masing dengan nama unik. Props memungkinkan kita menggunakan kembali komponen dengan data yang berbeda, membuat UI kita sangat fleksibel.

Praktik JavaScript yang umum dan modern adalah melakukan destructuring objek props langsung di daftar parameter fungsi. Mari kita refactor Greeting.jsx:

JavaScript

// src/Greeting.jsx

function Greeting({ name }) {
  return (
    <h2>Halo, {name}! Ini adalah sapaan dari komponen kustom saya.</h2>
  );
}

export default Greeting;

Ini mencapai hasil yang sama tetapi dengan kode yang lebih bersih dan ringkas.

Mengelola Memori Komponen dengan State

Meskipun props sangat bagus untuk meneruskan data ke bawah pohon komponen, apa yang terjadi ketika sebuah komponen perlu mengingat dan mengelola datanya sendiri? Di sinilah state berperan. State adalah data yang dikelola di dalam sebuah komponen. Ketika state sebuah komponen berubah, React akan secara otomatis me-render ulang komponen tersebut untuk mencerminkan state baru.

Memperkenalkan Hook useState

Untuk mengelola state dalam komponen fungsional, kita menggunakan fungsi khusus dari React yang disebut Hook. Hook yang paling fundamental adalah useState.

Mari kita bangun komponen penghitung sederhana untuk memahami cara kerja useState. Buat file baru di folder src Anda bernama Counter.jsx.

JavaScript

// src/Counter.jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Anda mengklik {count} kali</p>
      <button onClick={() => setCount(count + 1)}>
        Klik saya
      </button>
    </div>
  );
}

export default Counter;

Mari kita bedah ini:

• import { useState } from 'react';: Kita mengimpor Hook useState dari pustaka React.
• const [count, setCount] = useState(0);: Ini adalah inti dari Hook useState.
• Kita memanggil useState dengan nilai awal 0. Ini adalah nilai awal state kita.
• useState mengembalikan array dengan dua elemen, yang kita destructuring:

1. count: Nilai state saat ini.
2. setCount: Fungsi yang dapat kita gunakan untuk memperbarui state count.

• <p>Anda mengklik {count} kali</p>: Kita menampilkan nilai state count saat ini.
• <button onClick={() => setCount(count + 1)}>: Ketika tombol diklik, kita memanggil fungsi setCount dengan nilai baru (count + 1). Ini memberitahu React untuk memperbarui state.

Sekarang, mari kita tambahkan komponen Counter ini ke App.jsx kita:

JavaScript

// src/App.jsx
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Aplikasi React Saya yang Hebat</h1>
      <Counter />
    </div>
  );
}

export default App;

Anda sekarang akan melihat penghitung di peramban Anda. Setiap kali Anda mengklik tombol, angkanya bertambah. React me-render ulang komponen Counter setiap kali statenya berubah.

Merespons Tindakan Pengguna: Menangani Event

Interaktivitas adalah inti dari aplikasi web modern. React menyediakan cara yang sederhana dan konsisten untuk menangani event seperti klik, pengiriman formulir, dan input keyboard.

Kita sudah melihat event handler dasar di komponen Counter kita dengan onClick. Mari kita jelajahi lebih lanjut dengan membangun formulir sederhana yang mengambil input pengguna.

Buat file komponen baru bernama NameForm.jsx.

JavaScript

// src/NameForm.jsx
import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // Mencegah perilaku pengiriman formulir default
    alert(`Halo, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nama:
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <button type="submit">Kirim</button>
    </form>
  );
}

export default NameForm;

Mari kita analisis komponen formulir ini:

• Kita memiliki variabel state name untuk menyimpan nilai bidang input.
• Elemen input memiliki atribut value yang diatur ke state name kita. Ini menjadikannya controlled component (komponen terkontrol), di mana React mengontrol nilai input.
• Event handler onChange dipanggil setiap kali pengguna mengetik di bidang input. Ini memperbarui state name dengan nilai baru dari event.target.value.
• form memiliki event handler onSubmit yang memanggil fungsi handleSubmit kita ketika formulir dikirim.
• Dalam handleSubmit, kita memanggil event.preventDefault() untuk menghentikan peramban memuat ulang halaman, yang merupakan perilaku default untuk pengiriman formulir. Kemudian, kita menampilkan alert dengan nama pengguna.

Tambahkan NameForm ini ke App.jsx Anda untuk melihatnya beraksi.

Menampilkan Informasi: Conditional Rendering dan List

Aplikasi dunia nyata sering kali perlu menampilkan atau menyembunyikan konten berdasarkan kondisi tertentu, dan mereka sering kali perlu menampilkan daftar data.

Menampilkan dan Menyembunyikan dengan Conditional Rendering

Mari kita buat komponen yang menampilkan pesan yang berbeda tergantung pada apakah pengguna masuk atau tidak. Buat file bernama LoginMessage.jsx.

JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Selamat datang kembali!</h2>;
  }
  return <h2>Silakan masuk.</h2>;
}

export default LoginMessage;

Kita juga bisa menggunakan ternary operator untuk conditional rendering yang lebih ringkas.

JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h2>Selamat datang kembali!</h2> : <h2>Silakan masuk.</h2>}
    </div>
  );
}

export default LoginMessage;

Anda kemudian dapat menggunakan komponen ini di App.jsx dan meneruskan prop isLoggedIn untuk melihat pesan yang berbeda.

Menampilkan Daftar Data

Untuk me-render daftar item, Anda biasanya akan menggunakan metode array map(). Mari kita buat komponen untuk menampilkan daftar buah-buahan. Buat file bernama FruitList.jsx.

JavaScript

// src/FruitList.jsx

function FruitList() {
  const fruits = ['Apel', 'Pisang', 'Ceri', 'Kurma'];

  return (
    <div>
      <h3>Buah Favorit Saya:</h3>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Di sini, kita melakukan mapping pada array fruits dan untuk setiap buah, kita mengembalikan elemen <li>.

Anda akan melihat prop key={index}. Ketika Anda me-render daftar item, React membutuhkan key unik untuk setiap item agar dapat memperbarui daftar secara efisien ketika berubah. Menggunakan indeks array sebagai key dapat diterima untuk daftar yang sederhana dan statis. Namun, untuk daftar dinamis di mana item dapat ditambahkan, dihapus, atau diurutkan ulang, sebaiknya gunakan ID unik dari data Anda jika tersedia.

Menambahkan Gaya ke Aplikasi Anda

Aplikasi yang hebat perlu terlihat bagus. Ada beberapa cara untuk menata gaya komponen React Anda.

Stylesheet CSS

Cara paling mudah adalah menggunakan file CSS biasa. Di folder src, Anda akan menemukan file App.css. Anda dapat menambahkan gaya Anda di sana.

Misalnya, untuk menata gaya komponen FruitList kita, Anda bisa menambahkan ini ke App.css:

CSS

/* src/App.css */

.fruit-list {
  list-style-type: none;
  padding: 0;
}

.fruit-item {
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

Kemudian, di FruitList.jsx Anda, Anda dapat menggunakan kelas CSS ini.

JavaScript

// src/FruitList.jsx
import './App.css'; // Pastikan untuk mengimpor file CSS

function FruitList() {
  const fruits = ['Apel', 'Pisang', 'Ceri', 'Kurma'];

  return (
    <div>
      <h3>Buah Favorit Saya:</h3>
      <ul className="fruit-list">
        {fruits.map((fruit, index) => (
          <li key={index} className="fruit-item">{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Perhatikan bahwa kita menggunakan className alih-alih class di JSX, karena class adalah kata kunci yang dicadangkan di JavaScript.

Modul CSS

Untuk aplikasi yang lebih besar, Modul CSS menawarkan cara untuk mengunci gaya ke komponen tertentu, mencegah konflik gaya. File Modul CSS diberi nama dengan ekstensi .module.css.

Mari kita buat FruitList.module.css:

CSS

/* src/FruitList.module.css */

.list {
  list-style-type: square;
}

.item {
  color: blue;
}

Sekarang, di FruitList.jsx, Anda mengimpor gaya sebagai objek:

JavaScript

// src/FruitList.jsx
import styles from './FruitList.module.css';

function FruitList() {
  const fruits = ['Apel', 'Pisang', 'Ceri', 'Kurma'];

  return (
    <div>
      <h3>Buah Favorit Saya (Ditata Gaya dengan Modul CSS):</h3>
      <ul className={styles.list}>
        {fruits.map((fruit, index) => (
          <li key={index} className={styles.item}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Vite akan secara otomatis menghasilkan nama kelas unik, memastikan bahwa gaya dalam FruitList.module.css hanya berlaku untuk komponen FruitList.

Menavigasi Melalui Aplikasi Anda dengan React Router

Sebagian besar aplikasi web memiliki banyak halaman. Untuk menangani navigasi antar "halaman" ini dalam aplikasi satu halaman (SPA) seperti yang dibangun dengan React, kita menggunakan pustaka yang disebut React Router.

Menyiapkan React Router

Pertama, Anda perlu menginstal React Router:

Bash

npm install react-router-dom

Membuat Halaman Anda

Mari kita buat dua komponen halaman sederhana: HomePage.jsx dan AboutPage.jsx.

JavaScript

// src/HomePage.jsx

function HomePage() {
  return (
    <div>
      <h1>Halaman Beranda</h1>
      <p>Selamat datang di halaman beranda aplikasi kami yang luar biasa!</p>
    </div>
  );
}

export default HomePage;

JavaScript

// src/AboutPage.jsx

function AboutPage() {
  return (
    <div>
      <h1>Halaman Tentang</h1>
      <p>Ini semua tentang aplikasi kami yang luar biasa.</p>
    </div>
  );
}

export default AboutPage;

Mengonfigurasi Router

Sekarang, kita akan mengonfigurasi rute kita di App.jsx.

JavaScript

// src/App.jsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Beranda</Link>
            </li>
            <li>
              <Link to="/about">Tentang</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Mari kita bedah komponen baru dari React Router:

• <Router> (sebagai BrowserRouter): Komponen ini membungkus seluruh aplikasi Anda dan mengaktifkan routing.
• <Link>: Ini digunakan untuk membuat tautan navigasi. Ini mirip dengan tag <a> tetapi sadar akan router.
• <Routes>: Komponen ini membungkus rute individual Anda.
• <Route>: Komponen ini mendefinisikan pemetaan antara jalur URL dan komponen yang akan di-render.

Sekarang, ketika Anda mengklik tautan "Beranda" dan "Tentang", konten akan berubah tanpa memuat ulang halaman penuh. Anda telah berhasil mengimplementasikan client-side routing!

Melangkah Lebih Jauh: Hook useEffect

Hook useState adalah untuk mengelola state yang secara langsung memengaruhi apa yang di-render. Tapi bagaimana dengan efek samping, seperti mengambil data dari API, menyiapkan langganan, atau mengubah DOM secara manual? Untuk ini, kita menggunakan Hook useEffect.

Hook useEffect berjalan setelah setiap render secara default. Mari kita lihat aksinya dengan membuat komponen yang mengambil data dari API palsu.

Buat file baru DataFetcher.jsx.

JavaScript

// src/DataFetcher.jsx
import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fungsi ini akan dipanggil setelah komponen di-render
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Kesalahan mengambil data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // Array dependensi kosong itu penting!

  if (loading) {
    return <p>Memuat...</p>;
  }

  return (
    <div>
      <h3>Data yang Diambil:</h3>
      <h4>{data.title}</h4>
      <p>{data.body}</p>
    </div>
  );
}

export default DataFetcher;

Kunci untuk memahami useEffect di sini adalah argumen kedua: dependency array (array dependensi).

• Jika Anda tidak memberikan array dependensi, efek akan berjalan setelah setiap render.
• Jika Anda memberikan array kosong [], efek akan berjalan hanya sekali setelah render awal. Ini sempurna untuk pengambilan data satu kali.
• Jika Anda memberikan nilai dalam array [prop, state], efek akan berjalan setiap kali salah satu nilai tersebut berubah.

Tambahkan DataFetcher ke App.jsx Anda untuk melihatnya mengambil dan menampilkan data saat komponen dimuat.

Kesimpulan dan Langkah Selanjutnya

Anda telah menempuh perjalanan yang panjang! Anda telah mempelajari cara:

• Menyiapkan lingkungan pengembangan React modern dengan Vite.
• Membuat functional component dan menulis UI dengan JSX.
• Meneruskan data antar komponen menggunakan props.
• Mengelola state tingkat komponen dengan Hook useState.
• Menangani event pengguna.
• Me-render konten secara kondisional dan dalam daftar.
• Menata gaya komponen Anda dengan CSS dan Modul CSS.
• Mengimplementasikan client-side routing dengan React Router.
• Menangani efek samping dengan Hook useEffect.

Ini adalah pencapaian besar, dan Anda sekarang memiliki fondasi yang kokoh untuk dibangun. Dunia React sangat luas dan menarik. Berikut adalah beberapa topik yang mungkin ingin Anda jelajahi selanjutnya:

• Lebih Banyak Hook: Selami lebih dalam Hook bawaan lainnya seperti useContext, useReducer, useCallback, dan useMemo.
• Pustaka Manajemen State: Untuk aplikasi yang lebih besar, Anda mungkin memerlukan solusi manajemen state yang lebih kuat seperti Redux, Zustand, atau Recoil.
• Framework React: Jelajahi framework yang dibangun di atas React seperti Next.js untuk server-side rendering dan kemampuan full-stack.
• Pengujian: Pelajari cara menguji komponen React Anda menggunakan pustaka seperti Jest dan React Testing Library.

Hal terpenting yang dapat Anda lakukan sekarang adalah terus membangun. Latihan adalah kunci. Coba buat ulang situs web atau aplikasi sederhana yang Anda gunakan sehari-hari. Tantang diri Anda dengan fitur-fitur baru. Semakin banyak Anda coding, semakin percaya diri dan terampil Anda akan menjadi.

Selamat datang di komunitas React. Selamat coding!