Всем привет! Создавая веб-приложение для отслеживания моей физической активности, я узнал много вещей, которыми я поделюсь с вами в этом руководстве.

Живая демонстрация:
https://master.d3963aoi020v9l.amplifyapp.com/

Это руководство предназначено для новичков в React, у которых уже есть опыт использования ES6 и create-react-app. Мы будем использовать:

  • 100% React Hooks, Router и Context API
  • Аутентификация Firebase и база данных noSQL
  • Материальные компоненты пользовательского интерфейса

Это руководство разделено на следующие разделы:

  1. Настройка нашего проекта
  2. Аутентификация пользователя с помощью Firebase
  3. Создание настраиваемого компонента календаря
  4. Добавление, обновление и удаление тренировок с базой данных noSQL
  5. Развертывание

1. Настройка проекта

Мы начнем с создания новой папки проекта и установки всех необходимых зависимостей. Я использую Visual Studio Code, с помощью сочетания клавиш CTRL + ~ вы можете переключать командную строку внутри Visual Studio Code. Выполните следующую команду:

npx-create-react-app activity-tracker

Это создаст новую папку с нашим новым приложением React.

Затем удалите все файлы в / src, кроме App.js, App.css, Index.js, Index.css.

Внутри App.js: удалите импорт логотипа, удалите все внутри возврата и добавьте <h1>Hello World!</h1> в ответ.

Внутри Index.js: удалите строку импорта и отмены регистрации сервисного рабочего. Теперь запустите npm run start, чтобы проверить, отображается ли в приложении Hello World!

Материал UI

Для ускорения разработки мы будем использовать готовые компоненты из Material-UI framework, которые вы можете найти здесь: https://material-ui.com/

Выполните следующие команды:

npm install @material-ui/core
npm install @material-ui/icons

Папки

Далее мы создадим наши папки, в которых будут: компоненты, страницы и конфигурация. Откройте командную строку и используйте следующие команды:

cd src
mkdir components pages config

Таким образом, наше приложение запускается в командной строке Visual Code и может запускать команду из командной строки отдельно.

Маршрутизатор

Для навигации внутри нашего приложения мы будем использовать response-router. Мы создаем одностраничное приложение, которое по сути представляет собой одну большую страницу, которую не нужно обновлять, мы просто будем показывать и загружать только те компоненты, которые мы хотим, чтобы пользователь видел.

Установите response-router, выполнив команду:

npm install react-router-dom

Затем внутри App.js мы импортируем response-router и добавим переключатель для перехода между путями. Мы создадим путь для дома «/» и путь для регистрации «/ sign-up»:

Теперь вы должны увидеть «Войти» в своем браузере, и если вы перейдете в / зарегистрироваться, вы должны увидеть «Регистрация». Отлично, наш роутер работает!

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

Проверьте окончательный результат: https://master.d2e0orovu8bxyk.amplifyapp.com/
Исходный код: https://github.com/sanderdebr/workout-tracker

Щелкните здесь, чтобы перейти к части 2: аутентификация
Щелкните здесь, чтобы перейти к части 3: настраиваемый компонент календаря
Щелкните здесь, чтобы перейти к части 4: база данных и развертывание

Если вам понравилась эта история, хлопайте в ладоши!