Привет, в часть 2 мы внесли некоторые изменения в структуру проекта и добавили избыточные компоненты. Теперь создадим новые компоненты, но перед этим вспомним интерфейс приложения:
Как видите, нам нужно построить немного графики, и для этого мы перейдем к другому компоненту: реактивным спарклайнам.
$ npm i react-sparklines
Теперь мы можем построить компонент диаграммы. Добавьте новый файл с именем chart.js в папку компонентов.
В этом компоненте мы используем другой, lodash, так что давайте установим его:
$ npm i lodash
Другим важным компонентом является компонент карты. Давайте добавим новый файл в папки компонентов с именем: google_maps.js
Если вы хотите отключить ESLint, просто добавьте /*global google*/ поверх этого файла.
Требуется еще один шаг: добавьте скрипт API карт Google. https://maps.googleapis.com/maps/api/js
Прежде чем создавать компонент, который будет все объединять, давайте создадим redux часть нашего приложения.
Сначала создайте новый файл index.js в папке действий:
Как вы можете видеть выше, нам нужно установить еще один компонент под названием axios, так что давайте сделаем это:
$ npm i axios
Важное примечание: прежде чем продолжить, создайте бесплатную учетную запись в службе Open Weather Map.
Хорошо, внутри папки редукторов создадим два файла: index.js и reduce_weather.js.
Следующее, что нам нужно сделать, это изменить index.js в корневой папке, чтобы вызывать редукторы.
В следующей части этой серии я покажу, как объединить эти созданные компоненты.
Часть 4: https://medium.com/@leonardobrunolima/react-series-weather-app-part-4-abb0bed0af43
Спасибо!
Я обновлю репозиторий github для этого проекта, как только выпущу каждую часть этой серии. Вы можете подписаться или клонировать здесь:
