Damnthelion > React JS > Apa Itu React JS: Memahami Library JavaScript Paling Dicari
Apa Itu React js: Library JavaScript Paling Dicari Untuk Mengembangkan UI

Apa Itu React JS: Memahami Library JavaScript Paling Dicari

React JS, atau lebih dikenal sebagai React, adalah sebuah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) pada aplikasi web.

React dikembangkan oleh Facebook dan pertama kali diperkenalkan pada tahun 2013.

Library ini dirancang untuk memudahkan pengembangan aplikasi web yang bersifat dinamis, di mana data dapat berubah secara real-time tanpa perlu me-refresh seluruh halaman.

React mempermudah pembuatan aplikasi web dinamis karena memerlukan lebih sedikit koding dan menawarkan lebih banyak fungsionalitas, dibandingkan dengan vanilla JavaScript, di mana menulis kode sering kali menjadi lebih rumit.

Karakteristik React JS

Berikut adalah beberapa karakteristik utama dari React JS:

Komponen (Components)

Contoh komponen pada platform Instagram - Gambar via Simplilearn
Contoh komponen pada platform Instagram – Gambar via Simplilearn

Komponen adalah elemen utama penyusun aplikasi yang dibangun dengan library ini, dan di dalam satu aplikasi biasanya terdiri dari banyak komponen.

Di React JS kamu dapat memecah antarmuka pengguna menjadi bagian-bagian kecil yang disebut dengan komponen.

Komponen-komponen ini memiliki logika, fungsi dan alurnya datanya masing-masing, dan dapat digunakan kembali di seluruh aplikasi, sehingga dapat mengurangi waktu pengembangan aplikasi secara signifikan.

Baik kamu bekerja sendiri atau dengan pengembang lainnya, penggunaan React akan terasa sama.

Komponen dirancang untuk memungkinkan kamu dengan mudah untuk menggabungkan komponen yang ditulis oleh perorangan, tim, dan organisasi yang berbeda.

Studi Kasus

Studi Kasus Komponen

Kamu bisa membuat komponen React-mu sendiri seperti Thumbnail, LikeButton, dan Video. Kemudian menggabungkan komponen tersebut menjadi sebuah tampilan layar (entire screen), halaman, dan aplikasi lengkap.

Video.js

function Video({ video }) {
  return (
    <div>
      <Thumbnail video={video} />
      <a href={video.url}>
        <h3>{video.title}</h3>
        <p>{video.description}</p>
      </a>
      <LikeButton video={video} />
    </div>
  );
}

Kode di atas merupakan kode untuk komponen Video yang terdiri dari komponen kecil lainnya seperti Thumbnail dan LikeButton.

Komponen Video ini bisa digunakan kembali untuk menampilkan daftar video yang tersedia.

Di bawah ini adalah hasil render dari kode di atas:

Perlu di ingat bahwa komponen Video, Thumbnail dan LikeButton sudah memiliki css style sendiri sehingga hasil render di bawah ini sudah di poles untuk mempermudah pemahamanmu.

Komponen UI yang dibangun dari berbagai komponen kecil React.js
Komponen UI yang dibangun dari berbagai komponen kecil React.js

JSX (JavaScript XML)

React JS menggunakan JSX, ekstensi syntax JavaScript yang memungkinkan penulisan kode HTML dalam file JavaScript.

JSX sejatinya adalah Javascript yang digabung dengan HTML - Gambar via Simplilearn
JSX sejatinya adalah Javascript yang digabung dengan HTML – Gambar via SimpliLearn

Fitur ini membuat pembuatan komponen React bisa ditulis dengan kode HTML sehingga mempermudah pembacaan dan penulisan kode. Penggunaan syntax JavaScript ini dipopulerkan oleh React.

Menempatkan markup JSX dekat dengan logika rendering yang terkait membuat komponen React menjadi mudah untuk dibuat, dikelola, dan dihapus.

Studi Kasus

Studi Kasus JSX

Komponen React adalah fungsi-fungsi JavaScript. Ingin menampilkan beberapa konten secara kondisional? Gunakan pernyataan if. Menampilkan daftar? Cobalah menggunakan array map().

VideoList.js

