Увядзенне ў кампаненты 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.