My second project including ReactJS, Redux, Axios and also ReactStrap
Перед тобой, дорогой заинтересовавшийся этим проектом обозреватель, web-приложение для поиска книг на серверах Google. Этот проект я реализовал примерно за пять дней (делал его с 10.11.21 по 14.11.21). Третьего числа октября этого года я выразил желание присоединиться к команде "Фьюче" как фронтенд-разработчик — и на следующий день мне выслали задание по созданию React-приложения (смотри это задание на Гитхабе: https://github.com/fugr-ru/frontend-javascript-test-2) как проверка на мои способности и навыки. В то время у меня не было большого желания и поэтому времени сесть за него. Но спустя месяц в ноябре я всё-таки решил заняться этой задачей, так как нацелен пойти по стопам frontend'ера.
Приложение нужно создать, используя силы главным образом React'а, а также всех прилегающих к нему вспомогательных библиотек (к примеру, reactstrap:https://openbase.com/js/reactstrap/documentation; axios:https://github.com/klesarev/axios-rus-docs/blob/master/docs/README.md). Обязательно вместе с React'ом по заданию нужно использовать библиотеку Redux либо MobX (читай про различия тут: https://habr.com/ru/post/489854/; и посмотри, если ты заинтересован в Redux обучающие ролики одного классного чувака на youtube: https://www.youtube.com/watch?v=Dzzeir85i3c). Применяя все эти инструменты совместно с ReactJS, особенно Redux или MobX, можно значительно упростить свой код (правда, если ты новичок, тебе придётся со многим познакомиться впервые — но это очень оправданно, друг).
В процессе разработки этого приложения мне очень помогли статьи замечательных и старательных людей:
- https://habr.com/ru/post/498860/ ("Введение в Redux & React-redux" — автор @Elliot_001),
- https://www.cat-in-web.ru/10-ways-to-style-react/#%D0%98%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD_%D1%81%D1%82%D0%B8%D0%BB%D0%B8 (хорошая статья — тут есть инфа про инлайн-стили в React),
- https://askdev.ru/q/vstavka-html-elementov-s-pomoschyu-javascript-24974/3/ (про вставку html-кода в JavaScript'е в нужный тебе элемент — автор вопроса Robinicks и автор ответа Mathias Bynens),
- https://developer.mozilla.org/ru/docs/Web/CSS/display (во многом мне помогал и этот сайт!),
- https://dwweb.ru/page/js/events/001_onclick_v_javascript.html (ребята из проекта DWWEB.RU в своей статье подробно с примерами рассказывают про событие onClick в JS),
- https://developers.google.com/books/docs/v1/using (конечно же, спасибо разработчикам Google-книг за написание небольшой и в то же время подробной и понятной документации про их GOOGLE BOOKS API),
- https://www.youtube.com/watch?v=kL3H-wTWPSQ (огромное спасибо Congar за видео на эту же тему про ReactJS и Google Books API и выложенный репозиторий на Гитхабе с исходниками — https://github.com/Mohammed-Abdelhady/google-books-search!!),
- ru.reactjs.org (благодарю переводчиков документации по Реакту и её авторов!),
- https://www.digitalocean.com/community/tutorials/4-uses-of-javascripts-arraymap-you-should-know-ru (укажу ещё и эту статью автора William Imoh про функцию map в JS).
Говоря немного о моём коде приложения, можно обсудить множество мелких важных закавырок. Хочу рассказать главным образом о принципе перерисовки React-компонентов: чтобы компоненты ещё раз рендерились (то есть перерисовывались) нужно обязательно изменить их состояние методом this.setState() — об этом задавали вопросы на разных сайтах и это же обсуждали в официальной документации: см. https://ru.reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly. То есть изменять состояние компонент напрямую через this.state плохая идея ввиду того, что в этом случае компонента совсем не перерисуется, а ведь повторный рендеринг очень нужен для обновления сведений на сайте при каких-нибудь действиях пользователя. Для этого нужно использовать именно метод this.setState(). Это первое, с чем я столкнулся при реализации приложения на React.
Ещё можно обговорить и Google Books API, особенно момент с использованием в запросе параметров startIndex и maxResults. Если первый параметр совсем не использовать, то json-ответы от сервера будут иметь одни и те же данные! Кроме этого, при поиске каких-нибудь книг в хранилище Google Books разрешено не использовать в запросах параметр key с API KEY — с ним запросы перестанут работать (по крайней мере, у меня ничего с ключом не работало — корректный ответ от Google пришёл, когда я удалил этот параметр из совего запроса)!
Redux как библиотека очень выручает: с ней есть единое хранилище в твоём React-приложении. С ней тебе не нужно работать со всеми компонентами сразу при изменении каких-нибудь данных твоего приложения — достаточно только обратиться к переменной store как образу твоего хранилища и перезаписать или прочитать оттуда нужные тебе данные.
Кроме всего прочего, очень хорош встроенный в React инструмент JSX, интерпретирующий html-код прямо в твоём JS-коде. И вспомогательный инструмент reactstrap для построения форм с кнопками и другими полями для взаимодействия с посетителем сайта.
Хорошего тебе настроения и больше плодотворных часов!!