Hai teman-teman koding! Udah pada tahu belum, nih, kalau Vue 3 bisa dipakai pakai JSX? Iya dong, sekarang Vue makin keren aja! 😎

Mungkin bagi developer yang menggunakan React sudah tidak asing dengan JSX ini, namun bagi developer yang menggunakan Vue biasanya terbiasa dengan template syntax di Vue, tapi sekarang, ada opsi baru nih, yaitu JSX. Nah, kali ini kita bakal ngomongin tentang betapa serunya mencoba Vue 3 dengan JSX.

Mengenal JSX

Jadi, sebelumnya, kita akrab dengan templating Vue yang pake HTML, kan? JSX ini templating atau pembentuk struktur di web. JSX ini menjadi templating default di React. Nah, dengan JSX, kita bisa nulis komponen Vue kita pake sintaks yang mirip JavaScript. Jadi kita buat kode Vue dengan gaya React, gitu.

Kelebihan menggunakan JSX

1. Coding Jadi Lebih Expressive: Dengan JSX, kita bisa ekspresikan logika kita dengan lebih langsung. Gak perlu pake banyak template syntax yang bikin pusing.

2. Integrasi Lebih Baik dengan Lib JavaScript Lain: Vue 3 dengan JSX jadi lebih mudah diintegrasikan dengan library JavaScript lainnya. Bisa kok dipaduin sama teknologi-teknologi kekinian!

3. Performance Makin Ciamik: Kode kita jadi lebih efisien, dan hasilnya? Aplikasi jadi lebih cepat dan responsif!

Perbedaan JSX dnegan Template Vue

Jika dilihat dari penggunaan kode kita dapat melihat beberapa perbedaan dalam menggunakan template Vue dan JSX

Penggunaan (if)

• Menggunakan template Vue

  <template>
    <div v-if="user.age > 18">
      Welcome, {{user.name}}
    </div>
  </template>
  

• Menggunakan JSX

  export default {
    ....
    
    render({ user }){
      return (
        {user.age > 18 ? (
          <div>
            Welcome, {user.name}
          </div>
        ) : null}
      )
    }
  }
  

Penggunaan (for)

• Menggunakan template Vue

  <template>
    <div v-for="item in items" :key="item.id">
      {{ item }}
    </div
  </template>
  

• Menggunakan JSX

  render({ items }){
    return (
      {items.map(item => (
        <div key={item.id}>
          {item}
        </div>
      ))}
    )
  }
  

Penggunaan event (on)

• Menggunakan template Vue

  <script setup>
    function handleButtonClick(e){
      e.preventDefault();
      alert('button clicked')
    }   
  </script>
  
  <template>
    <div>
      <button v-on:click="handleButtonClick()"> click me</button>
    </div>
  </template>
  

• Menggunakan JSX

  export default {
    setup() {
      function handleButtonClick(e){
        e.preventDefault();
        alert('button clicked')
      }   
      export { handleButtonClick }
    },
    render({ handleButtonClick }){
      return (
        <div>
          <button onClick={handleButtonClick}>{item}</button>
        </div>
      )
    }
  }
  

Implementasi di Project Kita

1. Buat project baru.

   npm create vue@latest
   

2. Isi pertanyaan sesuai dengan yang diperlukan, ketika teradapat pertanyaan 'Add JSX Support?', bisa di pilih Yes.

   

3. Vue tidak langsung menyediakan contoh penggunaan JSX nya maka dari itu kita perlu, kita perlu membuat file JSX sendiri. Buat file di folder src dengan App.jsx kemudian isikan denan kode sederhana berikut

   import { ref } from "vue";
   
    export default {
      setup() {
        const count = ref(0);
   
        const increment = () => {
          count.value++;
        };
   
        return { count, increment };
      },
      render({ count, increment }) {
        return (
          <>
            <p>count: { count }</p>
   
            <button onClick={increment}>Increment</button>
          </>
        )
      },
    }
   

4. Selamat anda berhasil mengimplementasikan JSX di Vue 🎉

Kesimpulan

Jadi, Vue 3 sekarang bisa dipakai pakai JSX, Mungkin udah pada familiar dengan JSX kalo biasa pakai React. Tapi, buat yang biasa pakai Vue, mungkin lebih terbiasa sama templating HTML-nya. Nah, sekarang ada opsi baru, yaitu JSX. Implementasi JSX di proyek Vue juga cukup mudah. Kita bisa langsung eksplorasi bikin kode-kode kece dengan gaya yang lebih santai. So, siap-siap deh bikin aplikasi Vue yang makin kece dan makin ciamik dengan dukungan JSX! 🚀