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	Створення функціонального компонента Stateless	6	301392	create-a-stateless-functional-component

--description--

Компоненти є ядром React. Все в React є компонентом, і тут ви дізнаєтеся, як їх створити.

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

Щоб створити компонент з функцією, варто лише написати функцію JavaScript, яка повертає або JSX, або null. Важливо відзначити, що для React важливим є початок назви вашої функції з великої літери. Ось приклад функціонального компонента stateless, який призначає клас 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
}