Memahami Dasar-dasar ReactJS

1. component dan JSX

Komponen adalah elemen utama dalam pengembangan aplikasi ReactJS. Mereka memungkinkan Anda untuk membagi UI menjadi bagian-bagian yang terisolasi dan dapat digunakan kembali. Dalam ReactJS, komponen dapat ditulis menggunakan JSX (JavaScript XML), yang merupakan sintaksis ekstensi untuk JavaScript yang memungkinkan penulisan kode HTML-terinspirasi dalam komponen. JSX mempermudah pengembangan UI yang deklaratif dan intuitif.

contoh

import React from 'react';

function MyComponent() {
  return <h1>Hello, World!</h1>;
}

export default MyComponent;

2.State dan Props

State adalah objek JavaScript yang berisi data yang dikelola oleh sebuah komponen. Saat state berubah, komponen akan diperbarui dan menggambar ulang tampilan sesuai dengan perubahan tersebut. State hanya dapat diubah di dalam komponen yang memiliki state tersebut.

Props (atau properties) adalah argumen yang diteruskan ke komponen sebagai data input. Mereka berfungsi sebagai cara untuk mentransfer data dari satu komponen ke komponen lainnya. Props bersifat read-only dan tidak boleh diubah di dalam komponen yang menerimanya.

contoh

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <p>Message: {props.message}</p>
    </div>
  );
}

export default Counter;

3.Peristiwa dan Penanganannya

Dalam ReactJS, Anda dapat menangani peristiwa (misalnya, mengklik tombol) dengan menggunakan atribut peristiwa (seperti onClick) dalam elemen JSX. Anda akan menentukan fungsi penangan peristiwa untuk merespons peristiwa tersebut. Fungsi penangan peristiwa akan dieksekusi ketika peristiwa terjadi.

import React, { useState } from 'react';

function ToggleButton() {
  const [isToggled, setToggle] = useState(false);

  const handleClick = () => {
    setToggle(!isToggled);
  };

  return (
    <button onClick={handleClick}>
      {isToggled ? 'ON' : 'OFF'}
    </button>
  );
}

export default ToggleButton;

Dalam bagian ini, Anda telah mempelajari konsep dasar yang penting dalam ReactJS, yaitu komponen dan JSX, state dan props, serta peristiwa dan penanganannya. Memahami konsep-konsep ini akan membantu Anda dalam membangun aplikasi ReactJS yang interaktif dan dinamis.

Selanjutnya! (3.Menjelajahi Fitur ReactJs)