Библиотеки, которые будут использоваться
React + React-router + Firebase.
Все эти библиотеки уже есть в проекте.
Вся документация прилагается.
Для того чтобы приступить к выполнению задания нужно:
- Форкнуть этот репозиторий
- Скачать его (git clone / или скачать zip) и зайти в него
- npm install
- npm start
Теперь собственно задание. Вы будете делать простой и всем уже надоевший Todo List, но в более интересной форме. У нас будет 3 страница: страница Логина, страница Регистрации и страница с нашим todo списком.
Страница с Todo списком доступна только после логина.
В качестве бэкенда и базы данных используем Firebase. Для быстрого и легкого дизайна используем React Bootstrap. Для роутера используем абы какую 4-ую, но все же самую новую версию роутера React router 4.
Порядок выполнения задания:
- Создаем наши 3 страницы просто с текстом и настраиваем роутер чтобы при нужном url показывалась нужная страница. Роуты храним лучше всего в index.js, но можно и в App.js. Если что-то непонятно, смотрим документацию, там есть примеры.
- На основной странице с списком создаем как минимум 2 компонента + поле для ввода и кнопка. а) Компонент списка Todo, отрисосывает все Todo б) Компонент который отрисовывает 1 Todo в) Поле для ввода - обычный контролируем инпут для текста + кнопка сохранить. Тут можно прочитать, что такое Controlled input г) При клике на кнопку, данные из инпута добавляются в state и инпут очищается. д) Соответственно происходит перерисовка данных и должен появиться новый пункт в списке.
- Далее создаем новое приложение на Firebase тут
- После создания копируем настройки приложения, которые показаны после регистрации на Firebase, и вставляем их в index.js на свое место и раскоменчиваем эти строки кода.
apiKey: '*************',
authDomain: '*************.firebaseapp.com',
databaseURL: 'https://*************.firebaseio.com',
storageBucket: '*************.appspot.com',
messagingSenderId: '*************'
- Теперь мы можем импортировать Firebase в любом файле и он будет иметь настройки нашего приложения.
- На странице регистрации делаем 2 поля почта + пароль + кнопка зарегистрироваться. Документация по регистраниции
- Аналогично на странице Входа. Документация по той же ссылке.
- Бонус задание, добавить Вход через Google.
- Теперь у нас есть юзер. Добавляем проверку на странице TodoList, что если нет юзера, то редирект на станицу логина
- Осталось совсем ничего. При нажатии на кнопку добавить / сохранить Todo нужно сохранять в базу данных (на самом деле это очень просто) и также очищать инпут. Про сохранение читает здесь
- Классно, вы можете зайти в Консоль проекта на Firebase -> Свой проект -> Database и убедится, что данные сохраняются.
- Осталось совсем ничего, нужно запрашивать данные именно для нашего юзера из базы данных. Реализация может варьироваться от того, как вы сохраняете данные, в любом случае здесь есть все примеры.
- И да, мы забыли самое главное, нужно добавить возможность зачеркивать / удалять Todo при выполнении! Интереснее, конечно, сделать зачеркивание, а не просто удаление, т.к. тогда можно будет добавить фильтрацию Выполненные / Невыполненные / Все Todo. Это будет задание на 10 баллов.
- Итак, кто хочет попроще, то при клике на Todo просто удаляем из базы банных, кто хочет посложнее, те обновляют статус Todo на выполненный и добавляют 3 вкладки или фильтра Выполненные / Невыполненные / Все Todo.
- Ну и какой же проект без деплоя приложения! Устанавливаем firebase-tools, npm run build и firebase deploy, когда спросят какую папку использовать для загрузки, укажите папку build.
Подробнее описать уже некуда. На выходе у вас получится вполне солидное приложение, которое можно будет с гордостью добавить в портфолио, но что важнее, вы сможете в будущем быстро создавать небольшие приложения используя Firebase.
Всем удачи!