React Alapfogalmak- Components, Props, State

1. Components

Components független React építőelemek, amelyek újra felhasználhatók. Kisebb UI-elemekre vannak osztva, és kombinálhatók nagyobb méretűvé components. Például egy alkalmazásban components a Header, Sidebar és a Content. Minden komponensnek megvan a maga felelőssége, és képes fogadni props és state megjeleníteni a megfelelő adatokat.

Példa:

// 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 kívülről React átvitt értékek. components Segítenek átadni az adatokat a szülőről components a gyermekre components. Props csak olvashatóak, és nem módosíthatók az összetevőn belül. A használatához props értékeket adunk át az összetevő attribútumainak, és használjuk őket a felhasználói felület részében.

Példa:

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

3. State

State Az in React változtatható adat, amely egy komponensen belül módosítható. Mindegyik összetevőnek sajátja lehet state a dinamikus adatok tárolására és kezelésére. A state módosítások esetén React automatikusan frissíti a megfelelő felhasználói felületet. State csak az osztályban kezelhető components, és az összetevő konstruktorában inicializálódik. A frissítéshez state a `set()` metódust használjuk State.

Példa:

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