Scribd
Unggah
2 tayangan4 halaman

Tutorial Basic React

Dokumen ini adalah tutorial dasar tentang React, pustaka JavaScript untuk membangun antarmuka pengguna yang efisien dan fleksibel. Tutorial mencakup pemahaman komponen, penggunaan JSX, state dan hook useState, serta pengiriman data antar komponen menggunakan props. Selain itu, juga dibahas lifecycle dengan useEffect dan pentingnya atribut key saat merender daftar elemen.

Diunggah oleh

Yudhi Octavian Gulö
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
2 tayangan4 halaman

Tutorial Basic React

Dokumen ini adalah tutorial dasar tentang React, pustaka JavaScript untuk membangun antarmuka pengguna yang efisien dan fleksibel. Tutorial mencakup pemahaman komponen, penggunaan JSX, state dan hook useState, serta pengiriman data antar komponen menggunakan props. Selain itu, juga dibahas lifecycle dengan useEffect dan pentingnya atribut key saat merender daftar elemen.

Diunggah oleh

Yudhi Octavian Gulö
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

Tutorial Dasar React: Membangun

UI Modern

React adalah pustaka JavaScript yang dikembangkan oleh Meta untuk membangun
antarmuka pengguna yang deklaratif, efisien, dan fleksibel. React memungkinkan
pengembang membuat UI yang kompleks dari potongan-potongan kecil yang
disebut 'komponen'.

Bab 1: Memahami Komponen

Komponen adalah inti dari React. Bayangkan komponen seperti blok LEGO; Anda
membangun potongan-potongan kecil (seperti Button, Navbar, Card) lalu
menyusunnya menjadi aplikasi yang utuh.

Ada dua jenis komponen: Class Components dan Functional Components. Saat ini,
Functional Components adalah standar industri yang disarankan.

function Welcome(props) {
return

Halo, {[Link]}

;
}

Bab 2: JSX - JavaScript XML

JSX adalah ekstensi sintaks untuk JavaScript yang terlihat seperti HTML. JSX
memudahkan kita menulis struktur UI di dalam file JavaScript. React kemudian
akan mengubah JSX ini menjadi elemen DOM yang sebenarnya.
Aturan utama JSX:

• Harus memiliki satu elemen pembungkus (root element).


• Gunakan className alih-alih class untuk atribut CSS.
• Gunakan kurung kurawal {} untuk menyisipkan ekspresi JavaScript.

Bab 3: State dan Hook useState

State adalah memori internal dari sebuah komponen. Jika State berubah, React
akan secara otomatis memperbarui tampilan UI (re-render).

import React, { useState } from 'react';

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

return (

Anda mengklik {count} kali

setCount(count + 1)}>
Klik Saya

);
}

Bab 4: Props - Mengirim Data Antar Komponen

Props (Properties) adalah cara kita mengirim data dari komponen induk (Parent) ke
komponen anak (Child). Props bersifat read-only, artinya komponen anak tidak
boleh mengubah props yang diterimanya.
function Parent() {
return ;
}

function Child(props) {
return

{[Link]}

;
}

Bab 5: Lifecycle dan useEffect

Hook useEffect memungkinkan kita melakukan 'side effects' seperti mengambil


data dari API (fetching), mengatur subscription, atau mengubah DOM secara
manual.

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

function DataFetcher() {
const [data, setData] = useState([]);

useEffect(() => {
fetch('[Link]
.then(res => [Link]())
.then(result => setData(result));
}, []); // Array kosong berarti ini hanya berjalan sekali saat mount

return (

{[Link](item =>
• {[Link]}
)}
);
}

Bab 6: List dan Key

Saat merender daftar elemen (seperti data dari array), React membutuhkan atribut
key yang unik. Key membantu React mengidentifikasi elemen mana yang berubah,
ditambah, atau dihapus, yang sangat krusial untuk performa.

Bab 7: Penutup dan Langkah Berikutnya

React memiliki ekosistem yang luas. Setelah menguasai dasar ini, Anda disarankan
untuk mempelajari:

• React Router: Untuk navigasi antar halaman.


• State Management (Redux/Zustand): Untuk aplikasi skala besar.
• Styling: Tailwind CSS atau Styled Components.

Anda mungkin juga menyukai