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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036162	Створіть функціональний компонент без стану	6	301392	create-a-stateless-functional-component

--description--

Компоненти є ядром React. Все в React є компонентом, і зараз ви дізнаєтесь, як його створити.

Існує два шляхи створення компонента React. Першим способом є використання функції JavaScript. Визначення компонента таким чином створює функціональний компонент без стану. Поняття стану в застосунку розглянемо в наступних завданнях. Поки що вважайте, що компонент без стану може отримати дані та відтворити їх, але не керує чи відстежує зміни до цих даних. (Ми розглянемо інший спосіб створення компонента React у наступному завданні.)

Щоб створити компонент за допомогою функції, просто напишіть функцію JavaScript, яка повертає JSX або null. Важливо зазначити, що назва функції для React має починатись з великої літери. Ось приклад функціонального компонента без стану, який призначає клас HTML в JSX:

const DemoComponent = function() {
  return (
    <div className='customClass' />
  );
};

<div> матиме CSS-клас customClass після транспіляції.

Оскільки компонент JSX представляє HTML, ви можете об’єднати декілька компонентів, щоб створити складнішу сторінку HTML. Це одна з ключових переваг компонентної архітектури, яку надає React. Це дозволяє складати інтерфейс користувача з багатьох окремих, ізольованих компонентів. Це полегшує створення та обслуговування складних інтерфейсів користувача.

--instructions--

Редактор коду має функцію MyComponent. Завершіть цю функцію, щоб вона повернула єдиний елемент div, який містить деякий рядок тексту.

Примітка: текст вважається дочірнім елементом елемента div, тому ви не зможете використати самозакриваючий тег.

--hints--

MyComponent має повернути JSX.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
    return mockedComponent.length === 1;
  })()
);

MyComponent має повернути елемент div.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
    return mockedComponent.children().type() === 'div';
  })()
);

Елемент div повинен містити рядок тексту.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
    return mockedComponent.find('div').text() !== '';
  })()
);

--seed--

--after-user-code--

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

--seed-contents--

const MyComponent = function() {
  // Change code below this line



  // Change code above this line
}

--solutions--

const MyComponent = function() {
  // Change code below this line
  return (
    <div>
      Demo Solution
    </div>
  );
  // Change code above this line
}