Компоненттерди кайра колдонуу (Reusable Components)

Тема: Компоненттерди кайра колдонуу (Reusable Components)

Иштин максаты

React программасында бир компонентти бир нече жолу колдонуу жана props аркылуу маалымат берүү.

Теориялык маалымат

React компоненттеринин негизги артыкчылыгы — кайра колдонулушу. Бир компонентти көп жолу чакырып, ар башка маалымат берүү мүмкүн.

Иштин жүрүшү

  1. Product.jsx компонентин түзүү

function Product(props) {   return (     <div>       <h3>{props.name}</h3>       <p>Баасы: {props.price} сом</p>     </div>   ); } export default Product;

  1. App.jsx ичинде колдонуу

import Product from "./Product"; function App() {   return (     <div>       <h1>Товарлар</h1>       <Product name="Ноутбук" price="50000" />       <Product name="Телефон" price="30000" />       <Product name="Планшет" price="20000" />     </div>   ); } export default App;

Натыйжа

Экранда товарлардын тизмеси чыгат.

Контролдук суроолор

  1. React компоненттери эмне үчүн колдонулат?
  2. Props менен компонентти кантип кайра колдонууга болот?
  3. React тиркемеси эмнеден түзүлөт?