React Konsep Dasar- Components, Props, State

1. Components

Components ing React minangka blok bangunan independen sing bisa digunakake maneh. Iki dipérang dadi unsur UI sing luwih cilik lan bisa digabung dadi luwih gedhe components. Contone, aplikasi bisa duwe components kayata Header, Sidebar lan Content. Saben komponen duwe tanggung jawab dhewe lan bisa nampa props lan state nampilake data sing cocog.

Tuladha:

// 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 ing React minangka nilai sing diterusake components saka njaba. Dheweke mbantu ngirim data saka wong tuwa components menyang anak components. Props mung diwaca lan ora bisa diganti ing komponen kasebut. Kanggo nggunakake props, kita ngirim nilai menyang atribut komponen lan digunakake ing bagean UI.

Tuladha:

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

3. State

State ing React minangka data sing bisa diganti sing bisa diganti ing komponen. Saben komponen bisa duwe dhewe state kanggo nyimpen lan ngatur data dinamis. Nalika state owah-owahan, React kanthi otomatis nganyari antarmuka pangguna sing cocog. State dikelola mung ing kelas components lan diinisialisasi ing konstruktor komponen. Kanggo nganyari state, kita nggunakake State metode `set()`.

Tuladha:

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>  
   );  
  }  
}