React Kunċetti Bażiċi- Components, Props, State

1. Components

Components in React huma blokki tal-bini indipendenti li jistgħu jerġgħu jintużaw. Dawn huma maqsuma f'elementi iżgħar UI u jistgħu jingħaqdu biex jiffurmaw akbar components. Pereżempju, applikazzjoni jista' jkollha components bħal Header, Sidebar u Content. Kull komponent għandu r-responsabbiltajiet tiegħu stess u jista 'jirċievi props u state juri d-dejta korrispondenti.

Eżempju:

// 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 huma valuri mgħoddija components minn barra. Jgħinu biex jgħaddu data minn ġenitur components għal wild components. Props huma jinqraw biss u ma jistgħux jinbidlu ġewwa l-komponent. Biex tuża props, aħna ngħaddu valuri lill-attributi tal-komponent u nużawhom fil-parti UI.

Eżempju:

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

3. State

State in React hija data mutevoli li tista' tinbidel fi ħdan komponent. Kull komponent jista 'jkollu tiegħu state biex jaħżen u jamministra data dinamika. Meta l state -bidliet, React awtomatikament taġġorna l-interface tal-utent korrispondenti. State huwa ġestit biss fil-klassi components u huwa inizjalizzat fil-kostruttur tal-komponent. Biex taġġorna l- state, nużaw il State -metodu "sett()".

Eżempju:

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