Tutorial Reactjs #4: Memahami Sintaks Dasar JSX
Pada awal tutorial ini, kita sudah bahas sekilas tentang JSX.
Berikutnya kita akan perdalam lagi tentang JSX, seperti:
Gimana cara melakukan perulangan di JSX?
Gimana cara membuat kondisi if/else di JSX?
dan gimana cara menggunakan CSS di JSX?
Mari kita mulai!
Apa itu JSX?
JSX merupakan singkatan dari JavaScript Syntax Extension atau dikenal juga dengan Javascript XML. 1
JSX adalah ekstensi React untuk JavaScript. Sintaks JSX mirip seperti HTML, sehingga membuat kita lebih gampang menyusun elemen pada komponen React.
Apa itu element react?
Elemen React adalah bagian terkecil dari sebuah aplikasi. Elemen React akan menyusun sebuah komponen. Elemen ini biasanya akan ditampilkan atau di-render. 1
Tanpa JSX, kita bisa membuat elemen React dengan method:
React.createElement();Method ini punya tiga parameter yang wajib diisi:
- Type elemen dalam bentuk string;
- Properti element dalam bentuk object;
- Children dalam bentuk string dan juga object react element;
Contoh:
var element = React.createElement('h1', {}, 'I do not use JSX!');Tapi masalahnya:
Saat kita punya struktur komponen yang kompleks, maka kodenya akan semakin ribet dan susah untuk dibaca.
Karena itulah ada JSX.
Aturan Penulisan JSX
Ada beberapa aturan dalam menulis JSX yang perlu kita perhatikan:
1. Tempat Penulisan JSX
JSX biasanya ditulis di dalam method render() pada class component dan pada statement return di function component.
Jika kamu belum paham perbedaan class component dan function component, silakan baca:
Oke lanjut..
Selain menulis di method render() dan return, kita juga bisa menulis JSX di dalam variabel. Biasanya JSX yang ditulis di dalam variabel akan sering digunakan ulang pada komponen.
Contoh:
// menggunakan class component
class Button extends Reac.Compontent {
render () {
<button>OK</button>
}
}
// elemen ini tidak ditampilkan, hanya disimpan dalam variabel saja
const CancelButton = <button>Cancel</button>;
// menggunakan function component
function SignInButton(){
return <button>Login</button>
}
// function component dengan arrow function
const RegisterButton = (_) => <button>Register</button>;Oh iya, untuk menulis JSX yang lebih dari satu element disarankan menggunakan tanda kurung ().
2. JSX yang punya banyak element
Menggunakan induk
Menggunakan fragment
Contoh:
function Header(){
return (
<header>
<h1>Judul Aplikasi</h1>
<p>Selogan aplikasi</p>
<button>Daftar Sekarang</button>
</header>
);
} Contoh yang salah: ❌
// tidak ada elemen pembungkus
function Header(){
return (
<h1>Judul Aplikasi</h1>
<p>Selogan aplikasi</p>
<button>Daftar Sekarang</button>
);
}
// bisa, tapi tidak pakai kurung
function Header(){
return
<header>
<h1>Judul Aplikasi</h1>
<p>Selogan aplikasi</p>
<button>Daftar Sekarang</button>
</header>
;
} 3. Penulisan Atribut di JSX
Penulisan atribut di JSX sama seperti penulisan atribut di HTML biasa, hanya saja beberapa atribut harus ditulis dengan aturan JSX.
Misalnya seperti atribut class, pada pada JSX ditulis dengan className.
Contoh:
const button = <button className="btn btn-default">OK</button>;Mengapa harus pakai className?
class adalah kata kunci yang sudah ada di Javascript untuk membuat class.
Sebenarnya bisa juga kita pakai atribut class saja di JSX, tapi nanti akan dapat warning. Karena itu, untuk menghindari ambigu.. disarankan pakai className saja.
Lalu untuk atribut lainnya yang ditulis secara khusus adalah atribut event seperti onclick, onmouseover, dll.
Pada HTML biasa kita tulis dengan huruf kecil semua, sedangkan pada JSX ditulis dengan format CamelCase.
Contoh:
const button = <button onClick={ fungsiHandler }>OK</button>;Perhatikan, di dalam atribut onClick kita memberikan ekspresi Javascript fungsiHandler. Nantinya, saat event klik terjadi pada tombol tersebut, maka fungsi ini akan dijalankan.
Ekspresi Javascript di JSX
Di dalam sintaks JSX, kita bisa membuat ekspresi Javascript dengan kurung kurawal { ... }. Ekspresi ini dapat ditulis di dalam nilai atribut maupun di dalam konten elemen.
Contoh:
// membuat komponen
function MyComponent() {
const imgPlaceholder = "https://via.placeholder.com/150";
return (
<div>
<button>{ 1 + 2 }</button><br/>
<button>{ Date.now() }</button><br/>
<img src={ imgPlaceholder } />
</div>
);
}
// menggunakan komponen di App
function App() {
return <div className="App">
<MyComponent />
</div>;
}Hasilnya:
Coba perhatikan..
Pada sintaks JSX di atas, kita menggunakan ekspresi javascript di dalam kurung kurawal seperti 1 + 2, Date.now(), dan imgPlaceholder.
Output dari ekspresi tersebut akan langsung ditampilkan.
Oh iya, jika kita menuliskan nama variabel di dalam expresi.. maka isi dari variabel tersebut akan ditampilkan.
Contohnya seperti imgPlaceholder.
Biar makin paham, mari kita latihan!
👨💻 Latiahan: Menampilkan Data di JSX
Bukalah project React yang sebelumnya dibuat.
Kemudian pada file App.js ubahlah kodenya menjadi seperti ini:
// membuat komponen dengan props name, price, dan discount
function Product({ name, price, discount = 0}) {
return (
<div>
<h2>{name}</h2>
<p>
<s>Rp {price}</s> ({discount}%)
</p>
<p>
<b>Rp {parseInt(price) - parseInt(price) * (parseInt(discount) / 100)}</b>
</p>
<hr />
</div>
);
}
// menggunakan component di dalam App()
function App() {
return (
<div>
<Product name="iPhone X" price="10000000" discount="50" />
<Product name="Oppo Find X" price="140000000" discount="30" />
<Product name="Redmi Note X" price="12000000" discount="42" />
</div>
);
}
export default App;Hasilnya:
Pada contoh ini, kita membuat komponen Product dengan input props name,price, dan discount.
Lalu di dalam komponen ini, kita menampilkan data dari props dengan ekspresi.
Perulangan di JSX
Perulangan kita buatuhkan untuk menampilkan data yang banyak.
Coba perhatikan kode ini:
// menggunakan component di dalam App()
function App() {
return (
<div>
<Product name="iPhone X" price="10000000" discount="50" />
<Product name="Oppo Find X" price="140000000" discount="30" />
<Product name="Redmi Note X" price="12000000" discount="42" />
</div>
);
}Pada kode ini, kita menggunakan komponen <Product> dengan menulisnya berulang-ulang.
Jika produknya ada 3, ini tidak malasah. Tapi bayangkan jika ada 100 atau 1000.. pasti capek donk nulisnya.
Karena itulah, kita membutuhkan perulangan.
Nah, untuk melakukan perulangan di JSX, kita tidak bisa pakai perulangan for dan while seperti pada Javascript.
Ini karena di JSX hanya bisa menjalankan ekspresi saja, bukan statement.
Jika kamu belum tau perbedaan ekspresi dengan statement, silakan baca tulisan ini:
Lalu gimana donk cara bikin perulangan di JSX?
Caranya dengan pakai method map(), method ini ada di setiap Array.
mari kita coba:
👨💻 Latihan: Perulangan di JSX
Ubahlah kode App.js menjadi seperti ini:
// array untuk menyimpan data
const phoneData = [
{ name: "iPhone X", price: 10000000, discount: 50 },
{ name: "Oppo Find X", price: 14000000, discount: 30 },
{ name: "Redmi Note X", price: 5000000, discount: 42 },
];
// membuat komponen dengan props name, price, dan discount
function Product({ name, price, discount = 0 }) {
return (
<div>
<h2>{name}</h2>
<p>
<s>Rp {price}</s> ({discount}%)
</p>
<p>
<b>
Rp {parseInt(price) - parseInt(price) * (parseInt(discount) / 100)}
</b>
</p>
<hr />
</div>
);
}
// menggunakan component di dalam App()
function App() {
return (
<div>
{phoneData.map((phone, id) => (
<Product
key={id}
name={phone.name}
price={phone.price}
discount={phone.discount}
></Product>
))}
</div>
);
}
export default App;Maka hasilnya:
Hasil outputnya sama seperti yang tadi.
Tapi coba kamu perhatikan kodenya.
function App() {
return (
<div>
{phoneData.map((phone, id) => (
<Product
key={id}
name={phone.name}
price={phone.price}
discount={phone.discount}
></Product>
))}
</div>
);
}Pada kode ini kita menggunakan method map() pada array phoneData. Method ini akan melakukan maping semua data dengan komponen <Product>.
Oh iya, fungsi dari atribut key di sini untuk menentukan kunci unik. Ini wajib ada, karena akan dipakai oleh React untuk menentukan item yang akan diupdate jika ada perubahan state.
Conditional Rendering di JSX
Conditional Rendering adalah rendering yang dilakukan berdasarkan kondisi tertentu. Biasanya mengikuti kondisi nilai pada state dan props.
Misalnya kita punya state isLoading bernilai true, maka kita render elemen yang menampilkan loading. Sebaliknya, jika bernilai false, maka tidak akan di-render. 2
Ini seperti statement if/else.
Ada beberapa cara membuat conditional rendering JSX:
1. Conditional Rendering di Luar JSX
Penulisan conditional rendering di luar sintaks JSX, dapat dilakukan dengan blok if/else biasa.
Contoh:
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}Pada contoh ini, kita memiliki sebuah props isLoggedIn. Jika nilai props isLoggedIn adalah true, maka komponen <UserGreeting> akan di-render.
Sebaliknya, jika bernilai false, maka komponen <GuestGreeting> yang akan di-render.
2. Inline if
Inline if adalah ekspresi if yang berada di dalam JSX.
Contoh:
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}Pada contoh ini, kita menggunakan ekspresi if dengan operator && seperti ini:
unreadMessage.length > 0 && <h2>..</h2>Perhatikan!
unreadMessage.length > 0 adalah kondisi, lalu operator && sebenarnya adalah operator logika AND. Jika kondisi bernilai true, maka elemen <h2> akan ditampilkan atau di-render. Sebaliknya, jika false, maka tidak akan yang ditampilkan.
Sebenarnya sama seperti ini:
if(unreadMessage.length > 0){
return <h2>..</h2>
}Tapi, karena berada di dalam JSX, maka harus ditulis dalam bentuk ekspresi. Ekspresi if di javascript, bisa kita buat dengan operator ternary.
Contoh:
(unreadMessage.length > 0) ? <h2>..</h2> : nullKita memberikan nilai null pada bagian else, karena kita tidak ingin menampilkan apapun jika kondisinya false.
Nah, biar lebih singkat dan tidak perlu pakai null, maka kita bisa pakai operator && (logika AND) seperti ini:
unreadMessage.length > 0 && <h2>..</h2>Lalu gimana cara membuat ekspresi if/else di dalam JSX?
Mari kita bahas:
3. Inline If-Else
Inline if-Else adalah bentuk ekspresi if/else yang ditulis di dalam JSX. Ekspresi ini menggunakan operator ternary dengan format seperti ini:
kondisi ? true : false;Contoh:
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}Pada contoh ini, kita punya state isLoggedIn, lalu di dalam JSX kita membuat kondisi isLoggedIn ? 'currently': 'not'. Artinya, jika nilai state isLoggedIn adalah true, maka teks currently akan ditampilkan, sebaliknya jika bernilai false, maka teks not yang akan ditampilkan.
Sampai di sini sudah paham tentang conditional rendering?
Biar makin paham, mari kita coba latihan!
👨💻 Latihan: Conditional Rendering
Buka kembali file App.js pada project yang sedang kita kerjakan. Kemudian tambahkan data HP sebagai berikut:
const phoneData = [
{ name: "iPhone X", price: 10000000, discount: 50 },
{ name: "Oppo Find X", price: 14000000, discount: 30 },
{ name: "Redmi Note X", price: 5000000, discount: 42 },
{ name: "Vivo XYZ", price: 10000000, discount: 0 },
];Pada data ini, kita menambahkan HP Vivo XYZ dengan discount sebesar 0. Saat kita coba jalankan, maka hasilnya akan seperti ini:
Harga tercoret sangat tidak masuk akal untuk ditampilkan jika produknya tidak ada diskon.
Karena itu, mari kita gunakan conditional rendering untuk mengatasi masalah ini.
Sudah tahu kan kondisinya gimana?
yap, saat diskon sama dengan 0 atau tidak lebih besar dari 0 maka kita tidak perlu menampilkan harga tercoret.
discount > 0 && <HargaTercoret>Mari kita coba terapkan.
Ubahlah komponen Product pada App.js menjadi seperti ini:
function Product({ name, price, discount = 0 }) {
return (
<div>
<h2>{name}</h2>
{discount > 0 && <p><s>Rp {price}</s> ({discount}%)</p>}
<p>
<b>
Rp {parseInt(price) - parseInt(price) * (parseInt(discount) / 100)}
</b>
</p>
<hr />
</div>
);
}Maka sekarang hasilnya akan seperti ini:
Pada latihan ini, kita menggunakan conditional rendering inline-if, yakni dengan menggunakan operator && (logika AND).
Berikut ini kodenya:
{discount > 0 && <p><s>Rp {price}</s> ({discount}%)</p>}Pada sebelah kiri && terdapat kondisi discount > 0, kemudian di sebelah kanan adalah elemen yang akan ditampilkan jika kondisinya bernilai true.
Apa Selanjutnya?
Pada tutorial ini kita telah belajar tentang sintaks JSX, seperti cara menulis ekspresi javascript di JSX, cara melakukan perulangan, dan melakukan conditional rendering.
Perulangan di dalam JSX, wajib dilakukan dengan method map(). Kemudian untuk conditional rendering, kita bisa pilih salah satu cara dari ketiga cara yang sudah dijelaskan.
Sampai di sini ada pertanyaan?
Silakan sampaikan di komentar.
Selanjutnya silakan pelajari tentang:
- Cara Menggunakan CSS pada Reactjs (/reactjs-css)