Daftar Isi

1. Pengantar React JS
2. Persiapan Lingkungan Pengembangan
3. Struktur Dasar Aplikasi React
4. Memahami JSX
5. Membuat dan Menggunakan Komponen
6. Props: Mengirim Data ke Komponen
7. State: Menangani Data Dinamis
8. Lifecycle Komponen
9. Hooks: useState, useEffect, dan Lainnya
10. Routing dengan React Router
11. Mengambil Data dari API
12. Best Practices dan Tips
13. Sumber Belajar dan Channel Pembelajaran

1. Pengantar React JS

React JS adalah library JavaScript yang dikembangkan oleh Facebook untuk membangun antarmuka pengguna (UI) yang interaktif dan efisien. React menggunakan konsep komponen yang dapat digunakan kembali dan virtual DOM untuk meningkatkan performa aplikasi web.

Dengan React, Anda dapat membuat aplikasi web yang cepat, responsif, dan mudah dikembangkan secara bertahap.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menyiapkan beberapa hal berikut:

• Node.js dan npm (Node Package Manager) terinstall di komputer Anda.
• Code editor seperti Visual Studio Code.
• Terminal atau command prompt untuk menjalankan perintah.

Langkah membuat project React baru:

npx create-react-app nama-project-anda
cd nama-project-anda
npm start
      

Perintah di atas akan membuat project React baru dan menjalankan server development di http://localhost:3000 .

3. Struktur Dasar Aplikasi React

Setelah membuat project React, Anda akan melihat struktur folder seperti berikut:

• node_modules/ - berisi paket-paket yang diinstall.
• public/ - berisi file statis seperti index.html .
• src/ - tempat menulis kode React Anda.
• package.json - konfigurasi project dan dependensi.

Fokus utama Anda adalah folder src/ karena di sinilah Anda menulis komponen dan logika aplikasi.

4. Memahami JSX

JSX adalah ekstensi sintaks JavaScript yang memungkinkan Anda menulis elemen HTML di dalam JavaScript. React menggunakan JSX untuk mendefinisikan UI secara deklaratif.

Contoh JSX sederhana:

const element = <h1>Halo, React!</h1>;
      

JSX akan dikompilasi menjadi panggilan React.createElement() yang menghasilkan elemen React.

5. Membuat dan Menggunakan Komponen

Komponen adalah blok bangunan utama React. Komponen bisa berupa fungsi atau kelas yang mengembalikan elemen React.

Contoh komponen fungsi:

function Greeting() {
  return <h2>Selamat datang di React!</h2>;
}
      

Menggunakan komponen di komponen lain:

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}
      

Komponen membantu memecah UI menjadi bagian-bagian kecil yang mudah dikelola dan digunakan ulang.

6. Props: Mengirim Data ke Komponen

Props (properties) adalah cara mengirim data dari komponen induk ke komponen anak.

Contoh penggunaan props:

function Greeting(props) {
  return <h2>Halo, {props.name}!</h2>;
}

function App() {
  return <Greeting name="Budi" />;
}
      

Anda bisa mengirim berbagai tipe data melalui props, seperti string, angka, fungsi, dan objek.

7. State: Menangani Data Dinamis

State adalah data lokal yang dapat berubah selama siklus hidup komponen. State biasanya digunakan untuk menangani interaksi pengguna dan data yang berubah-ubah.

Contoh penggunaan state dengan hook useState :

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Jumlah klik: {count}</p>
      <button onClick={() => setCount(count + 1)} className="px-4 py-2 bg-indigo-600 text-white rounded">Klik Saya</button>
    </div>
  );
}
      

Setiap kali tombol diklik, state count bertambah dan UI akan diperbarui secara otomatis.

8. Lifecycle Komponen

Lifecycle komponen adalah tahapan yang dilalui komponen dari saat dibuat, diperbarui, hingga dihapus. Pada komponen fungsi, lifecycle dapat di-handle menggunakan hook seperti useEffect .

Contoh penggunaan useEffect untuk efek samping:

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Detik: {seconds}</p>;
}
      

Hook useEffect menjalankan kode setelah render dan dapat membersihkan efek saat komponen di-unmount.

9. Hooks: useState, useEffect, dan Lainnya

Hooks adalah fitur React yang memungkinkan Anda menggunakan state dan fitur React lainnya tanpa menulis kelas.

• useState: Mengelola state lokal di komponen fungsi.
• useEffect: Menangani efek samping seperti fetching data, timer, dan manipulasi DOM.
• useContext: Mengakses context global tanpa prop drilling.
• useRef: Menyimpan nilai yang tidak menyebabkan render ulang.
• useReducer: Alternatif useState untuk state yang kompleks.

Contoh kombinasi useState dan useEffect untuk fetch data:

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

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

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}
      

10. Routing dengan React Router

React Router adalah library populer untuk menambahkan navigasi dan routing di aplikasi React.

Langkah instalasi:

npm install react-router-dom
      

Contoh penggunaan React Router:

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Halaman Beranda</h2>;
}

function About() {
  return <h2>Halaman Tentang</h2>;
}

function App() {
  return (
    <Router>
      <nav className="space-x-4 mb-6">
        <Link to="/" className="text-indigo-600 hover:underline">Beranda</Link>
        <Link to="/about" className="text-indigo-600 hover:underline">Tentang</Link>
      </nav>
      <Routes>
        <Route path="/" element=<Home /> />
        <Route path="/about" element=<About /> />
      </Routes>
    </Router>
  );
}
      

Dengan React Router, Anda dapat membuat aplikasi SPA (Single Page Application) dengan navigasi yang mulus.

11. Mengambil Data dari API

Mengambil data dari API eksternal adalah hal umum dalam aplikasi React. Anda bisa menggunakan fetch atau library seperti Axios.

Contoh fetch data dengan fetch dan useEffect :

import React, { useState, useEffect } from 'react';

function Posts() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => {
        setPosts(data);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      {posts.slice(0, 10).map(post => (
        <article key={post.id} className="mb-4 p-4 border rounded shadow-sm bg-white">
          <h3 className="font-semibold text-lg mb-2">{post.title}</h3>
          <p>{post.body}</p>
        </article>
      ))}
    </div>
  );
}
      

Contoh di atas menampilkan 10 postingan pertama dari API JSONPlaceholder.

12. Best Practices dan Tips

• Gunakan komponen kecil dan reusable: Pecah UI menjadi bagian kecil agar mudah dikelola.
• Manfaatkan hooks dengan bijak: Gunakan useState dan useEffect untuk mengelola state dan efek samping.
• Jaga struktur folder yang rapi: Pisahkan komponen, assets, dan utilitas.
• Gunakan PropTypes atau TypeScript: Untuk validasi tipe data props.
• Optimasi performa: Gunakan React.memo, lazy loading, dan code splitting.
• Testing: Gunakan Jest dan React Testing Library untuk memastikan komponen berjalan dengan baik.

13. Sumber Belajar dan Channel Pembelajaran

Berikut beberapa sumber dan channel yang sangat direkomendasikan untuk belajar React JS secara mendalam:

• Dokumentasi Resmi React - Sumber utama dan paling lengkap.
• Academind - Channel YouTube dengan tutorial React yang mudah dipahami.
• Traversy Media - Tutorial React dan web development lainnya.
• The Net Ninja - Playlist React lengkap dan terstruktur.
• Udemy - React The Complete Guide - Kursus berbayar tapi sangat komprehensif.
• GitHub React - Repositori resmi React untuk melihat source code dan kontribusi.