freeCodeCamp/curriculum/challenges/russian/03-front-end-libraries/react/render-state-in-the-user-interface.russian.md

id, title, challengeType, isRequired, forumTopicId, localeTitle

id	title	challengeType	isRequired	forumTopicId	localeTitle
5a24c314108439a4d4036171	Render State in the User Interface	6	false	301409	Состояние визуализации в пользовательском интерфейсе

Description

Как только вы определяете начальное состояние компонента, вы можете отобразить любую его часть в визуализированном пользовательском интерфейсе. Если компонент является состоятельным, он всегда будет иметь доступ к данным в state в методе render() . Вы можете получить доступ к данным с помощью this.state . Если вы хотите получить доступ к значению состояния в return метода рендеринга, вы должны заключить его в фигурные скобки. State - одна из самых мощных особенностей компонентов в React. Он позволяет отслеживать важные данные в вашем приложении и отображать пользовательский интерфейс в ответ на изменения этих данных. Если ваши данные изменятся, ваш пользовательский интерфейс изменится. React использует то, что называется виртуальным DOM, чтобы отслеживать изменения за кулисами. Когда данные состояния обновляются, он запускает повторную визуализацию компонентов с использованием этих данных, включая дочерние компоненты, которые получили данные в качестве опоры. React обновляет фактический DOM, но только там, где это необходимо. Это означает, что вам не нужно беспокоиться об изменении DOM. Вы просто заявляете, как должен выглядеть пользовательский интерфейс. Обратите внимание, что если вы создаете компонент с состоянием, никакие другие компоненты не знают о его state . Его state полностью инкапсулировано или локально для этого компонента, если вы не передадите данные состояния дочернему компоненту в качестве props . Это понятие инкапсулированного state очень важно, поскольку оно позволяет вам писать определенную логику, а затем содержать и изолировать эту логику в одном месте вашего кода.

Instructions

In the code editor, MyComponent is already stateful. Define an h1 tag in the component's render method which renders the value of name from the component's state. Note: The h1 should only render the value from state and nothing else. In JSX, any code you write with curly braces { } will be treated as JavaScript. So to access the value from state just enclose the reference in curly braces.

Tests

tests:
  - text: <code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.
    testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp');
  - text: <code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.
    testString: assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()));
  - text: The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.
    testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' });   return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === ''<div><h1>TestName</h1></div>'');};'

Challenge Seed

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'freeCodeCamp'
    }
  }
  render() {
    return (
      <div>
        { /* change code below this line */ }

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

After Tests

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

Solution

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'freeCodeCamp'
    }
  }
  render() {
    return (
      <div>
        { /* change code below this line */ }
        <h1>{this.state.name}</h1>
        { /* change code above this line */ }
      </div>
    );
  }
};