Vertel me over de componenten in React.

In React zijn componenten onafhankelijke, herbruikbare elementen van de gebruikersinterface die invoergegevens (props) kunnen accepteren en hun eigen staat kunnen beheren.

Er zijn twee hoofdtypen componenten:

1. Functionele componenten: Eenvoudige JavaScript-functies die JSX retourneren.

   // Voorbeeld van een functioneel component
   function Welcome(props) {
     return <h1>Hallo, {props.name}!</h1>;
   }
   

2. Klassengebaseerde componenten: JavaScript-klassen die React.Component uitbreiden en een render()-methode hebben die JSX retourneert. Ze kunnen lokale staat (state) en lifecycle-methoden hebben.

   // Voorbeeld van een klassecomponent
   class Counter extends React.Component {
     constructor(props) {
       super(props);
       this.state = { count: 0 };
     }
   
     render() {
       return (
         <div>
           <p>Tel: {this.state.count}</p>
           <button onClick={() => this.setState({ count: this.state.count + 1 })}>
             Verhoog
           </button>
         </div>
       );
     }
   }
   

Componenten kunnen in elkaar genest worden om complexere interfaces te creëren. Gegevens worden van de oudercomponent naar de kindcomponent doorgegeven via props.

Het gebruik van componenten zorgt voor modulariteit, hergebruik van code en vereenvoudigt het beheer van de toestand van de applicatie.