Homework 1

Пример приложения

Первое задание нужно для того, чтобы вы разобрались с реактом, детьми, и немного поиграли со стейтом.

Для написания домашнего задания вам нужно склонировать этот репозиторий. Это стандартное create-react-app приложение с небольшими дополнениями для работы тестов. В папке src/__tests__ находятся сами тесты,а в файле src/setupTests.js настройки тестов, также package.json содержит зависимости для работы тестов.

Для запуска тестов нужно выполнить команду в консоли – yarn start. Эта команда запустит тесты. Если вы хотите посомтреть тесты для конкретного файла, нажмите кнопку p, и введите например App.js. Это позволит смотреть детальный вывод по тестам для компоненты App.

Приложение работает со стейтом, как хранить состояние мы проходили на занятии, а вот как работает input:

<input onChange={this.handleChange} value={value} />

Важным моментом является указание value, которое хранит значение этого инпута в стейте. Метод onChange нужен для того чтобы передавать значения при изменении инпута.

handleChange = event => {
  this.setState({value: event.target.value});
};

Задачи:

1. Написать компонент App.
2. Компонент App содержит список детей, которые являются компонентами NewsPost.
3. Компонент App содержит input, который хранит строку из стейта.
4. Компонент App содержит кнопку, при нажатии на которую вы изменяете стейт, переместив в список новостей значение из инпута, и присваивая значению инпута пустую строку.
5. Компонент NewsPost выводит строку, которую он получил через props.