React Concetti di base- Components, Props, State

1. Components

Components in React sono blocchi di costruzione indipendenti che possono essere riutilizzati. Sono divisi in elementi dell'interfaccia utente più piccoli e possono essere combinati per formare file UI più grandi components. Ad esempio, un'applicazione può avere components come Header, Sidebar e Content. Ogni componente ha le proprie responsabilità e può ricevere props e state visualizzare i dati corrispondenti.

Esempio:

// 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 sono valori trasmessi components dall'esterno. Aiutano a passare i dati da genitore components a figlio components. Props sono di sola lettura e non possono essere modificati all'interno del componente. Per utilizzare props, passiamo i valori agli attributi del componente e li usiamo nella parte dell'interfaccia utente.

Esempio:

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

3. State

State in React sono dati mutabili che possono essere modificati all'interno di un componente. Ogni componente può avere il proprio state per archiviare e gestire i dati dinamici. Quando le state modifiche, React aggiorna automaticamente l'interfaccia utente corrispondente. State è gestito solo in classe components ed è inizializzato nel costruttore del componente. Per aggiornare state, usiamo il State metodo `set()`.

Esempio:

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