# Неделя #1 Настройка окружения, первые приложения

# Подготовка к выполнению задания

  • Изучить все материалы первой недели курса в Личном кабинете.
  • Представиться в slaсk-чате своим одногруппникам.
  • Познакомиться с наставником.
  • Установить node.js и VSCode.

# Инструкция по работе с домашними заданиями

Для каждого домашнего задания вы будете создавать новый репозиторий на Github. Если вы там не зарегистрированы - сделайте это сейчас.

Инструменты:

Loftschool-react-cli - нужен для получения домашних заданий.

Hub - с его помощью мы будем создавать репозиторий и отправлять пулл реквест на проверку. Это официальный инструмент от создателей Github.

Установите loftschool-react-cli глобально:

  • npm i -g loftschool-react-cli

  • Установите Hub и авторизуйтесь в нём - инструкция есть на сайте.

Получение домашнего задания:

В начале каждой недели в главном чате в Slack вам будет выдаваться название актуального домашнего задания. Например, первое домашнее задание называется homework-1.

Чтобы получить домашнее задание используйте loftschool-react-cli. Когда вы её установите вам станет доступна команда react-course

  • react-course -h homework-1

В качестве альтернативы можно сделать то же самое при помощи npx:

  • npx loftschool-react-cli -h homework-1

  • Теперь запустите команду hub create - это создаст новый репозиторий на гитхабе с вашим домашним заданием.

  • Вы можете выполнить команду hub browse, чтобы открыть страницу репозитория в браузере.

Выполнение заданий:

К каждому домашнему заданию прилагается файл с инструкцией.

Если возникуют вопросы по выполнению - вы можете спросить наставника, или написать в канале #questions Но в каждом случае вам нужно добиться чтобы проходили все тесты.

Сдача задания:

После того, как домашнее задание будет выполнено запустите hub pull-request. Это создаст новый пулл реквест, ссылку на который вы сможете отправить наставнику.

# Что нужно сделать?

# Выполнить домашнее задание #1 (Создание простейшего приложения)

  1. Получите домашнее задание №1 (react-course -h homework-1)
  2. Создайте в папке src/components/App компонент App.js.
  3. Просмотрите видео как работать с тестами. Запустите тесты. Заголовки тестов подскажут вам, что необходимо создать div и p с определенными классами и содержимым.
  4. Напишите компонент App так, чтобы все тесты проходили.
  5. Запустить тесты и убедиться, что они прошли
  6. Сделайте коммит и пуш изменений
  7. Создайте пулл реквест и отправьте его на проверку наставнику

# Выполнить домашнее задание #2 (Делаем простой мессенджер)

Нужно собрать упрощеную модель окна мессанджера.

  1. Получите домашнее задание №2 (react-course -h homework-2)
  2. Создайте в файле src/components/Chat/index.js компонент Chat и экспортируйте его.
  3. Создайте в файле src/components/Message/index.js компонент Message и экспортируйте его.
  4. Запустите тесты. По тестам допишите недостяющий функционал.
  5. Запустить тесты и убедиться, что они прошли
  6. Сделайте коммит и пуш изменений
  7. Создайте пулл реквест и отправьте его на проверку наставнику

Некоторые тонкости:

  • Для того, что бы обрабатывать изменения инпута, нужно использовать метод onChange.
  • Для того, что бы обработать нажатие кнопки Enter, нужно использовать метод onKeyPress, а в хендлере делать проверку if (event.key === 'Enter').
  • Значение инпута должно быть равно значению из стейта
    <input value={this.state.messageInput} />

# Выполнить домашнее задание #3 (Валидация формы)

  1. Получите домашнее задание №3 (react-course -h homework-3-form-validation)
  2. Обратите внимание на работу валидаций, они выводят разные сообщения, когда нет данных, и когда данные введены не верно.
  3. Также следует учесть дополнительные классы у инпутов и полей ошибок — .t-input-firstname и .t-error-firstname для имени. Эти классы обязательны, с помощью них cypress находит поля, которые нужно проверять. Посмотрите финальную верстку, и повторите расположение данных классов у всех элементов(инпуты, поля ошибок, кнопка сабмита и картинка выводящаяся после успешной валидации).

