Πες μου για τα συστατικά στο React.

Στο React, τα συστατικά είναι ανεξάρτητα, επαναχρησιμοποιήσιμα στοιχεία του περιβάλλοντος χρήστη που μπορούν να αποδεχθούν εισαγωγικά δεδομένα (props) και να διαχειρίζονται την δική τους κατάσταση.

Υπάρχουν δύο βασικοί τύποι συστατικών:

1. Λειτουργικά συστατικά: Απλές JavaScript συναρτήσεις που επιστρέφουν JSX.

   // Παράδειγμα λειτουργικού συστατικού
   function Welcome(props) {
     return <h1>Γειά σου, {props.name}!</h1>;
   }
   

2. Κλάσεις συστατικών: JavaScript κλάσεις που επεκτείνουν το React.Component και έχουν μια μέθοδο render(), που επιστρέφει JSX. Μπορούν να έχουν τοπική κατάσταση (state) και μεθόδους κύκλου ζωής.

   // Παράδειγμα κλάσης συστατικού
   class Counter extends React.Component {
     constructor(props) {
       super(props);
       this.state = { count: 0 };
     }
   
     render() {
       return (
         <div>
           <p>Μετρητής: {this.state.count}</p>
           <button onClick={() => this.setState({ count: this.state.count + 1 })}>
             Αύξηση
           </button>
         </div>
       );
     }
   }
   

Τα συστατικά μπορούν να εμφωλευθούν το ένα μέσα στο άλλο για τη δημιουργία πιο πολύπλοκων διεπαφών. Τα δεδομένα μεταβιβάζονται από τον γονικό σε τον παιδικό μέσω props.

Η χρήση συστατικών διασφαλίζει τη modularity, την επανάχρηση κώδικα και απλοποιεί τη διαχείριση της κατάστασης της εφαρμογής.