author Ahmad Muhardian

Tutorial Reactjs #4: Memahami Sintaks Dasar JSX


Reactjs 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 Javasript. 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:

  1. Type elemen dalam bentuk string;
  2. Properti element dalam bentuk object;
  3. Children dalam bentuk string dan juga object react element;

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 biasnaya 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, silahkan 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

Mengguakan 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 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:

// 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:

hasil ekspresi js

Coba perhatikan..

Pada sintaks JSX di atas, ktia 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:

contoh product

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, silahkan 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:

contoh product

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> : null

Kita 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 opeartor && (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:

added phone data

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:

contoh hasil conditional rendering

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?

Silahkan sampaikan di komentar.

Selanjutnya silahkan pelajari tentang:

  • Cara Menggunakan CSS pada Reactjs (/reactjs-css)

Baca Juga ini

Tutorial Reactjs #3: Segala Hal yang Harus Kamu Ketahui tentang Components di React

Tutorial Reactjs #3: Segala Hal yang Harus Kamu Ketahui tentang Components di React

Komponen adalah bagian terpenting di dalam aplikasi React. Tutorial ini berisi tentang segala hal yang harus kamu ketahui tentang komponen pada Reactjs.

Tutorial Reactjs #1: Pengenalan Dasar Reactjs untuk Pemula

Tutorial Reactjs #1: Pengenalan Dasar Reactjs untuk Pemula

Belajar Reactjs untuk Pemula: Pada tutorial ini, kita akan berkenalan dengan Reactjs, bagaimana cara menggunakan reactjs dan JSX. Simak selengkapnya..

Persiapan Awal untuk Belajar React Native

Persiapan Awal untuk Belajar React Native

Yuk! kenalan dengan React Native dan mulai belajar React Native sekarang juga. React Native adalah sebuah ...

Menggunakan Grid.js untuk Membuat Tabel Dinamis di HTML

Menggunakan Grid.js untuk Membuat Tabel Dinamis di HTML

Malas membuat tabel dinamis sendiri? gunakan saja Gridjs. Pada tutorial ini, kita akan belajar cara menggunakan Gridjs dengan data dari sisi client dan server.

Tutorial Vuejs: Apa itu Directive pada Vuejs?

Tutorial Vuejs: Apa itu Directive pada Vuejs?

Pada tutorial ini, kita akan belajar memahami directive pada Vuejs. Apa itu directive dan bagaimana cara menggunakannya dalam aplikasi. Simak selengkapnya...

Cara Menggunakan NVM untuk Manajemen Versi Nodejs

Cara Menggunakan NVM untuk Manajemen Versi Nodejs

NVM biasanya digunakan untuk menginstal Nodejs, tapi sebenarnya bukan itu fungsi utamanya. Lalu apa donk? mari kita bahas...