React Temel Kavramlar- Components, Props, State

1. Components

Components React yeniden kullanılabilen bağımsız yapı taşlarıdır. Daha küçük UI öğelerine ayrılırlar ve daha büyük UI öğeleri oluşturmak için birleştirilebilirler components. Örneğin, bir uygulama, ve components gibi olabilir. Her bileşenin kendi sorumlulukları vardır ve ilgili verileri alabilir ve görüntüleyebilir. Header Sidebar Content props state

Örnek:

// 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, dışarıdan içe React aktarılan değerlerdir. Verilerin ebeveynden çocuğa components iletilmesine yardımcı olurlar. salt okunurdur ve bileşenin içinde değiştirilemez. kullanmak için, bileşenin özniteliklerine değerler iletiriz ve bunları UI bölümünde kullanırız. components components Props props

Örnek:

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

3. State

State in, React bir bileşen içinde değiştirilebilen değişken verilerdir. Her bileşen, dinamik verileri depolamak ve yönetmek için kendine ait olabilir state. Değişiklikler olduğunda state, React ilgili kullanıcı arayüzünü otomatik olarak günceller. State yalnızca sınıfta yönetilir components ve bileşenin yapıcısında başlatılır. güncellemek için `set ()` yöntemini state kullanıyoruz. State

Örnek:

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