React Konceptet themelore- Components, Props, State

1. Components

Components në React janë blloqe ndërtimi të pavarura që mund të ripërdoren. Ato ndahen në elementë më të vegjël të ndërfaqes së përdoruesit dhe mund të kombinohen për të formuar më të mëdhenj components. Për shembull, një aplikacion mund të ketë components si Header, Sidebar dhe Content. Çdo komponent ka përgjegjësitë e veta dhe mund të marrë props dhe state të shfaqë të dhënat përkatëse.

Shembull:

// 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 janë vlera të transmetuara components nga jashtë. Ato ndihmojnë për të kaluar të dhënat nga prindi components te fëmija components. Props janë vetëm për lexim dhe nuk mund të ndryshohen brenda komponentit. Për të përdorur props, ne kalojmë vlera në atributet e komponentit dhe i përdorim ato në pjesën e ndërfaqes së përdoruesit.

Shembull:

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

3. State

State in React janë të dhëna të ndryshueshme që mund të ndryshohen brenda një komponenti. Çdo komponent mund të ketë të vetin state për të ruajtur dhe menaxhuar të dhëna dinamike. Kur state ndryshon, React automatikisht përditësohet ndërfaqja përkatëse e përdoruesit. State menaxhohet vetëm në klasë components dhe inicializohet në konstruktorin e komponentit. Për të përditësuar state, ne përdorim State metodën `set()`.

Shembull:

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