# НЕ ОБЯЗАТЕЛЬНО Выполнить домашние задания #3*TV-Maze

Я предлагаю 3 задания со звёздочкой. Это одно и то же приложение но решить задачу нужно разными методами.

Эти упражнения не обязательны к выполнению.

Homework tv maze-1

  1. Получите домашнее задание №3.1 (react-course -h homework-3-tv-maze-show-cdu)
  2. В данном домашнем задании уже есть компонент App, но нужно написать компонент Show, который при получении id конкретного шоу должен выполнить сетевой запрос, получить данные из сети и отразить их в своей верстке.
  3. Данный компонент нужно реализовать используя только 2 поля в state — showId и data, а также используя только 1 метод из жизненного цикла — componentDidUpdate. Успехов!

Homework tv maze-2

  1. Получите домашнее задание №3.2 (react-course -h homework-3-tv-maze-show-gDSFP)
  2. В данном домашнем задании уже есть компонент App, но нужно написать компонент Show, который при получении id конкретного шоу должен выполнить сетевой запрос, получить данные из сети и отразить их в своей верстке.
  3. Данный компонент нужно реализовать используя только 2 поля в state — showId и data, а также используя только 2 метода из жизненного цикла — componentDidUpdate и getDerivedStateFromProps. Успехов!

Homework tv maze-3

  1. Получите домашнее задание №3.3 (react-course -h homework-3-tv-maze-show-key)
  2. В данном домашнем задании уже есть компонент App, но нужно написать компонент Show, который при получении id конкретного шоу должен выполнить сетевой запрос, получить данные из сети и отразить их в своей верстке.
  3. Данный компонент нужно реализовать используя только 2 поля в state — showId и data, а также используя только 1 метода из жизненного цикла — componentDidMount. Обратите внимание, в компоненте App теперь кроме showId компоненту Show также передаётся props key. Это важно.
  4. Запустить тесты и убедиться, что они прошли
  5. Сделайте коммит и пуш изменений
  6. Создайте пулл реквест и отправьте его на проверку наставнику

# Требования к домашнему заданию

Все тесты должны проходить.

Если у домашнего задания есть пример - ваш результат должен иметь тот же функционал.

Выполненное домашнее задание необходимо выслать вашему наставнику в виде таблицы представленной ниже:

Фио Иванов Максим Максимович
Номер домашнего задания ДЗ 1
Ссылка на пулл-реквест http://github.com/satansdeer/homework/pull/42
Примечания Не получилось запустить тесты

Дедлайн: 12.00 первого дня второй недели.

# Как всё успеть?

Данный план является примерным ориентиром. Вы всегда можете работать в удобном для себя темпе.

# 🗓 Понедельник

Просмотр вебинара “Открытие курса” в 20:00.

Реальные фото на аватарку, фамилия и имя в Slack.

Заполняем данные о себе в Личном кабинете.

# 🗓 Вторник

Изучаем материалы модуля "React 1"

Работаем над домашним заданием 1.

В течение дня (до 19:00) вы попадете к своему наставнику в подгруппу. Знакомимся с одногруппниками и наставником.

# 🗓 Среда

Сдаём домашнее задание 1 на проверку.

Изучаем материалы модуля "React 2"

Работаем над домашним заданием 2, осваиваемся с исходниками.

# 🗓 Четверг

Работа над ДЗ2

Подготовьте вопросы и запишитесь на консультацию к наставнику.

# 🗓 Пятница

Работа над ДЗ2

Готовим вопросы к практическому вебинару

Сдаём домашнее задание 2 на проверку.

Присутствуем на практическом вебинаре

# 🗓 Суббота

Работа над ДЗ3

Пересматриваем материалы модуля "React 2".

# 🗓 Воскресенье

Работа над ДЗ3

Созваниваемся с наставником

Сдаём домашнее задание 3 на проверку.

Неделя #2 Продолжаем изучать React →