ReactJS - React Without JSX

Apa Itu JSX?

Sebelum kita melihat bagaimana mengguna React tanpa JSX, mari pertama-tama kita mengerti apa JSX itu. JSX, atau JavaScript XML, adalah ekstensi sintaksis untuk JavaScript yang mirip dengan HTML. Ini biasanya digunakan dengan React untuk mendeskripsikan bagaimana UI seharusnya terlihat. Namun, JSX bukan persyaratan untuk menggunakan React. React dapat digunakan tanpa JSX, dan itu yang kita akan jelajahi dalam panduan ini.

Mengapa Menggunakan React Tanpa JSX?

Mungkin Anda bertanya-tanya, "Jika JSX begitu umum, mengapa kita ingin menggunakan React tanpa itu?" Pertanyaan bagus! Ada beberapa alasan:

1. Belajar konsep inti: Memahami bagaimana React bekerja tanpa JSX dapat memberikan Anda pengetahuan yang lebih 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 Elemen dengan React.createElement()

Pusat dari menggunakan React tanpa JSX adalah fungsi React.createElement(). Fungsi ini adalah apa yang JSX kompilasi menjadi, jadi kita hanya menghapus pihak tengah!

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 mengandung 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 nafsu pertama!

Menanam Elemen

Sekarang, mari kita coba sesuatu yang 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 menciptakan 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" />;

Menangani Event

Penanganan event dalam React tanpa JSX sangat mirip dengan menggunakan 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 mensampaikan fungsi handleClick sebagai properti onClick ke elemen tombol.

Penyajian Kondisional

Penyajian kondisional lebih panjang tanpa JSX, tetapi 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}
);

Daftar dan Kunci

Penyajian daftar 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 bagi proses rekonsiliasi React.

Tabel Metode

Berikut adalah tabel yang menggabungkan metode kunci 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()	Menyajikan 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 untuk apa yang terjadi di bawah hood. Itu seperti belajar mengemudi mobil manual sebelum otomatis - itu memberikan Anda lebih banyak kontrol dan pemahaman tentang proses.

Ingat, baik Anda menggunakan JSX atau tidak, prinsip utama React tetap sama. Komponen, properti, state, dan DOM virtual semua bekerja sama seperti itu. JSX hanya gula sintaksis yang membuat proses pengkodean sedikit lebih manis!

Jadi, kali berikutnya Anda debugging aplikasi React dan Anda melihat React.createElement() dalam kode terkompilasi, Anda akan tahu tepat apa yang sedang berlangsung. Selamat coding, dan may your React elements always render true!

Credits: Image by storyset