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, ჩვენ გადავცემთ მნიშვნელობებს კომპონენტის ატრიბუტებს და ვიყენებთ მათ UI ნაწილში.

მაგალითი:

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 ვიყენებთ `set State()` მეთოდს.

მაგალითი:

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