Summary

Ushbu postda Reactjs ni asosiy qurilish bloklari bo’lgan component lar haqida batafsil bilib olamiz.

Category

React component

React.js

React interview

Cover

Slug

what-is-react-component

Date

‣

author

Published

Published

React Komponentlarining Asosiy Elementlari

1. Component Definition (Komponentni Ta'riflash):
• Functional Component: Funktsiya sifatida ta'riflanadi va function yoki arrow function orqali yaratiladi. Masalan:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• Class Component: Sinf sifatida ta'riflanadi va class kalit so'zidan foydalanadi. Masalan:

		class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

1. Props (Propertylar):
• Komponentlarga tashqaridan ma'lumot uzatish uchun ishlatiladi. Props yordamida komponentlarga dinamik qiymatlar berilishi mumkin.
• Misol:

<Welcome name="Sara" />

1. State (Holat):
• Komponentning ichki holatini saqlash uchun ishlatiladi. State orqali komponent ichida o'zgarishlar kiritilishi mumkin.
• Misol:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

1. Lifecycle Methods (Hayotiy Tsikl Metodlari):
• Komponentning hayotiy tsikllariga bog'liq metodlar bo'lib, ular komponent yaratish, yangilash va o'chirish jarayonlarida ishlatiladi. Class komponentlarda mavjud, masalan: componentDidMount, componentDidUpdate, componentWillUnmount.

2. Rendering:
• Komponentni ekranga qanday chiqarishni belgilaydi. Komponentni render metodi orqali yoki funktsional komponentlarda return orqali amalga oshiriladi.
• Misol:

function MyComponent() {
  return <div>Content here</div>;
}

• React komponentlari uchun HTMLga o'xshash sintaksis bo'lib, u JavaScript ichida HTMLni yozish imkonini beradi.

• Misol:

const element = <h1>Hello, world!</h1>;

1. Event Handling (Voqealarni Boshqarish):
• Komponentlar foydalanuvchi harakatlariga (masalan, tugmani bosish) javob beradi. Event handlerlar onClick, onChange kabi atributlar orqali qo'shiladi.
• Misol:

function handleClick() {
  alert('Button clicked!');
}

function Button() {
  return <button onClick={handleClick}>Click Me</button>;
}

Xulosa