React and Redux Sagas Weather Report App Tutorial

Overview

In this tutorial we’re going to build a weather Report by using React Boilerplate . Few months ago I did a code testing by using angualr1.5 and now I like to do it again by using current popular tools react, redux and sagas.  React Boilerplate is not for beginner level, and I won’t explain any concept of react, redux, and sagas. There already has too many tutorial about it.

React Boilerplate is very mature start setup for  building scalable react app and suit for any complex real life project.

After finish that should look like this:

Screen Shot 2018-01-19 at 4.06.00 pm

Now let start it:

Part 1 – Setting up the base project and template.

  1. Create a folder, named “weather-react-redux-saga-app”
  2. cd weather-react-redux-saga-app
  3. run git clone https://github.com/react-boilerplate/react-boilerplate.git .
  4. npm run setup ( install the package and start the project.)
  5. npm run clean ( get rid of the template that react boilerplate provides)
  6. npm start ( now project setup done)

Part 2 – Create the container and components by  using React Boilerplate  provide component generate command. I will create one container component and two stateless component (WeaterListContainer and WeatherList stateless component and Weather component).

  1. run command ‘npm run generate container

move the arrow select React.component

what should it be called?

Do you want headers?

Do you want an actions/constants/selectors/reducer tuple for this container? y

Do you want sagas for asynchronous flows?y

Do you want i18n messages (i.e. will this component use text)?n

Do you want to load resources asynchronously?n

  2 . run command ‘npm run generate component

move the arrow select Stateless Function then enter

       What should it be called? WeatherList

Do you want i18n messages (i.e. will this component use text)?n

 Do you want to load the component asynchronously? n

  follow step 2 create Weather component.

  3. go to HomePage/index edit it using the WeatherListContainer

Screen Shot 2018-01-22 at 2.02.31 pm

Next post will explain how to working with api: openweathermap to get data by using saga and display it to the page.

to be continue….

 

Advertisements