Всем привет! Создавая веб-приложение для отслеживания моей физической активности, я узнал много вещей, которыми я поделюсь с вами в этом руководстве.
Живая демонстрация:
https://master.d3963aoi020v9l.amplifyapp.com/
Это руководство предназначено для новичков в React, у которых уже есть опыт использования ES6 и create-react-app. Мы будем использовать:
- 100% React Hooks, Router и Context API
- Аутентификация Firebase и база данных noSQL
- Материальные компоненты пользовательского интерфейса
Это руководство разделено на следующие разделы:
- Настройка нашего проекта
- Аутентификация пользователя с помощью Firebase
- Создание настраиваемого компонента календаря
- Добавление, обновление и удаление тренировок с базой данных noSQL
- Развертывание
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: база данных и развертывание
Если вам понравилась эта история, хлопайте в ладоши!