Pengertian JSX
JSX (JavaScript Syntax Extension) adalah sebuah ekstensi sintaksis untuk bahasa pemrograman JavaScript yang umum digunakan dalam pengembangan aplikasi berbasis web, terutama dalam kerangka kerja (framework) seperti React. JSX memungkinkan pengembang untuk menulis kode JavaScript dengan sintaksis yang mirip dengan HTML, sehingga mempermudah pembuatan dan pengelolaan antarmuka pengguna / User Interface (UI) yang kompleks.
Dengan JSX, kita dapat menulis kode seperti ini :
const element = <h1>Hello, world!</h1>;
Dalam contoh di atas, sintaksis `<h1>Hello, world!</h1>` mirip dengan kode HTML, tetapi sebenarnya itu adalah kode JSX yang akan diubah menjadi kode JavaScript biasa saat aplikasi dijalankan.
Pada dasarnya, JSX digunakan untuk membuat elemen-elemen antarmuka pengguna dalam aplikasi React. Ketika kode JSX dieksekusi, React akan mengubahnya menjadi panggilan fungsi-fungsi JavaScript yang membangun dan mengelola komponen-komponen UI. Ini memungkinkan pengembang untuk menyusun tampilan aplikasi dengan lebih intuitif dan ekspresif.
Meskipun JSX adalah fitur yang sangat populer dalam pengembangan web modern, perlu diingat bahwa browser atau lingkungan JavaScript standar tidak mengerti langsung tentang JSX. Oleh karena itu, sebelum kode JSX dapat dieksekusi oleh browser, itu harus diubah terlebih dahulu menjadi kode JavaScript biasa menggunakan alat seperti Babel (sebuah kompiler JavaScript) atau alat sejenisnya.
Elemen React adalah bagian terkecil dari sebuah aplikasi. Elemen React akan menyusun sebuah komponen. Elemen ini biasanya akan ditampilkan atau di-render. 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. Oleh karena itulah adanya JSX menjadi solusi mengatasi masalah ini.
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 belum paham perbedaan class component dan function component, silahkan baca Komponen pada Reactjs.
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>;
Untuk menulis JSX yang lebih dari satu element disarankan menggunakan tanda kurung ().
2. JSX yang punya banyak element
Menggunakan induk dan menggunakan fragment, contoh :
function Header(){
return (
<header>
<h1>Judul Aplikasi</h1>
<p>Selogan aplikasi</p>
<button>Daftar Sekarang</button>
</header>
);
}
Berikut contoh penulisan yang salah :
// tidak ada elemen pembungkus
function Header(){
return (
<h1>Judul Aplikasi</h1>
<p>Selogan aplikasi</p>
<button>Daftar Sekarang</button>
);
}
Pada contoh di atas tidak ada elemen pembungkus yang membungkus elemen lainnya.
// bisa, tapi tidak pakai kurung
function Header(){
return
<header>
<h1>Judul Aplikasi</h1>
<p>Selogan aplikasi</p>
<button>Daftar Sekarang</button>
</header>
;
}
Pada contoh di atas sudah ada elemen pembungkus yang membungkus elemen lainnya (<header> dan </header), tetapi elemen pembungkus tersebut tidak memakai tandan kurung ( ).
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>;
Penulisan harus pakai className, karena 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, dan lain-lain. 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 ekspersi 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 kita buat file baru, misal di dalam folder components dengan nama file Ekspresi.js :
// Import React
import React from 'react';
// membuat komponen
function MyComponent() {
const tampilGambar = "https://via.placeholder.com/150";
return (
<div>
<button>{ 1 + 2 }</button>
<br/>
<button>{ Date.now() }</button>
<br/>
<img src={ tampilGambar } />
</div>
);
}
export default MyComponent;
Pada file App.js kita ubah sintaknya menjadi :
import logo from './logo.svg';
import './App.css';
// PANGGIL FUNGSI MyComponent di Ekspresi.js
import MyComponent from './components/Ekspresi'
function App() {
return (
<div className="App">
<MyComponent />
</div>
);
}
export default App;
Hasilnya :
Perhatikan sintaks JSX di atas, kita menggunakan ekspresi javascript di dalam kurung kurawal seperti 1 + 2, Date.now(), dan tampilGambar. Output dari ekspresi tersebut akan langsung ditampilkan. Jika kita menuliskan nama variabel di dalam expresi, maka isi dari variabel tersebut akan ditampilkan, contohnya seperti tampilGambar.
Menampilkan Data di JSX
Bukalah project React yang sebelumnya dibuat, buat file baru
Kemudian pada file App.js ubahlah kodenya menjadi seperti ini:
import logo from './logo.svg';
import './App.css';
// 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.
Looping / Perulangan di JSX
Looping/perulangan akan kita butuhkan untuk menampilkan data yang banyak. Perhatikan pada kode berikut 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 di atas, kita menggunakan komponen <Product> dengan menulisnya berulang-ulang. Jika produknya hanya ada 3, ini tidak malasah. Tapi bayangkan jika ada 100 atau 1000, pasti akan merepotkan dalam penulisannya. Karena itulah, kita membutuhkan looping/perulangan.
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 belum tau perbedaan ekspresi dengan statement, silahkan baca tulisan berikut ini : Perbedaan Ekspresi dan Statement dalam Kode Program.
Cara bikin perulangan di JSX dengan memakai method map(), method ini ada di setiap Array.
Untuk contoh 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>.
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, 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.
Sebagai contoh, ubah file App.js menjadi seperti berikut :
import logo from './logo.svg';
import './App.css';
// Komponen UserGreeting
function UserGreeting() {
return <h1>Selamat datang, Pengguna!</h1>;
}
// Komponen GuestGreeting
function GuestGreeting() {
return <h1>Silakan masuk atau daftar.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
// menggunakan component di dalam App()
function App() {
// Ganti dengan nilai yang sesuai true/false
const isLoggedIn = true;
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
</div>
);
}
export default App;
Hasilnya :
Jika const isLoggedIn = true;
Jika const isLoggedIn = false;
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, ubah file App.js menjadi seperti berikut :
import logo from './logo.svg';
import './App.css';
// Inline if
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{
unreadMessages.length > 0 &&
<h2>You have {unreadMessages.length} unread messages.</h2>
}
</div>
);
}
// menggunakan component di dalam App()
function App() {
// Memberikan nilai prop unreadMessages sebagai sebuah array
const unreadMessages = ["Message 1", "Message 2"]; // Ganti dengan nilai yang sesuai
return (
<div>
<Mailbox unreadMessages={unreadMessages}/>
</div>
);
}
export default App;
Hasilnya :
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> : null
Kita memberikan nilai null pada bagian else, karena kita tidak ingin menampilkan apapun jika kondisinya false. Supaya lebih singkat dan tidak perlu pakai null, maka kita bisa pakai opeartor && (logika AND) seperti ini :
unreadMessage.length > 0 && <h2>..</h2>
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, ubah file App.js menjadi seperti berikut :
import logo from './logo.svg';
import './App.css';
import React from 'react';
// Komponen yang menggunakan Inline if-else
class UserStatus extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: true, // Ganti dengan nilai yang sesuai
};
}
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
}
// Komponen App
function App() {
return (
<div>
<UserStatus />
</div>
);
}
export default App;
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.
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.
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, sehingga sintak pada file App.js menjadi seperti ini :
import logo from './logo.svg';
import './App.css';
// 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 },
{ name: "Vivo XYZ", price: 1000000, discount: 0 },
];
// membuat komponen dengan props name, price, dan discount
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>
);
}
// 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 sekarang hasilnya akan seperti ini :
Pada latihan ini, kita menggunakan conditional rendering inline-if, yakni dengan menggunakan operator && (logika AND).
{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.
Demikian tutorial tentang Memahami Sintaks Dasar JSX, selanjutnya kita akan mempelajari tentang cara menggunakan CSS pada Reactjs. Semoga bermanfaat, jika ada pertanyaan silahkan tuliskan pada kolom komentar.
Referensi :
- https://www.petanikode.com/reactjs-jsx/
Be the first to comment