/ Видеокурсы / Курс по React JS для начинающих / Урок #7 - State (Состояние)

Урок #7 - State (Состояние)

Урок #7 - State (Состояние)


JavaScriptReact JS

В этом уроке мы изучим состояния в React JS (State). Состояния очень схожи со свойствами, но у них есть одно гигантское отличие. Состояния, в отличии от свойств, мы можем изменять в ходе работы на сайте, свойства такого делать не могут.

Видео урок:

Недавно вышло обновление, поэтому теперь необходимо создавать класс и его элементы по-новому. Вот как было раньше:
var Check = React.createClass ({
  getInitialState: function () {
    return {checked: true}
  },
  handleCheck: function () {
    this.setState ({checked: !this.state.checked})
  },
  render: function () {
    var message;
    if (this.state.checked) {
      message = 'выбран';
    } else {
      message = 'не выбран';
    }
    return (
      <div>
        <input type="checkbox" onChange={this.handleCheck} defaultChecked={this.state.checked} />
        <p>Чекбокс {message}</p>
      </div>
    );
  }
});
Теперь же надо прописывать следующим образом:
class Check extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: true,
    };
  };
  handleCheck = () => {
    this.setState({checked: !this.state.checked});
  };
  render() {
    var message;
    if (this.state.checked) {
      message = 'выбран';
    } else {
      message = 'не выбран';
    }
    return (
      <div>
        <input type="checkbox" onChange={this.handleCheck} defaultChecked={this.state.checked} />
        <p>Чекбокс {message}</p>
      </div>
    );
  }
}
В новом ES6 необходимо создавать конструктор вместо getInitialState и передавать в него значение по умолчанию (props). Также изменилась запись функций. Теперь их необходимо записывать следующим образом: handleCheck = () => {}.

Код из видео урока

Код из видео урока
Чтобы просмотреть этот код необходимо оформить подписку на сайт

Домашнее задание к видео уроку

Необходимо подписаться на проект, чтобы получить доступ к этому практическому домашнему заданию!Необходимо подписаться на проект, чтобы получить доступ к этому практическому домашнему заданию!

Большое задание на весь курс

Это задание позволяет закрепить ваши знания по какому-либо видеокурсу. Оно является большим и справившись с ним вы полностью освоите данный видеокурс. К заданию также есть "Готовое решение", а также описывается методика решения задания.
PS: подобные задания доступны только при подписке от 1 месяца!

JavaScriptReact JS

Рекомендуемые курсы