ReactJS - React tanpa JSX

Apa itu JSX?

Sebelum kita mempelajari React tanpa JSX, mari pertama-tama pahami apa JSX itu. JSX, atau JavaScript XML, adalah ekstensi sintaks untuk JavaScript yang mirip dengan HTML. Itu biasanya digunakan dengan React untuk menjelaskan bagaimana UI seharusnya terlihat. Namun, JSX bukan persyaratan untuk menggunakan React. React bisa digunakan tanpa JSX, dan itu yang kita akan jelajahi dalam panduan ini.

Mengapa Menggunakan React Tanpa JSX?

Anda mungkin berpikir, "Jika JSX begitu umum, mengapa kita ingin menggunakan React tanpa itu?" Pertanyaan yang bagus! Ada beberapa alasan:

1. Belajar konsep inti: Memahami bagaimana React bekerja tanpa JSX dapat memberikan Anda pengetahuan yang mendalam tentang pustaka ini.
2. Batasan alat bangun: Beberapa lingkungan bangun mungkin tidak mendukung kompilasi JSX.
3. Preferensi pribadi: Beberapa pengembang hanya memilih menulis JavaScript murni.

Membuat Element dengan React.createElement()

Pusat dari menggunakan React tanpa JSX adalah fungsi React.createElement(). Fungsi ini adalah apa yang JSX kompiler ke, jadi kita hanya menghapus pihak ketiga saja!

Mari kita mulai dengan contoh sederhana:

const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);

Dalam contoh ini, kita membuat elemen h1 dengan kelas 'greeting' dan konten teks 'Hello, world!'. Mari kitauraikan argumen-argumen ini:

1. Argumen pertama ('h1') menentukan jenis elemen yang kita ingin buat.
2. Argumen kedua ({className: 'greeting'}) adalah objek yang berisi properti elemen.
3. Argumen ketiga ('Hello, world!') adalah konten elemen.

Jika kita menulis ini dalam JSX, itu akan terlihat seperti ini:

const element = <h1 className="greeting">Hello, world!</h1>;

Lihat betapa kompak JSX itu? Tetapi jangan khawatir, dengan latihan, membuat elemen tanpa JSX menjadi kebiasaan!

Menanam Element

Sekarang, mari kita coba sesuatu yang sedikit lebih kompleks. Bagaimana membuat div dengan dua elemen anak?

const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Welcome'),
React.createElement('p', null, 'This is a paragraph.')
);

Ini membuat struktur yang setara dengan:

<div>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</div>

Perhatikan bagaimana kita menanam panggilan createElement untuk membuat elemen anak. Argumen null adalah tempat kita akan menempatkan properti jika kita membutuhkannya.

Membuat Komponen

Komponen adalah blok bangunan aplikasi React. Mari kita buat komponen fungsional sederhana tanpa JSX:

function Welcome(props) {
return React.createElement(
'h1',
null,
'Welcome, ' + props.name
);
}

Untuk menggunakan komponen ini, kita akan melakukan:

const element = React.createElement(Welcome, {name: 'Alice'});

Ini setara dengan JSX:

const element = <Welcome name="Alice" />;

Menghandle Event

Penghandlean event dalam React tanpa JSX sangat mirip dengan penghandlean event dengan JSX. Mari kita buat tombol yang mencatat pesan saat diklik:

function handleClick() {
console.log('Button clicked!');
}

const button = React.createElement(
'button',
{onClick: handleClick},
'Click me'
);

Di sini, kita mempassingkan fungsi handleClick sebagai properti onClick ke elemen tombol.

Renderisasi Conditional

Renderisasi conditional agak lebih panjang tanpa JSX, tapi tetap sepenuhnya dimungkinkan:

function Greeting(props) {
if (props.isLoggedIn) {
return React.createElement('h1', null, 'Welcome back!');
} else {
return React.createElement('h1', null, 'Please sign up.');
}
}

const element = React.createElement(
Greeting,
{isLoggedIn: true}
);

Lists dan Keys

Renderisasi list tanpa JSX memerlukan kita untuk menggunakan Array.map() secara eksplisit:

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
React.createElement('li', {key: number.toString()}, number)
);

const list = React.createElement('ul', null, listItems);

Perhatikan bagaimana kita masih menggunakan properti key, yang sangat penting untuk proses rekonsiliasi React.

Tabel Metode

Berikut adalah tabel yang menyummarisakan metode penting yang kita diskusikan:

Metode	Deskripsi	Contoh
React.createElement()	Membuat elemen React	React.createElement('div', null, 'Hello')
Array.map()	Transformasi elemen array	numbers.map(n => React.createElement('li', null, n))
React.render()	Merender elemen React ke DOM	ReactDOM.render(element, document.getElementById('root'))

Kesimpulan

Meskipun JSX tentu saja membuat penulisan kode React lebih intuitif dan mudah dibaca, memahami bagaimana menggunakan React tanpa JSX memberikan Anda apresiasi yang mendalam tentang apa yang terjadi di bawah kapal. Itu seperti belajar mengemudikan mobil manual sebelum mengemudikan mobil otomatis - itu memberikan Anda lebih banyak kontrol dan pemahaman tentang prosesnya.

Ingat, baik Anda menggunakan JSX atau tidak, prinsip inti React tetap sama. Komponen, prop, state, dan DOM virtual semua bekerja sama seperti itu. JSX hanya adalah gula sintaks yang membuat proses coding sedikit lebih manis!

Jadi, kali berikutnya Anda debug aplikasi React dan Anda melihat React.createElement() dalam kode terkompilasi, Anda akan tahu secara tepat apa yang sedang terjadi. Selamat coding, dan semoga elemen React Anda selalu benar!

Credits: Image by storyset