React Concepte de bază- Components, Props, State

1. Components

Components în React sunt blocuri de construcție independente care pot fi reutilizate. Ele sunt împărțite în elemente mai mici ale UI și pot fi combinate pentru a forma mai mari components. De exemplu, o aplicație poate avea components ca Header, Sidebar și Content. Fiecare componentă are propriile sale responsabilități și poate primi props și state afișa datele corespunzătoare.

Exemplu:

// 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 în React sunt valorile trecute în components din exterior. Ele ajută la transmiterea datelor de la părinte components la copil components. Props sunt numai pentru citire și nu pot fi modificate în interiorul componentei. Pentru a folosi props, transmitem valori atributelor componentei și le folosim în partea UI.

Exemplu:

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

3. State

State în React sunt date mutabile care pot fi modificate în cadrul unei componente. Fiecare componentă poate avea propriile sale state pentru stocarea și gestionarea datelor dinamice. Când se state modifică, React se actualizează automat interfața de utilizator corespunzătoare. State este gestionat numai în clasă components și este inițializat în constructorul componentei. Pentru a actualiza state, folosim State metoda `set()`.

Exemplu:

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