Небольшой сервис с едой. Реализован поиск по категориям и переключением между страницами с использованием (SPA).
npx create-react-app . (установит в текущую папку)
название, описание в html и manifest
иконки вставляем через парный тег сюда подбираем нужное слово на сайте
npm i react-router-dom@5.2.0
- React Router помогает нам направлять пользователей к нужному компоненту. мы можем использовать маршрутизацию на стороне клиента для создания одностраничного приложения (SPA), которое позволяет перемещаться между различными страницами без обновления браузера.
- подключили несколько страниц плюс NotFound
чтобы приложение не перезагружалось при смене страниц, используем компонент Link и его атрибут to (пувть) вместо тега а
- useHistory Первый хук useHistory позволяет нам получить доступ к объекту history. Затем мы можем вызывать такие методы объекта history, как goBack или push. Метод goBack позволяет перенаправить пользователя к предыдущему маршруту в стеке истории. Например, если пользователь перейдет со страницы Home на страницу Shop, а затем нажмет кнопку для возврата назад (“Go Back”), он снова будет перенаправлен на страницу Home.
- useParams возвращает объект пары key/value (ключ/значение) параметров URL. Используйте его для доступа к match.params текущего . Это гораздо более чистый способ доступа к параметрам URL.
- useLocation Хук useLocation возвращает объект location, представляющий текущий URL. Его можно рассматривать как useState, который возвращает новое местоположение при каждом изменении URL. Этот хук можно использовать, например, чтобы вызвать событие просмотра новой страницы для инструмента веб-аналитики.
- Хук useRouteMatch пытается сопоставить текущий URL таким же образом, как и . В основном он полезен для получения доступа к данным соответствия без фактического рендеринга
- компонент Роут можно сделать парным и вложить в него дочерний компонет, через который можно передавать пропсы:
https://www.themealdb.com/api.php
- добавлеем поле в корневой объект файла package.json "homepage": "https://maximmorenko.github.io/spa-food-project";
- добавлеем поле 'script' корневого объекта в файле package.json "predeploy": "npm run build", "deploy": "gh-pages -d build"
- Для того чтобы роутинг работал мы должны у компонента Router добавить атрибут baseName='' и указать ему значение (путь нашей главной страницы) /spa-food-project
- переносим ключ с енв локал на гитхаб в секреты (настройки проекта => новый секрет)
- устанавливаем npm install gh-pages -D (-D это то же самое что и --save-dev)
- сохраняем изменения git add -A
- запускаем диплой npm run deploy