freeCodeCamp/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-component-with-composition.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036164	Створення компоненту за допомогою композиції	6	301383	create-a-component-with-composition

--description--

Тепер ми поглянемо, як ми можемо скласти декілька React разом. Уявіть, що ви створюєте додаток і вже створили три компоненти: Navbar, Dashboard, і Footer.

Щоб скласти їх разом, ви можете створити компонент App parent, який відображає кожен з цих трьох компонентів як children. Щоб відобразити компонент як дочірній у React компоненті, ви включаєте в перелік ім'я компоненту, написане як власний HTML-тег у JSX. Для прикладу, у методі render ви можете написати:

return (
 <App>
  <Navbar />
  <Dashboard />
  <Footer />
 </App>
)

Коли React стикається із власним HTML-тегом, який посилається на інший компонент (ім'я компоненту взято в дужки у < /> як в цьому прикладі), він відображає примітку для цього компоненту у місці розташування тегу. Це повинно відображати батьківські/дочірні зв'язки між компонентом App і Navbar, Dashboard та Footer.

--instructions--

У редакторі коду є простий функціональний компонент, який називається ChildComponent і компонент класу, який називається ParentComponent. Складіть їх обидвох разом, використовуючи відображення ChildComponent всередині ParentComponent. Пересвідчіться, що закрили тег ChildComponent за допомогою навскісної риски перед ним.

Note: ChildComponent визначається за допомогою функції стрілки ES6, тому що це досить поширена практика під час використання React. Проте, знайте, що це - просто функція. Якщо ви не знайомі з синтаксисом функції зі стрілками, будь ласка, зверніться до розділу JavaScript.

--hints--

React компонент повинен повертати одинарний div елемент.

assert(
  (function () {
    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
    return shallowRender.type() === 'div';
  })()
);

Компонент повинен повертати два вкладених елементи.

assert(
  (function () {
    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
    return shallowRender.children().length === 2;
  })()
);

Компонент повинен повертати ChildComponent в якості другого дочірнього елементу.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(ParentComponent));
    return (
      mockedComponent.find('ParentComponent').find('ChildComponent').length ===
      1
    );
  })()
);

--seed--

--after-user-code--

ReactDOM.render(<ParentComponent />, document.getElementById('root'))

--seed-contents--

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* Change code below this line */ }


        { /* Change code above this line */ }
      </div>
    );
  }
};

--solutions--

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* Change code below this line */ }
        <ChildComponent />
        { /* Change code above this line */ }
      </div>
    );
  }
};