React Konsep Asas- Components, Props, State

1. Components

Components dalam React adalah blok binaan bebas yang boleh digunakan semula. Ia dibahagikan kepada elemen UI yang lebih kecil dan boleh digabungkan untuk membentuk yang lebih besar components. Sebagai contoh, aplikasi boleh mempunyai components seperti Header, Sidebar dan Content. Setiap komponen mempunyai tanggungjawab sendiri dan boleh menerima props dan state memaparkan data yang sepadan.

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 dalam React adalah nilai yang dihantar ke dalam components dari luar. Mereka membantu menghantar data daripada ibu bapa components kepada anak components. Props adalah baca sahaja dan tidak boleh ditukar di dalam komponen. Untuk menggunakan props, kami menghantar nilai kepada atribut komponen dan menggunakannya dalam bahagian UI.

Contoh:

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

3. State

State in React ialah data boleh ubah yang boleh diubah dalam komponen. Setiap komponen boleh mempunyai sendiri state untuk menyimpan dan mengurus data dinamik. Apabila state perubahan, React secara automatik mengemas kini antara muka pengguna yang sepadan. State diuruskan hanya dalam kelas components dan dimulakan dalam pembina komponen. Untuk mengemas kini state, kami menggunakan State kaedah `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>  
   );  
  }  
}