- Зарегистрироваться на гитхабе (если нет аккаунта) и создать публичный репозиторий для домашнего проекта - https://github.com/
- В качестве ide советую использовать vs code - https://code.visualstudio.com/. Если уже есть ide (например, webstorm), можете продолжать использовать
- поставить node.js - https://nodejs.org/en
- Крэш курс по гиту - https://www.youtube.com/playlist?list=PLDyvV36pndZEgSRzWGuXFrTRUFuAAMciE
- поставить node.js - https://nodejs.org/en
- поставить расширение prettier https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode и форматировать свой код. В vs code можно настроить прогон на сохранения файла
- создать ветку для ДЗ - hw-2
- создать проект с помощью vite - https://vitejs.dev/guide/#scaffolding-your-first-vite-project (можете использовать любой пакетный менеджер)
- почистить проект и установить зависимости
- скопировать к себе моковые данные из этого проекта (materials/mock.js)
- Отобразить все рестораны из моковых данных (импортируем константу в main.jsx и используем данные). Отображаем рестораны друг за другом.
- Название ресторана
- Заголовок - Меню (h3)
- Список названий блюд (используем тег ul и li)
- Заголовок - Отзывы (h3)
- Список текстов отзывов (используем тег ul и li)
- сделать коммит и запушить
- открыть ПР из ветки с ДЗ в основную ветку
- отправить ссылку на ПР в ветку ДЗ-2
-
установить расширение eslint - https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
-
установить расширение prettier - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode и форматировать код с помощью него
-
установить react расширение для браузера - https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
-
разбить приложение на компоненты
-
необходимо в блюдо добавить счетчик. Минимальное значение 0, максимальное 5, по умолчанию 0. Кнопки +-
-
добавить условный рендеринг, где могут отсутствовать данные
-
реализовать компонент лейаута с хедером, футером и обернуть приложение
Реализовать табы - кнопки с названием ресторана, по одной на каждый ресторан
- Кнопки отображаем между хедером и рестораном
- Единовременно отображаем только 1 ресторан
- По умолчанию - отображаем первый
- По клику на кнопку отображаем соответствующий ей ресторан. При повторном клике на активную кнопку ничего не происходит.
- сделать форму отзыва ReviewForm: имя, текст, рейтинг (от 1 до 5). Добавить кнопку “clear”, по клику на которую форма сбрасывается в изначальное состояние. Использовать хук useReducer
- форма рисуется после всех отзывов о ресторане
- переиспользовать компонент счетчика Counter между блюдом и отзывом. Важно, именно компонент, который отвечает за UI, логика счетчика блюда лежит отдельно. Можно создать DishCounter и в нем реализовать необходимую логику, но использовать для UI компонент Counter