React Basisconcepten- Components, Props, State

1. Components

Components in React zijn zelfstandige bouwstenen die hergebruikt kunnen worden. Ze zijn onderverdeeld in kleinere UI-elementen en kunnen worden gecombineerd om grotere te vormen components. Een applicatie kan components bijvoorbeeld Header, Sidebar en Content. Elke component heeft zijn eigen verantwoordelijkheden en kan bijbehorende gegevens ontvangen props en state weergeven.

Voorbeeld:

// 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 zijn waarden die van buitenaf React zijn doorgegeven. components Ze helpen gegevens van ouder components op kind door te geven components. Props zijn alleen-lezen en kunnen niet binnen de component worden gewijzigd. Om te gebruiken props, geven we waarden door aan de attributen van de component en gebruiken ze in het UI-gedeelte.

Voorbeeld:

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

3. State

State in React zijn veranderlijke gegevens die binnen een component kunnen worden gewijzigd. Elke component kan zijn eigen component hebben state om dynamische gegevens op te slaan en te beheren. Wanneer de state wijzigingen optreden, React wordt de bijbehorende gebruikersinterface automatisch bijgewerkt. State wordt alleen in de klas beheerd components en wordt geïnitialiseerd in de constructor van de component. Om de state, gebruiken we de `set State()` methode.

Voorbeeld:

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