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, який відтворює ці три компоненти як дочірні. Щоб відтворити компонент як дочірній в компоненті React, помістіть назву компонента (написану як власні теги HTML) в JSX. Для прикладу, у методі render ви можете написати:

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

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

--instructions--

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

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

--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>
    );
  }
};