Mesélj a React komponensekről.

A React-ben a komponensek független, többször felhasználható felhasználói felület elemek, amelyek elfogadhatnak bemeneti adatokat (props), és kezelhetik saját állapotukat.

Két fő típusuk van a komponenseknek:

1. Funkcionális komponensek: Egyszerű JavaScript függvények, amelyek JSX-et adnak vissza.

   // Funkcionális komponens példa
   function Welcome(props) {
     return <h1>Szia, {props.name}!</h1>;
   }
   

2. Osztály alapú komponensek: JavaScript osztályok, amelyek kiterjesztik a React.Component-et, és rendelkeznek egy render() metódussal, ami JSX-et ad vissza. Lehetnek helyi állapotuk (state) és életciklus metódusaik.

   // Osztály alapú komponens példa
   class Counter extends React.Component {
     constructor(props) {
       super(props);
       this.state = { count: 0 };
     }
   
     render() {
       return (
         <div>
           <p Számláló: {this.state.count}</p>
           <button onClick={() => this.setState({ count: this.state.count + 1 })}>
             Növel
           </button>
         </div>
       );
     }
   }
   

A komponensek egymásba ágyazhatók, így összetettebb felületek hozhatók létre. Az adatok a szülő komponensből a gyermek komponensbe props-on keresztül kerülnek át.

A komponensek használata modularitást, kód újrahasznosítást és az alkalmazás állapotának könnyű kezelését biztosítja.