function VideoList({ videos, emptyHeading }) {
  const count = videos.length;
  let heading = emptyHeading;
  if (count > 0) {
    const noun = count > 1 ? 'Videos' : 'Video';
    heading = count + ' ' + noun;
  }
  return (
    <section>
      <h2>{heading}</h2>
      {videos.map(video =>
        <Video key={video.id} video={video} />
      )}
    </section>
  );
}

Kamu bisa menggunakan mendefinisikan logika rendering sebelum kode return(), misalnya pada contoh kode di atas, kode pada baris 2 – 7 adalah logika rendering untuk menentukan apakah penggunaan kata Video yang akan di render dalam bentuk jamak (plural — videos) atau tunggal (singular — video).

Lalu hasil logika tersebut disimpan pada variabel heading (lihat baris 3 dan baris 6), lalu akan digunakan pada syntax JSX pada baris 10.

Pada baris 8 – 15, return() adalah bagian yang akan di-render oleh React, di sinilah penggunaan syntax JSX digunakan.

Kamu dapat menampilkan sebuah variabel dan function di JSX dengan membungkus variabel dan function tersebut dengan {} seperti pada baris 10 dan 11.

Dapat kamu lihat juga, kita telah menggunakan ulang komponen Video (kode sebelumnya) pada baris 11 untuk menampilkan daftar video.

Beginilah hasil rendering dari kode tersebut:

Hasil rendering UI dengan logika kondisional dan penggunaan syntax markup HTML
Hasil rendering UI dengan logika kondisional dan penggunaan syntax markup HTML

Virtual DOM (Document Object Model)

React JS menggunakan konsep Virtual DOM untuk meningkatkan efisiensi pembaruan (perubahan) antarmuka UI dan membuat aplikasi web menjadi lebih cepat.

Gambaran sederhana tentang DOM dan Virtual DOM - Gambar via Simplilearn
Gambaran sederhana tentang DOM dan Virtual DOM – Gambar via SimpliLearn

Virtual DOM adalah representasi struktur DOM dalam bentuk virtual yang ada di memori (disimpan dalam state).

Saat ada perubahan data, React membandingkan Virtual DOM dengan DOM aktual dan hanya akan memperbarui bagian yang perlu berubah, bukan seluruh halaman, seperti yang dilakukan aplikasi web konvensional.

Studi Kasus

Studi Kasus Virtual DOM

Komponen React akan menerima data baru dan menampilkan apa yang akan muncul di screen. Kamu dapat memberikan data baru kedalam komponen melalui sebuah interaksi UI seperti saat pengguna mengetik kedalam input.

React kemudian akan memperbarui layar (screen) dengan data terbaru tersebut.

Berikut ini adalah contoh dari studi kasus di atas:

See the Pen Filter/Search Bar (React) by Geoffrey Buell (@geoffbuell) on CodePen.

CodePen by Geoffrey Buell via CodePen

Satu Arah (One-Way) Data Binding

React JS mengikuti pola binding data satu arah, yang berarti data mengalir dari komponen parent ke komponen child melalui props.

Karena data mengalir dalam satu arah, debug error menjadi lebih mudah dan kamu bisa tau di mana error terjadi pada aplikasi.

Data Binding ini membantu mencegah kompleksitas yang tidak perlu dan membuat aplikasi menjadi lebih mudah dimengerti.

Studi Kasus

Studi Kasus Data Binding

Berikut ini adalah contoh aliran data dari komponen parent ke komponent child melalui props:

Parent.js

const Parent = () => {
   const [user, setUser] = React.useState({ name: 'Felix' });
   const handleInput = (e) => {
      e.preventDefault();
      setUser({
         ...user,
         name: e.target.value,
      });
   };
   
   return (
      <>
         <h1>Parent</h1>
         <br/>
         <input onChange={handleInput} value={user.name} /> 
         <Child user={user} />
      </>
   );
}

Pada Parent.js, kita meneruskan state user (baris 2) kedalam komponen Child melalui props user (baris 16).

Child.js

const Child = ({ user }) => (
   <>
      <h2>Child</h2>
      <h1>{user.name}</h1>
   </>
);

Pada Child.js, kita menangkap props user yang didefinisikan di baris 1, dan kemudian menggunakan props tersebut pada baris 4.

