React series — Weather App — Part 3

Photo by Fabian Grohs on Unsplash

Hi, in part 2 we did some changes on project structure and added redux components. Now let’s create new components, but before this, let’s remember the interface of the application:

As you can see, we have to build some graphics, and to do this we are going to another component: react-sparklines.

$ npm i react-sparklines

Now we can build the chart component. Add new file called chart.js into components folder.

In this component we are using another one, lodash, so let’s install it:

$ npm i lodash

Other important component is the map component. Let’s add new file into components folders called: google_maps.js

If you want disable ESLint, just add /*global google*/ on top of this file

One more step is required: add the google maps api script. https://maps.googleapis.com/maps/api/js

Before create the component that will combine everything, let’s create the redux part of our application.

First create a new file index.js into actions folder:

As you can see above, we need to install another component called axios, so let’s do it:

$ npm i axios

Important note: before continue, please create a free account on Open Weather Map service.

Сurrent weather and forecast - OpenWeatherMap

Ok, inside reducers folder, let’s create two files: index.js and reduce_weather.js.

reduce_weather.js

index.js

The next thing we have to do is change the index.js on root folder to call the reducers.

In the next part of this serie I will show how to combine these created components.

Part 4: https://medium.com/@leonardobrunolima/react-series-weather-app-part-4-abb0bed0af43

Thanks!

I’ll update the github repo for this project as soon as I release each part of this serie. You can follow or clone here:

lblima/react-weather-app