React Konsep Dasar- Components, Props, State

1. Components

Components di React adalah blok bangunan independen yang dapat digunakan kembali. Mereka dibagi menjadi elemen UI yang lebih kecil dan dapat digabungkan menjadi lebih besar components. Misalnya, sebuah aplikasi dapat memiliki components seperti Header, Sidebar dan Content. Setiap komponen memiliki tanggung jawabnya masing-masing dan dapat menerima props dan state menampilkan data yang sesuai.

Contoh:

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

2. Props

Props in React adalah nilai-nilai yang diteruskan components dari luar. Mereka membantu mengirimkan data dari orang tua components ke anak components. Props bersifat read-only dan tidak dapat diubah di dalam komponen. Untuk menggunakan props, kita meneruskan nilai ke atribut komponen dan menggunakannya di bagian UI.

Contoh:

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

3. State

State in React adalah data yang dapat diubah yang dapat diubah dalam suatu komponen. Setiap komponen dapat memiliki sendiri state untuk menyimpan dan mengelola data dinamis. Ketika state perubahan, React secara otomatis memperbarui antarmuka pengguna yang sesuai. State dikelola hanya di kelas components dan diinisialisasi dalam konstruktor komponen. Untuk memperbarui state, kami menggunakan State metode `set()`.

Contoh:

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