Dan hasil renderingnya seperti ini:

See the Pen React Props example by Felix Gerschau (@fgerschau) on CodePen.

CodePen by Flix Gerschau via CodePen

Mudah dipelajari

React JS mudah dipelajari, karena sebagian besar menggabungkan konsep dasar HTML dan JavaScript. Namun, seperti halnya dengan tools, library dan framework lainnya kamu harus bersedia meluangkan waktu untuk belajar dan memahami library React.

Bisa digunakan untuk mengembangkan aplikasi web dan mobile

React untuk mengembangkan aplikasi Web, Android dan iOS - Gambar via OpenWebSolutions
React untuk mengembangkan aplikasi Web, Android dan iOS – Gambar via OpenWebSolutions

Kita tau bahwa React digunakan untuk pengembangan aplikasi web, namun bukan hanya itu saja. Ada library lainnya yang disebut dengan React Native, masih dikembangkan oleh tim yang sama yang mengembangkan React JS.

React Native memiliki konsep yang kurang lebih sama dengan React JS, sehingga kamu hanya perlu melakukan sedikit penyesuaian pemahaman. Jadi, React bisa digunakan untuk pembuatan aplikasi web dan mobile secara sekaligus.

Tersedia tools untuk Debugging

Facebook telah merilis ekstensi Chrome yang dapat digunakan untuk men-debug aplikasi React JS. Hal ini membuat proses debugging aplikasi web React menjadi lebih cepat dan mudah.

Komunitas yang Besar

Banyak pengguna React yang bertanya dan saling berbagi informasi di internet, terutama di StackOverflow
Banyak pengguna React yang bertanya dan saling berbagi informasi di internet, terutama di StackOverflow

React memiliki komunitas developer yang besar dan aktif. Artinya, banyak sumber daya berupa dokumentasi, dan komponen-komponen yang tersedia di internet untuk membantu kamu dalam mengembangkan aplikasi.

Bahkan banyak juga orang maupun komunitas yang membuat design system agar mempercepat proses pengembangan aplikasi menggunakan React
Bahkan banyak juga orang maupun komunitas yang membuat design system agar mempercepat proses pengembangan aplikasi menggunakan React

Kesimpulan

React JS merupakan library JavaScript yang paling banyak digunakan saat ini, tidak heran jika banyak sekali oportunity pekerjaan programmer dengan library ini sangat dibutuhkan.

Dengan penggunaan komponen yang dapat dipecah menjadi komponen kecil dan masing-masing komponen memiliki logikanya sendiri serta bisa digunakan kembali untuk mempercepat proses pengembangan aplikasi.

Penulisan komponennya pun mudah karena menggunakan JSX, kamu dapat menulis logika komponen menggunakan javascript dan tampilan UI menggunakan HTML dan CSS.

Dengan Virtual DOM, kamu dapat dengan leluasa memanipulasi suatu komponen dalam UI ataupun UX yang telah kamu rancang.

Lalu, dengan pola binding data satu arah dari komponen parent hingga children, memudahkan kamu dalam mencari error dalam suatu komponen.

React JS sangat mudah untuk dipelajari bagi kamu yang sebelumnya pernah belajar HTML, CSS dan vanilla javascript.

Bagi kamu yang masih baru memulai, mempelajari React dapat dibilang cukup mudah, karena sebenarnya React hanyalah sekumpulan function yang ditampilkan berdasarkan suatu state.

Selain itu, dengan banyaknya sumber daya tutorial dan pertanyaan yang ada di internet, kamu bisa mempelajarinya dengan mudah.

Jika kamu sudah memahami konsep React, kamu bisa mencoba untuk mengembangkan aplikasi mobile menggunakan React Native, tentunya dengan konsep yang kruang lebih sama, kamu mempelajari satu untuk membuat dua.


Comments

Jika anda menemukan hal yang membingungkan, jangan malu untuk bertanya melalui kolom komentar, penulis sangat menyukai feedback apalagi jika feedback tersebut dapat memperbaiki penulisan agar mudah dipahami oleh pembaca lainnya di masa depan.

Leave a Reply

Your email address will not be published. Required fields are marked *