ReactDərs 2 / 15

Komponent yaratmaq

Kiçik hissələrdən interfeys qur

Komponent JSX qaytaran funksiyadır. Böyük səhifəni başlıq, forma, kart və siyahı kimi hissələrə böl; hər hissənin aydın işi olsun. Komponent adını böyük hərflə başlat ki, React onu HTML teqi ilə qarışdırmasın.

// ProductCard.jsx
import './ProductCard.css';
export default function ProductCard() {
  return <article className="product-card">
    <h2>Çanta</h2><p>25 AZN</p>
  </article>;
}
// App.jsx
// import ProductCard from './ProductCard.jsx';
// export default function App() {
//   return <main><ProductCard /><ProductCard /><ProductCard /></main>;
// }

Nümunə

/* ProductCard.css */
.product-card { padding: 16px; border: 1px solid currentColor; }

Nümunə

Sinif kodunu da tanı

Əvvəlki layihələrdə class ProductCard extends Component və onun render() metodu ilə rastlaşa bilərsən. Funksiya komponenti eyni görünüşü daha qısa təsvir edə bilir. Sinif komponentləri dəstəklənir, yeni təlim nümunələrini funksiyalarla yaz.

Default export import zamanı seçilən ada bağlanır; named export isə fiqurlu mötərizə ilə götürülür. Import yolunun registri və uzantısı build mühitinə uyğun olmalıdır. Qlobal CSS sinifləri bir-birinə təsir edə bilər; adları komponentin mənasına uyğun seç və öz daxilində lazımsız eyni üslubu təkrarlama.

Mövcud sinif komponentini oxumaq

import { Component } from 'react';
export default class ProductCard extends Component {
  render() {
    return <article className="product-card"><h2>{this.props.title}</h2></article>;
  }
}

Nümunə

Bu ayrıca alternativ nümunədir. render görünüşü qaytarır; yan təsirləri render daxilində etmə. PureComponent səthi props/state müqayisəsi ilə bəzi renderləri atlaya bilər, amma düzgünlük mutasiyaya əsaslanmamalıdır. Əvvəl sadə komponenti düzgün qur, performans ehtiyacını ölçəndən sonra optimallaşdır.

Əlavə qeydlər və mənbələr

İnterfeysi məzmun, üslub və davranışı olan kiçik hissələrə böl. Komponenti böyük hərflə adlandır, ayrıca fayldan export/import et və eyni komponenti səhifədə bir neçə dəfə istifadə et.

Niyə vacibdir?

Komponentlər və state mürəkkəb interfeysin hissələrini idarə etməyə kömək edir.

Əvvəlki biliklər

Bu mövzuda

Funksiya və sinif komponentləri
Komponentlərə bölmək və CSS
export və import

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Ortaq komponentin üslubunu dəyiş

Bir qayda ilə üç kartın düzülüşünə təsir et.

Kartlar arasındakı məsafə 8

Hədəf: Məsafəni 16px et.

.container { gap: 8px; }

Özün sına

ProductCard komponenti yarat və üç dəfə istifadə et. Üslublarını ayrıca faylda saxla; sinif nümunəsinin funksiya qarşılığını da yaz.

Nəticəni necə yoxlayım?

ProductCard ayrı komponentdir, import/export işləyir və üç kart ortaq CSS-dən istifadə edir.

Gözlənilən nəticə

Üç eyni kart görünür və hər biri ayrıca komponent nümunəsidir.
CSS ayrıca fayldan qoşulur; sinif və funksiya eyni görünüş qaytarır.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Eyni funksiya üç element yaradır. Sinif nümunəsinin render gövdəsi funksiya qaytarmasına çevrilir.

App.jsx

import { Component } from 'react';
import './styles.css';
export class ProductCardClass extends Component {
  render() { return <article className="product">Kitab — 12 AZN</article>; }
}
function ProductCard() { return <article className="product">Kitab — 12 AZN</article>; }
export default function App() { return <main><ProductCard /><ProductCard /><ProductCard /></main>; }

styles.css

.product{padding:16px;margin:12px 0;background:#dce9f7}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.