Въведение в компонентите на 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.