Daftar Isi

1. Pengantar React
2. Persiapan Lingkungan
3. Struktur Proyek React
4. Membuat Komponen React
5. Memahami JSX
6. Props: Mengirim Data ke Komponen
7. State: Menangani Data Dinamis
8. Event Handling di React
9. Lifecycle Komponen
10. Mengambil Data dengan Fetch API
11. Routing dengan React Router
12. Project Sederhana: Todo List
13. Sumber Belajar dan Channel Pembelajaran

1. Pengantar React

React adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) yang interaktif dan efisien. React dikembangkan oleh Facebook dan sangat populer di dunia pengembangan web modern.

React menggunakan konsep komponen yang memungkinkan pengembang membagi UI menjadi bagian-bagian kecil yang dapat digunakan kembali.

2. Persiapan Lingkungan

Untuk mulai belajar React, kita perlu menyiapkan lingkungan pengembangan. Berikut langkah-langkahnya:

1. Install Node.js dan npm dari nodejs.org .
2. Buka terminal dan jalankan perintah untuk membuat proyek React baru menggunakan Create React App:

   npx create-react-app nama-proyek-anda

3. Masuk ke folder proyek:

   cd nama-proyek-anda

4. Jalankan proyek:

   npm start

3. Struktur Proyek React

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

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.css
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
└── README.md
      

Folder src adalah tempat Anda menulis kode React. File index.js adalah titik masuk aplikasi, dan App.js adalah komponen utama.

4. Membuat Komponen React

Komponen adalah blok bangunan utama dalam React. Berikut contoh membuat komponen sederhana:

import React from 'react';

function Greeting() {
  return <h1>Halo, selamat datang di React!</h1>;
}

export default Greeting;
      

Komponen ini menampilkan teks sapaan. Anda bisa menggunakan komponen ini di App.js dengan mengimpornya dan menambahkannya ke JSX.

5. Memahami JSX

JSX adalah sintaks khusus yang memungkinkan Anda menulis elemen HTML di dalam JavaScript. Contoh:

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

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

6. Props: Mengirim Data ke Komponen

Props adalah cara mengirim data dari komponen induk ke komponen anak. Contoh:

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

// Penggunaan
<Greeting name="Budi" />
      

Komponen Greeting menerima properti name dan menampilkannya.

7. State: Menangani Data Dinamis

State adalah data yang dapat berubah selama siklus hidup komponen. Contoh menggunakan hook useState :

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Jumlah: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}
      

Setiap klik tombol akan menambah nilai count dan memperbarui tampilan.

8. Event Handling di React

React menggunakan sintaks khusus untuk menangani event, mirip dengan HTML tapi menggunakan camelCase. Contoh:

function Button() {
  function handleClick() {
    alert('Tombol diklik!');
  }

  return <button onClick={handleClick}>Klik Saya</button>;
}
      

Fungsi handleClick akan dipanggil saat tombol diklik.

9. Lifecycle Komponen

Komponen React memiliki siklus hidup yang bisa dimanfaatkan untuk menjalankan kode pada waktu tertentu, seperti saat komponen dibuat atau dihapus. Dengan hook useEffect , Anda bisa mengelola lifecycle:

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const interval = setInterval(() => {
      console.log('Timer berjalan');
    }, 1000);

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

  return <p>Timer aktif, cek console log</p>;
}
      

Contoh di atas menjalankan fungsi setiap detik dan membersihkan interval saat komponen dihapus.

10. Mengambil Data dengan Fetch API

React dapat mengambil data dari API menggunakan Fetch API dan menampilkannya. Contoh:

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

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

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

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

Komponen ini menampilkan daftar pengguna yang diambil dari API JSONPlaceholder.

11. Routing dengan React Router

React Router memungkinkan navigasi antar halaman dalam aplikasi React. Contoh setup dasar:

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

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

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

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element=<Home /> />
        <Route path="/about" element=<About /> />
      </Routes>
    </Router>
  );
}
      

Anda perlu menginstall React Router dengan perintah npm install react-router-dom .

12. Project Sederhana: Todo List

Mari buat aplikasi Todo List sederhana menggunakan React:

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  function addTodo() {
    if (input.trim() !== '') {
      setTodos([...todos, input.trim()]);
      setInput('');
    }
  }

  function removeTodo(index) {
    setTodos(todos.filter((_, i) => i !== index));
  }

  return (
    <div className="max-w-md mx-auto p-4 bg-white rounded shadow">
      <h2 className="text-2xl font-bold mb-4">Todo List</h2>
      <div className="flex mb-4">
        <input
          type="text"
          value={input}
          onChange={e => setInput(e.target.value)}
          placeholder="Tambah tugas..."
          className="flex-grow border border-gray-300 rounded-l px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          onClick={addTodo}
          className="bg-blue-600 text-white px-4 rounded-r hover:bg-blue-700"
        >Tambah</button>
      </div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index} className="flex justify-between items-center mb-2 bg-gray-100 p-2 rounded">
            {todo}
            <button
              onClick={() => removeTodo(index)}
              className="text-red-600 hover:text-red-800"
              aria-label={`Hapus tugas ${todo}`}
            >×</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;
      

Komponen ini memungkinkan Anda menambah dan menghapus tugas dengan mudah.

13. Sumber Belajar dan Channel Pembelajaran

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

• Dokumentasi Resmi React - Referensi utama dan lengkap dari tim React.
• Academind (YouTube) - Channel dengan tutorial React dan JavaScript yang mudah dipahami.
• Traversy Media (YouTube) - Tutorial web development termasuk React dari dasar hingga mahir.
• freeCodeCamp React Course - Kursus gratis dan interaktif untuk belajar React.
• Udemy: React - The Complete Guide - Kursus berbayar dengan materi lengkap dan proyek nyata.