Panduan Lengkap Bootcamp React JS: Kuasai Core dan Hooks!

Daftar Isi

Pengantar React JS
Setup Lingkungan dan Tools
Konsep Core React JS
Memahami JSX
Membuat dan Menggunakan Components
Props dan State
Pengenalan React Hooks
Hook useState
Hook useEffect
Custom Hooks
Routing dengan React Router
Best Practices & Tips
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 membangun aplikasi web modern yang responsif dan mudah dikembangkan secara bertahap.

2. Setup Lingkungan dan Tools

Untuk memulai belajar React JS, Anda perlu menyiapkan beberapa tools berikut:

Node.js dan npm (Node Package Manager)
Code editor seperti Visual Studio Code
Browser modern (Chrome, Firefox, Edge)

Langkah-langkah setup:

Install Node.js dan npm: Unduh dari https://nodejs.org dan ikuti instruksi instalasi.
Buat project React baru: Gunakan Create React App dengan perintah:
```
npx create-react-app nama-project-anda
```
Jalankan aplikasi: Masuk ke folder project dan jalankan:
```
cd nama-project-anda
npm start
```

Tampilan terminal dengan perintah npm start dan Visual Studio Code terbuka dengan kode React

3. Konsep Core React JS

React memiliki beberapa konsep inti yang wajib dipahami:

Components: Blok bangunan UI yang dapat digunakan ulang.
JSX: Sintaks mirip HTML yang digunakan untuk menulis komponen React.
Props: Data yang dikirim ke komponen untuk konfigurasi.
State: Data internal komponen yang dapat berubah dan memicu render ulang.
Virtual DOM: Representasi virtual dari DOM asli untuk optimasi render.

Diagram konsep inti React JS yang menampilkan komponen, props, state, dan virtual DOM

4. Memahami JSX

JSX adalah ekstensi sintaks JavaScript yang memungkinkan Anda menulis elemen UI menggunakan sintaks mirip HTML. JSX akan dikompilasi menjadi fungsi JavaScript yang memanggil React.createElement.

Contoh JSX sederhana:

{`function HelloWorld() {
  return (
    
      Hello, React!
      Ini adalah contoh JSX.
    
  );
}`}

JSX memudahkan penulisan UI dan membuat kode lebih mudah dibaca dan dipelihara.

Contoh kode JSX di editor dan hasil render Hello React di browser

5. Membuat dan Menggunakan Components

Komponen adalah blok bangunan utama React. Ada dua jenis komponen:

Functional Components: Komponen berbasis fungsi, lebih sederhana dan modern.
Class Components: Komponen berbasis kelas, lebih lama dan kompleks.

Contoh Functional Component:

{`function Greeting(props) {
  return Halo, {props.name}!;
}

// Penggunaan
`}

Komponen dapat menerima props untuk membuatnya dinamis dan dapat digunakan ulang.

Kode React functional component Greeting yang menerima props dan hasil rendernya di browser

6. Props dan State

Props adalah data yang dikirim dari komponen induk ke komponen anak dan bersifat read-only.

State adalah data internal komponen yang dapat berubah seiring waktu dan memicu render ulang UI.

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)}>Tambah</button>
    </div>
  );
}`}

Kode React functional component Counter dengan hook useState dan tombol tambah

7. Pengenalan React Hooks

Hooks adalah fitur React yang memungkinkan Anda menggunakan state dan fitur React lainnya tanpa menulis class. Hooks memperkenalkan cara yang lebih sederhana dan modular untuk mengelola state dan efek samping.

useState: Mengelola state lokal di functional component.
useEffect: Menangani efek samping seperti fetching data, manipulasi DOM, dan subscription.
useContext: Mengakses context React untuk state global.
useRef: Mengakses elemen DOM atau menyimpan nilai yang tidak memicu render ulang.

Ikon dan diagram yang menggambarkan berbagai React Hooks seperti useState dan useEffect

8. Hook useState

useState adalah hook yang digunakan untuk menambahkan state lokal pada functional component.

Contoh penggunaan useState:

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

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'Hidup' : 'Mati'}
    </button>
  );
}`}

Pada contoh di atas, tombol akan berganti teks antara "Hidup" dan "Mati" setiap kali diklik.

Kode React functional component Toggle dengan hook useState dan tombol yang berubah teks

9. Hook useEffect

useEffect digunakan untuk menangani efek samping di functional component, seperti fetching data, manipulasi DOM, atau subscription.

Contoh penggunaan useEffect untuk fetching data:

{`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}</li>
      ))}
    </ul>
  );
}`}

Parameter kedua [] pada useEffect menandakan efek hanya dijalankan sekali saat komponen pertama kali dirender.

Kode React functional component UserList dengan hook useEffect untuk fetching data dan menampilkan daftar user

10. Custom Hooks

Custom Hooks adalah fungsi JavaScript yang namanya diawali dengan "use" dan dapat menggunakan hook React lainnya. Custom Hooks memungkinkan Anda mengabstraksi logika yang dapat digunakan ulang.

Contoh Custom Hook untuk fetching data:

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

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

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// Penggunaan di komponen
function PostList() {
  const { data: posts, loading } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}`}

Kode React custom hook useFetch dan penggunaannya di komponen PostList

11. Routing dengan React Router

React Router adalah library populer untuk mengelola routing di aplikasi React, memungkinkan navigasi antar halaman tanpa reload.

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 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>
  );
}`}

Kode React Router dengan navigasi Link dan Routes serta tampilan halaman Home dan About

12. Best Practices & Tips

Gunakan Functional Components dan Hooks: Lebih sederhana dan modern dibanding class components.
Pisahkan komponen menjadi bagian kecil: Agar mudah dipelihara dan digunakan ulang.
Gunakan PropTypes atau TypeScript: Untuk validasi tipe data props.
Manfaatkan React DevTools: Untuk debugging dan inspeksi state/props.
Optimasi performa dengan React.memo dan useCallback: Untuk mencegah render ulang yang tidak perlu.
Gunakan Context API atau state management library: Untuk mengelola state global.