Tutorial React JS #4: Konsep Dasar React JS

Pada artikel kali ini, kita akan membahas secara detail tentang konsep dasar ReactJS, seperti JSX, components, props, & state. Dengan memahami konsep dasar ini, Anda akan siap untuk membangun atau membuat aplikasi ReactJS yang lebih kompleks.

Konsep Dasar React JS

Artikel ini akan membahas secara rinci setiap topik, dan menyertakan contoh kode yang jelas dan mudah dipahami. Anda akan mempelajari dasar-dasar ReactJS dalam waktu singkat dan bisa langsung memulai membuat aplikasi web yang menarik dan interaktif. Mari kita mulai point-point penting dibawah ini supaya Anda lebih paham dan melihat langsung contoh kode nya.

1. JSX

JSX adalah ekstensi syntax dari JavaScript yang memungkinkan penulisan kode HTML dalam file JavaScript. Dengan JSX, kita bisa membuat struktur user interface pada aplikasi web dengan lebih mudah.

Beberapa keuntungan menggunakan JSX antara lain:

• Mudah untuk dipelajari dan digunakan.
• Kode lebih mudah dibaca dan dipahami.
• Penanganan kesalahan syntax lebih mudah.
• Peningkatan kecepatan rendering aplikasi.

Berikut adalah contoh kode JSX:

const element = <h1>Halo Dunia!</h1>;

2. Components

Component adalah element dasar dalam ReactJS yang digunakan untuk membuat user interface pada aplikasi web. Component dapat berupa function atau class JavaScript.

• Component dapat menerima masukan data berupa props.
• Component dapat memiliki state yang digunakan untuk menyimpan data internal component.
• Component bisa dipisahkan menjadi beberapa bagian untuk memudahkan pengembangan.

Berikut adalah contoh kode pembuatan component menggunakan function dan class:

// Pembuatan komponen menggunakan function
function Halo(props) {
  return <h1>Halo, {props.nama}!</h1>;
}

// Pembuatan komponen menggunakan class
class Halo extends React.Component {
  render() {
    return <h1>Halo, {this.props.nama}!</h1>;
  }
}

3. Props

Props adalah singkatan dari properties dan digunakan untuk mengirimkan data dari parent component ke child component. Props bersifat read-only, yang berarti tidak bisa diubah oleh child component.

Beberapa hal yang perlu diketahui tentang props antara lain:

• Props dapat berupa data apapun, termasuk string, integer, atau bahkan function.
• Props bisa digunakan untuk menyederhanakan kode, dengan mengirimkan data ke parent component daripada membuat ulang kode pada setiap component.

Berikut adalah contoh kode penggunaan props dalam komponen:

function Halo(props) {
  return <h1>Halo, {props.nama}!</h1>;
}

ReactDOM.render(
  <Halo nama="Brian" />,
  document.getElementById('root')
);

4. State

State pada ReactJS adalah sebuah objek JavaScript yang menyimpan data internal sebuah component. Data ini bisa berubah seiring berjalannya waktu, seperti hasil dari input user atau perubahan status sebuah component.

State digunakan untuk membuat component yang dinamis, dimana data yang ditampilkan bergantung pada interaksi user atau data yang berasal dari server. State diupdate menggunakan fungsi setState(), dan ketika sebuah state diupdate, React akan melakukan render ulang component terkait.

Penting untuk diingat bahwa state hanya dapat diakses dan diubah dari dalam komponen tempat state tersebut didefinisikan. State tidak bisa diubah dari luar komponen, kecuali melalui props.

Membuat State Dalam Component

Untuk membuat state dalam component, Anda perlu menentukan state awal di dalam component function constructor. Berikut adalah contoh kode pembuatan state dalam component:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

Dalam contoh di atas, state count diatur menjadi 0 di dalam component constructor. Properti state bisa diakses melalui this.state.

Memperbarui State Dalam Component

State dalam ReactJS hanya bisa diubah melalui pembaruan state yang dilakukan oleh ReactJS. Pembaruan state dilakukan dengan memanggil function setState(). Function ini akan menerima object yang berisi value atau nilai baru yang ingin diperbarui dalam state.

Berikut adalah contoh kode pembaruan state dalam komponen:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Increment</button>
      </div>
    );
  }
}

Dalam contoh di atas, handleClick() adalah fungsi yang dipanggil ketika tombol “Increment” diklik. Fungsi ini akan memperbarui state count dengan menambahkan 1 setiap kali tombol diklik.

Saat ini kita sudah membahas konsep dasar React JS seperti JSX, Components, Props, & State. Dengan memahami konsep dasar ReactJS, kita bisa membangun aplikasi web yang lebih kompleks dan scalable.