freeCodeCamp/curriculum/challenges/russian/03-front-end-libraries/react/render-a-class-component-to-the-dom.russian.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036167	Render a Class Component to the DOM	6	false		Отобразить компонент класса в DOM

Description

Вы можете вспомнить использование ReactDOM API в более ранней попытке визуализации элементов JSX в DOM. Процесс рендеринга компонентов React будет выглядеть очень похоже. Последние несколько проблем были сосредоточены на компонентах и ​​составе, поэтому рендеринг был сделан для вас за кулисами. Однако ни один из написанного вами кода React не будет отображаться в DOM без обращения к ReactDOM API. Ниже приведен синтаксис: ReactDOM.render(componentToRender, targetNode) . Первый аргумент - это компонент React, который вы хотите отобразить. Второй аргумент - это узел DOM, который вы хотите отобразить внутри этого компонента. Компоненты React передаются в ReactDOM.render() несколько иначе, чем элементы JSX. Для элементов JSX вы передаете имя элемента, который вы хотите отобразить. Однако для компонентов React вам нужно использовать тот же синтаксис, как если бы вы отображали вложенный компонент, например ReactDOM.render(<ComponentToRender />, targetNode) . Этот синтаксис используется для компонентов класса ES6 и функциональных компонентов.

Instructions

Компоненты « Fruits и Vegetables определены для вас за кулисами. Выделите оба компонента как дочерние TypesOfFood компонента TypesOfFood , а затем визуализируйте TypesOfFood в DOM. Для вас доступен div с id='challenge-node' .

Tests

tests:
  - text: Компонент <code>TypesOfFood</code> должен возвращать один элемент <code>div</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === "div"; })(), "The <code>TypesOfFood</code> component should return a single <code>div</code> element.");'
  - text: Компонент <code>TypesOfFood</code> должен отображать компонент <code>Fruits</code> после элемента <code>h1</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === "Fruits"; })(), "The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.");'
  - text: Компонент <code>TypesOfFood</code> должен отображать компонент « <code>Vegetables</code> после <code>Fruits</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === "Vegetables"; })(), "The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.");'
  - text: Компонент <code>TypesOfFood</code> должен отображать DOM внутри <code>div</code> с идентификационным <code>challenge-node</code> id.
    testString: 'assert((function() { const html = document.getElementById("challenge-node").childNodes[0].innerHTML; return (html === "<h1>Types of Food:</h1><div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div><div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>"); })(), "The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.");'

Challenge Seed

class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        {/* change code below this line */}

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

// change code below this line

Before Test

const Fruits = () => {
  return (
    <div>
      <h2>Fruits:</h2>
      <h4>Non-Citrus:</h4>
        <ul>
          <li>Apples</li>
          <li>Blueberries</li>
          <li>Strawberries</li>
          <li>Bananas</li>
        </ul>
      <h4>Citrus:</h4>
        <ul>
          <li>Lemon</li>
          <li>Lime</li>
          <li>Orange</li>
          <li>Grapefruit</li>
        </ul>
    </div>
  );
};
const Vegetables = () => {
  return (
    <div>
      <h2>Vegetables:</h2>
      <ul>
        <li>Brussel Sprouts</li>
        <li>Broccoli</li>
        <li>Squash</li>
      </ul>
    </div>
  );
};

Solution

// solution required