Apa Itu React? Penjelasan Library UI JavaScript

React adalah library JavaScript untuk membangun antarmuka pengguna dari komponen. Kamu menjelaskan seperti apa layar seharusnya untuk data saat ini, dan saat data berubah, React memperbarui halaman agar sesuai. React, React JS, dan ReactJS adalah hal yang sama: library open source yang dibuat di Facebook (sekarang Meta).

import { useState } from 'react';

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

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Klik kedua tombol. Setiap Counter menyimpan angkanya sendiri, karena masing-masing adalah salinan komponen yang terpisah dengan state-nya sendiri. Tambahkan baris ketiga, <Counter label="Plums" />, dan sebuah counter baru yang berdiri sendiri akan muncul.

Contoh singkat itu sudah menunjukkan tiga ide dasar React: komponen (Counter dan App adalah fungsi yang mengembalikan UI), JSX (sintaks mirip HTML di dalam return), dan state (count, nilai yang membuat React menggambar ulang komponen saat nilainya berubah).

Masalah yang diselesaikan React

Antarmuka pengguna adalah gambaran dari suatu data. Saat data berubah, gambarannya juga harus berubah, dan setiap bagian layar yang bergantung pada data itu harus ikut berubah. Tanpa library, kamu menulis kode itu sendiri: cari setiap elemen, lalu atur teks, class, atau visibilitasnya satu per satu. Setiap fitur baru menambah satu tempat lagi yang harus kamu ingat untuk diperbarui.

React membalik cara kerja ini. Kamu menulis satu fungsi yang menyatakan seperti apa layar untuk state tertentu, dan React mencari tahu bagian halaman mana yang perlu berubah. Ini disebut UI deklaratif, kebalikan dari kode imperatif yang mendaftar setiap perubahan DOM langkah demi langkah. Berikut kedua gaya itu berdampingan dalam satu contoh:

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

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

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

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand menyerahkan paragrafnya ke kode DOM biasa (effect hanya menjalankan kode itu setelah React membuat paragrafnya). Komponen ini menyimpan angka di sebuah variabel, mencari setiap elemen dengan querySelector, dan mengatur teksnya secara manual. Declarative hanya berkata "tampilkan angkanya, dan tampilkan apakah angka itu genap". Hapus baris di handleClick yang mengatur .parity lalu klik beberapa kali: baris pertama sekarang mengklaim 3 itu genap, sementara baris kedua tidak bisa tidak sinkron, karena teksnya dihitung dari count di setiap render.

Cara React memperbarui halaman

Saat state berubah, React memanggil fungsi komponenmu lagi. Pemanggilan itu disebut render. Fungsi itu mengembalikan gambaran UI yang baru, React membandingkannya dengan gambaran sebelumnya, lalu hanya mengubah bagian halaman asli yang berbeda. Gambaran di memori itu sering disebut virtual DOM.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

Buka console di bawah pratinjau dan ketik beberapa huruf. Setiap ketukan tombol mencatat satu render dengan nilai baru. Input tetap fokus dan posisi kursornya tidak bergeser, karena React hanya menyentuh teks paragraf dan nilai input, bukan seluruh halaman. Halaman tentang rendering menjelaskan dengan tepat kapan sebuah komponen dirender lagi.

Sekilas tentang komponen, JSX, dan state

Komponen adalah fungsi JavaScript yang namanya diawali huruf kapital. Komponen mengembalikan apa yang harus tampil di layar, dan kamu memakainya seperti tag HTML: <Counter />. Sebuah halaman adalah pohon komponen, dari yang kecil seperti tombol sampai yang besar seperti satu layar pengaturan penuh. Lihat komponen.

JSX adalah sintaks yang memungkinkan kamu menulis markup di dalam JavaScript. Kurung kurawal membawamu kembali ke JavaScript, jadi {count} menampilkan sebuah nilai dan {items.map(...)} mengubah array menjadi daftar. Sebuah build tool mengompilasi JSX menjadi pemanggilan fungsi biasa sebelum browser menjalankannya.

State adalah data yang diingat komponen di antara render. Kamu membuatnya dengan hook useState, dan memanggil setter-nya adalah cara memberi tahu React bahwa sesuatu berubah. Data mengalir dari parent ke child lewat props, yaitu argumen dari sebuah komponen.

Contoh ini memakai semuanya: daftar yang dirender dari array di state, dan formulir yang menambahkan isi ke daftar itu.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

Tambahkan satu tugas dan dua hal berubah sekaligus: daftar dan jumlah di bawahnya. Kamu tidak pernah menyuruh jumlah itu diperbarui. Keduanya membaca dari tasks, jadi keduanya mengikutinya. Ganti array awal menjadi [] dan daftar akan menampilkan "Nothing to do." sebagai gantinya.

Apa yang bukan React

React adalah library, bukan framework lengkap. React mengurus komponen, state, dan mengubah keduanya menjadi UI, lalu sengaja meninggalkan beberapa hal yang dibutuhkan aplikasi lengkap:

• Routing. Tidak ada cara bawaan untuk memetakan URL ke halaman. React Router dan router dari framework mengisi kekosongan itu.
• Pengambilan data dan server rendering. React memberimu alat seperti effect dan Suspense, tapi tidak menentukan dari mana data berasal atau bagaimana halaman dirender di server.
• Setup build. Browser tidak memahami JSX, jadi kamu butuh alat seperti Vite untuk mengompilasinya.

Framework dibangun di atas React untuk menyediakan bagian-bagian ini. Next.js dan mode framework React Router menambahkan routing, server rendering, dan pemuatan data, dan tim React menyarankan memulai aplikasi lengkap dengan salah satunya. Untuk aplikasi sisi client atau untuk belajar, Vite dengan React biasa adalah titik awal yang kecil dan cepat; lihat cara menginstal React.

React vs React Native

React sendiri hanya menggambarkan komponen dan cara komponen itu berubah. Sebuah renderer terpisah mengubahnya menjadi sesuatu yang bisa kamu lihat. React DOM merender ke halaman web, dan itulah yang dipakai setiap contoh di situs ini. React Native merender jenis komponen yang sama ke tampilan native iOS dan Android, jadi kamu menulis <View> dan <Text> alih-alih <div> dan <p>, dan tidak ada file HTML atau CSS. Komponen, props, state, dan hook bekerja sama di keduanya, jadi apa yang kamu pelajari di sini langsung terbawa ke sana.

Kapan belajar React

Pelajari React setelah dasar-dasar JavaScript, karena semua hal di React adalah JavaScript. Sebelum mulai, sebaiknya kamu sudah nyaman dengan:

• variabel, fungsi, dan arrow function
• array beserta method map dan filter
• object, destructuring, dan sintaks spread (...)
• import dan export
• promise dan async/await, untuk memuat data

Kalau semua itu sudah terasa akrab, mulailah dengan JSX dan komponen, lalu props dan state. Effect, ref, context, dan alat performa datang belakangan, setelah membangun komponen interaktif kecil terasa alami.