React-ի բաղադրիչների ներածություն

Նայենք ցանկացած կայքին: Այն բաղկացած է մի շարք անկախ բլոկներից՝ գլխամաս, կողային վահանակներ, ստորագիր, բովանդակություն: Կարելի է ասել, որ այդ բլոկներն են բաղադրիչները այն իմաստով, որը ենթադրվում է React-ում:

Եթե նայենք նույն գլխամասին, ապա դրանում կարող ենք առանձնացնել լոգոտիպով բլոկը, կոնտակտների բլոկը, մենյուով բլոկը և այլն: Այսինքն՝ բաղադրիչները կարող են բաղկացած լինել այլ ենթաբաղադրիչներից:

Նույն կերպ է делоը React-ում - կայքը կառուցված է բաղադրիչների հավաքածուից, որոնք իրենց հերթին կարող են պարունակել այլ բաղադրիչներ:

React-ում յուրաքանչյուր բաղադրիչ ներկայացնում է առանձին մոդուլ: Սովորաբար մշակումը սկսվում է գլխավոր App բաղադրիչից, որն պարունակում է իր մնացած մասերը:

Եկեք պարապենք նոր բաղադրիչներ ստեղծելով:

Օրինակ, ենթադրենք, մեզ անհրաժեշտ է արտադրանքի տվյալներ ցուցադրող բաղադրիչ: Դրա համար մեզ անհրաժեշտ է աշխատանքային պանակում ստեղծել Product.js ֆայլը և ավելացնել դրանում հետևյալ կոդը:

jsximport React from 'react';

function Product() {
  return <p>
    product
  </p>;
}

export default Product;

Ինչպես տեսնում եք, այժմ մեր բաղադրիչը վերադարձնում է տեքստով պարբերություն: Հաջորդ դասերում մենք կզարգացնենք այս կոդն այնպես, որ վերադարձվեն արտադրանքի տվյալները: Բայց առայժմ պարզապես թողնենք պարբերություն որոշակի սկզբնական տեքստով:

Եկեք այժմ ցուցադրենք մեր ստեղծած բաղադրիչը App բաղադրիչում: Ենթադրենք, որ մեր App-ն ունի հետևյալ կոդը:

jsximport React from 'react';

function App() {
  return <div>
    text
  </div>;
}

export default App;

Սկզբում մենք պետք է իմպորտենք մեր ստեղծած արտադրանքի բաղադրիչը:

jsximport React from 'react';
import Product from './Product'; // իմպորտում ենք արտադրանքը

function App() {
  return <div>
    text
  </div>;
}

export default App;

Նման իմպորտից հետո App բաղադրիչի ներսում կարելի է օգտագործել Product բաղադրիչը: