React-HSE

Домашние задания

ДЗ 1 - deadline 23:59 04.02

Сверстать макет, прикрепленный ниже. Header и Menu должны всега присутствовать на экране и не двигаться при прокрутке. Все цвета, отступы и тд выбираете сами, макет примерный. Для сдачи задания нужно отправить письмо на valery.statinov@gmail.com, указав тему письма «React ВШЭ ДЗ_1» без ковычек, приложить к письму два файла: .html и .css (да, для сдачи этого задания не нужен гит).

---

ДЗ 2 - no deadline

Настоить рабочее окружение и попробовать создать Hello world проект. Для пользователей Windows - https://www.liquidweb.com/kb/install-react-js-windows/

Для пользователей Linux

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs

После этого у вас будет установлен NodeJS, npm и npx. Для создания проекта:

npx create-react-app name-of-your-app

После этого появится директория name-of-your-app, в которой содержится настроенный Hello world проект. Для запуска:

cd name-of-your-app
npm run start

Далее нужно запушить новосозданный проект в репозиторий (GitHub, GitLab, Bitbucket, whatever). Для тех, кто не знаком с git.

Желательно сделать это до следующего занятия (12.02), так как на этом семинаре будут практические задания. По всем вопросам пишите в чат или мне в telegram.

---

ДЗ 3 - deadline 23:59 18.02. Начало разработки Task treaker'a.

Для сдачи задания нужно создать pull request/merge request на github/gitlab/bitbucket (там, где лежит проект, созданный в дз2). Пошаговая инструкция для GitHub.

Создать react приложение и реализовать следующую функциональность:

1. Отображение списка задач, каждая из которых имеет имя, описание, приоритет. Предполагайте, что список задач - это массив объектов такого формата:

   {
     id: 123,
     name: 'Task name',
     description: 'Task description',
     priority: 321
   }
   

2. Возможность добавить задачу, введя имя, описание и приоритет.
3. Кнопка для сортировки задач по имени.
4. Кнопка для сортировки задач по приоритету.

У массивов в js есть метод sort, см документацию.

ДЗ 4 - deadline 23:59 06.03. Стилизация проекта

Стилизовать проект по своему вкусу. Что будет оцениваться?

• Использование flexbox для верстки
• Модульность стилей, использование scss
• Работа с библиотекой classnames (см примеры использования)

При выполнении этого задания нельзя пользоваться библиотеками компонентов, такими как bootstrap, ant-design и прочими.

Сдавать задание так же, через Pull request.

ДЗ 5 - deadline 23:59 21.03. Redux

Подключить Redux к проекту. Требования:

• Хранение тасок в redux store
• Добавление тасок через redux actions
• Сортировка тасок так же через redux actions

Помощь в подключении redux.

ДЗ 6 - deadline 23:59 07.04. React-router

Помимо task в проекте должна появиться новая сущность - project, которая является агрегатором заданий. То есть теперь каждая task'a должна относиться к какому-либо проекту. Предполагайте, что проекты имеют такую структуту:

{
  id: number,
  name: string
}

Требования:

• две страницы - одна для проектов, вторая для заданий, относящихся к выбранному проекту; пути url можно выбрать любые
• на странице проектов необходимо отображать существующие проекты + иметь возможность создания нового проекта
• при клике на конкретный проект на странице проектов переходить на страницу заданий этого проекта
• на странице заданий необходимо отображать задания, относящиеся к выбранному проекту + иметь возможность создания нового задания (этот пункт у вас уже реализован, еще и с сортировками)
• но странице заданий иметь возможность вернуться к странице проектов
• хранение проектов и тасок должно быть реализовано через redux

Идея организации redux store:

store = {
  projects: [
    {
      id: 1,
      name: 'First project'
    },
    ...
  ],

  tasks: {
    1: [ // ключом является PROJECT_ID
      {
        id: 1,
        name: 'Task #1',
        description: 'Descr',
        priority: 1
      },
      ...
    ],
    ...
  }
}

Имея store с такой или похожей структурой вам будет удобно выполнять следующее задание, связанное с client-server communication, в котором данные нужно будет получать с сервера.

ДЗ 7 - deadline 23:59 28.04. Client-server communication

Необходимо реализовать получение, создание(обязательно), редактирование (по желанию) проектов и тасок через http запросы на backend. Документация к API сервера - https://github.com/ValeryStatinov/GoTodoList/wiki/TodoList-API.

ДЗ 8 - deadline 23:59 13.05. Login + registration

1. Необходимо создать новую страницу для логина/регистрации с как минимум двумя полями: логин и пароль (можно добавть 3-ее поле подтверждения пароля при регистрации). Интегрировать авторизацию, которая реальзована через jwt, с backend. В документации появилось описание двух новых вызовов. При попытке перехода неавторизованным пользователем на любую страницу с данными должен происходить редирект на страницу логина/регистрации.
2. Для всех компонентов, которые будут создаваться для реализации этого задания, необходимо указывать prop-types.