Add Javascript React Js

MUAZHAN

4 min read

·

Jun 22, 2024

23

Share

Menambahkan JavaScript ke React JS

React JS adalah library JavaScript yang populer untuk membangun antarmuka pengguna (UI) yang interaktif. Salah satu kekuatan React adalah kemampuannya untuk menggabungkan JavaScript ke dalam komponennya, memungkinkan Anda membuat aplikasi yang dinamis dan responsif. Berikut adalah beberapa cara untuk menambahkan JavaScript ke React JS:

1. Menambahkan JavaScript langsung di dalam komponen

Anda dapat menambahkan JavaScript langsung di dalam komponen React dengan menggunakan kurung kurawal {}. Di dalam kurung kurawal, Anda dapat menulis kode JavaScript biasa, termasuk variabel, fungsi, dan pernyataan.

function Welcome(props) {
  const name = "John Doe"; // Variabel
  const date = new Date(); // Fungsi

  return (
    

      
Selamat Datang, {name}!
      
Hari ini adalah {date.toDateString()}
    
  );
}

2. Menggunakan state dan props

State digunakan untuk menyimpan data yang unik untuk setiap komponen, sementara props digunakan untuk meneruskan data dari komponen induk ke komponen anak.

Contoh penggunaan state:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}

Contoh penggunaan props:

function Welcome(props) {
  return 
Selamat Datang, {props.name}!
;
}

function App() {
  return ;
}

3. Memanggil fungsi JavaScript dari event handler

Anda dapat memanggil fungsi JavaScript dari event handler dalam komponen React, seperti saat pengguna mengklik tombol atau mengetik di bidang input.

function MyComponent() {
  const handleClick = () => {
    console.log("Tombol ditekan!");
  };

  return (
    

      Klik Saya
    
  );
}

4. Menggunakan hook

React hooks adalah fungsi yang memungkinkan Anda "mengaitkan" (hook) ke fitur React seperti state dan lifecycle method tanpa menulis class.

Contoh penggunaan useState hook:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}

5. Menggunakan library JavaScript pihak ketiga

Anda dapat menambahkan library JavaScript pihak ketiga ke proyek React Anda untuk memperluas fungsionalitasnya.

Contoh menggunakan library Moment.js untuk menampilkan tanggal:

import moment from 'moment';

function DateComponent() {
  const currentDate = moment().format('LL'); // Menggunakan Moment.js

  return (
    

      
Hari ini adalah: {currentDate}
    
  );
}

Catatan: Untuk menambahkan library pihak ketiga, Anda perlu menginstalnya terlebih dahulu menggunakan npm atau yarn.

Dengan memahami konsep-konsep dasar ini, Anda dapat menambahkan JavaScript ke komponen React Anda untuk membangun aplikasi yang lebih dinamis dan interaktif.