React Βασικές έννοιες- Components, Props, State

1. Components

Components υπάρχουν React ανεξάρτητα δομικά στοιχεία που μπορούν να επαναχρησιμοποιηθούν. Χωρίζονται σε μικρότερα στοιχεία διεπαφής χρήστη και μπορούν να συνδυαστούν για να σχηματίσουν μεγαλύτερα components. Για παράδειγμα, μια εφαρμογή μπορεί να έχει components όπως Header, Sidebar και Content. Κάθε στοιχείο έχει τις δικές του ευθύνες και μπορεί να λαμβάνει props και state να εμφανίζει αντίστοιχα δεδομένα.

Παράδειγμα:

// 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 React είναι τιμές που μεταβιβάζονται components από το εξωτερικό. Βοηθούν στη μετάδοση δεδομένων από γονέα components σε παιδί components. Props είναι μόνο για ανάγνωση και δεν μπορούν να αλλάξουν μέσα στο στοιχείο. Για να χρησιμοποιήσουμε το props, περνάμε τιμές στα χαρακτηριστικά του στοιχείου και τις χρησιμοποιούμε στο τμήμα διεπαφής χρήστη.

Παράδειγμα:

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

3. State

State in React είναι μεταβλητά δεδομένα που μπορούν να αλλάξουν μέσα σε ένα στοιχείο. Κάθε στοιχείο μπορεί να έχει το δικό του state για αποθήκευση και διαχείριση δυναμικών δεδομένων. Όταν state αλλάξουν, React ενημερώνεται αυτόματα η αντίστοιχη διεπαφή χρήστη. State διαχειρίζεται μόνο στην κλάση components και αρχικοποιείται στον κατασκευαστή του στοιχείου. Για να ενημερώσουμε το state, χρησιμοποιούμε τη State μέθοδο «set()».

Παράδειγμα:

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