В данной заметке отражены плюсы и минусы работ начинающих react-разработчиков. Вы можете подсмотреть как с одной и той же задачей можно справиться используя различные подходы.
Разбор данной задачи в решениях на TypeScript будет позже, следите за новостями в telegram канале
Логику проверки имени пользователя/пароля нужно вынести из компонента (в action creator).
index в качестве ключа — опасно. Так как у нас учебный пример, можно было добавить новости id и использовать его.
Жестко вбитые данные на странице профиля.
В редьюсерах нет информации о том, загружаются ли данные в данный момент. Как и нет action creators в целом. Нужно было сэмулировать работу через цикл: случился экшен, приехали даные, отрисовался компонент.
Использован подход с рендером через функцию, можно сделать PrivateRoute компонент, в итоге может оказаться удобнее и меньше символов.
Для шаблона использован подход с отрисовкой children
Есть UI компоненты.
Отрисовка полей формы через универсальную функцию
Нет разделения на контейнеры и компоненты.
Использованы хуки, например в LoginPage
Использован сервис «тестовых новостей» — jsonplaceholder
Повторюсь, про незаблокированную кнопку для Login формы, если данных нет (т.е. форма не валидная)
Есть pages/News (считай контейнер), но connect почему-то происходит в компоненте
Слишком нагло
Использован Fragment, можно просто <>
Универсальная отрисовка роутов (скорее плюс, чем нейтрально).
Автофикс линтером вынесен в отдельный скрипт
Используется precommit
Использование html5 тэгов, например, main
Логика получения информации об авторизации вынесена из компонента. Используются cookies. Логика проверки имени пользователя/пароля так же вынесена.
В редьюсере присутствуют нужные поля (можно четко определить статус загрузки, ошибку, данные)
Axios настроен в API
warning в консоли
Sign in кнопка на форме не работает
Не хватает информации в редьюсере/экшенах для асинхронной загрузки новостей.
Логику запроса новостей следует вынести из компонента
Если свойство обязательно, не забываем проставлять isRequired
Yarn!
Раз уж решились взяться за JSDoc формат комментариев, то хотелось бы видеть в них больше информации.
Используются styled-components (скорее плюс)
Используется formik
Чтобы избавиться от длинных ./../../../ в импортах, можно использовать alias.
Зачем delete/get/set cookie разнесены в 3 директории?
Придираюсь, так как автор заморочился — в withLogin значения для регулярок, можно было бы вынести в константы, например VALID_USERNAME и VALID_PASSWORD, чтобы это выглядело более читаемо для других разработчиков.
В случае с проблемой загрузки новостей, вбрасывается ошибка (это плюс!), но она нигде не обрабатывается? Это же касается компонента новостей, если произошла ошибка, можно было бы показать кнопку: «запросить снова». Компонент новостей (и редьюсер) не готовы, чтобы отобразить ошибку.
Хорошая работа, почему без propTypes? Про тесты не спрашиваю
.eslintrc пожирнее
Использован reach-router
Для структуры проекта используется Atomic Design
Используется стороннее API для запроса новостей
Работа заслуживает внимания.
Все файлы в одной куче, нет деления на умные/тупые компоненты.
Нет возможности асинхронной загрузки новостей
Почему hashRouter?
Использование material-ui
Организовать структуру файлов/директорий. Добавить propTypes, добавить загрузку новостей в асихнронном варианте.
На удивление многие используют jsonplaceholder
У страницы новостей нет прелоадера
Не вынесен отдельный компонент NewsItem (для отрисовки одной новости).
Проверка логина/пароля (checkCredentials) вынесена
Используется semantic-ui
Варнинги в консоли.
Дизайн жестковат.
Подписка в компоненте новостей на весь state целиком
Название переменной, а где initialState2?
Не самые удачные названия экшенов, например TAKE_DATA ? Мы хотим получить данные, ок, но какие? Куда?
Мертвый код? Ниже нигде не используется this.textInput
Используется доступ к переменным через this.state, хотя выше они вынесены в const (невнимательность!)
Используется redux-saga
Текст сообщения в коммите
Единорог
Но используются функциональные компоненты (плюс)
Присутствуют хэлперы (проверка имени пользователя, работа с LocalStorage)
Используется react-bootstrap
Так как у многих этого сделано не было, хочу отметить здесь классический редьюсер с состоянием загрузки/ошибки/пришедших данных. Сюда же — классический асинхронный запрос за данными в action creator’e
Используется setState hook (плюс), но здесь стоит думать о том, что данные про юзера (правильный/неправильный логин пароль) придут к нам с сервера. Поэтому такая проверка здесь не прокатит.
Используется useEffect хук для запроса новостей.
Новости предполагалось прокинуть через redux, но тут речь про мертвую переменную в state (isLoading)
При первой загрузке приложения, в шапке сразу же кнопка «Выйти» (хотя никто еще не заходил) и следовательно — страница профиля доступна без ввода данных.
Плохое именование переменных в LocalStorage
Const и Var в перемешку.
Для 3х и более if используем switch case!
Забытые console.log
По сути, вся работа выполнена в одном коммите. Лучше, чтобы было несколько последовательных коммитов, так работодатель может проверить ваш навык работы с гитом.
Где «прогон через eslint» / разбивка на строки?
Нет загрузки новостей.
По названиям экшенов не очень понятно, что будет происходить.
Логику лучше отделять от компонентов, в нашем случае не только проверка пользователя, но и установка LS (лучше делать в едином месте, например в экшене)
PropTypes на месте, используется styled-components.
Пхп разработчик, перидоически пытаюсь ворватся в реакт-фронтенд, но что-то тяжко.
Не указаны все зависимости (в частности, react-router-dom)
Предупреждения в консоли
В App.js больше 1го компонента, которые можно вынести.
Длинные строки (eslint?)
PropTypes доделать!
Забытые console.log
Внимательность, по redux — перечитать учебник и документацию.
Демо на codesandbox
Классический пример контейнера новостей в котором не хватает прелоадера (минус), при том, что информация в редьюсере есть!
Нет необходимости в pages и containers. По сути, pages может быть контейнером.
Аккуратная работа, все нормально, но где, черт подери, propTypes?
Нет вопросов к реализации стора (редьюсеры ОК, экшены ОК). В константах все в порядке, но можно бы добавить namespace через слэш, например вместо LOGIN_REQUEST, login/REQUEST (это вкусовщина).
Проверка пользователя и логаут вынесены отдельно
Сегодня будем использовать parcel и IntelliJ IDEA Community Edition. Все инструменты бесплатные. Инициализация elm проекта…
На данном вебинаре мы знакомились с языком Elm проводя параллели между Elm и Redux, поэтому…
Richard Feldman рассказывает как масштабировать Elm приложение без боли. Показаны техники: extended records, подход narrow…
В данной заметке вы найдете конспект видео по Elm, которые я посмотрел в ноябре 2019.…
Итоги года 2019 // Max Frontend Покажи мне свой гитхаб, и я скажу работал ли…
Почему стоит изучать Elm? Потому что это интересный вызов, редкие (но вкусные) вакансии и хороший…