{"id":1769,"date":"2019-03-04T18:05:58","date_gmt":"2019-03-04T18:05:58","guid":{"rendered":"https:\/\/www.codeastar.com\/?p=1769"},"modified":"2019-06-28T07:37:59","modified_gmt":"2019-06-28T07:37:59","slug":"react-frontend-weather-forecast-2","status":"publish","type":"post","link":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/","title":{"rendered":"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2"},"content":{"rendered":"\n<p>From our last post, &#8220;<a href=\"https:\/\/www.codeastar.com\/flask-backend-react-frontend-weather-1\/\">Flask Backend and React Frontend for Weather Forecast \u2013 Part 1<\/a>&#8220;, we built our magic user, RESTful API as the backend module with Flask. This time, we are going to build our sword swinger, who always deals with challenges at the front line. Before we go further, let&#8217;s have a little rewind. Do you remember why we separate web app into backend and frontend modules? Yes, I know you can answer it (don&#8217;t you? :]] ). Because of utilizing both modules to their max capability. From our <a href=\"https:\/\/www.codeastar.com\/2019-top-programming-languages\/\">2019 Top Programming Languages<\/a> post, we mentioned that frontend languages are much stronger nowadays and hot in job market. Although we have focused on Python backend mostly in this blog, it is a valuable experience to taste the frontend languages. So, let&#8217;s enter our new page of frontend languages, and code our React Frontend for the EZ Weather Forecast (EZW) project.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">Why React Frontend? <\/h3>\n\n\n\n<p>Yes, why React? Since there are several frontend languages, like Angular and Vue.js. Our reasons of choosing <a rel=\"noreferrer noopener\" aria-label=\"React (opens in a new tab)\" href=\"https:\/\/reactjs.org\/\" target=\"_blank\">React<\/a> are: ease of use, popularity and the size of community. Actually, those are also the reasons we pick Python as our major language as well. It will be easier if we try something new which is similar to something we are familiar with.<\/p>\n\n\n\n<p>Oh wait, you don&#8217;t have any React experience? No problem, then we go for it step-by-step. First things first, even though we always use the term &#8220;frontend languages&#8221;, they are all JavaScript framework or library. In order to write our frontend (JavaScript) module, we need a JavaScript runtime &#8212; <a rel=\"noreferrer noopener\" aria-label=\"Node.js (opens in a new tab)\" href=\"https:\/\/nodejs.org\" target=\"_blank\">Node.js<\/a>. Go to download the latest stable version and run following command to start our first ever React frontend: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$npx create-react-app ezw_react\n$cd ezw_react\n$npm start<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>&#8220;<em>npx<\/em>&#8221; command is a package runner tool from Node.js, hence, it is running the &#8220;<em>create-react-app<\/em>&#8221; package.<\/li><li>&#8220;<em>create-react-app<\/em>&#8221; the name says it all, it creates a React boilerplate under the folder &#8220;<em>ezw_react<\/em>&#8220;<\/li><li>&#8220;<em>npm start<\/em>&#8221; starts our React boilerplate app!<\/li><\/ul>\n\n\n\n<p>Thus we have started our first ever React frontend module on http:\/\/localhost:3000. We have prepared our development environment, so it is time to update the generic boilerplate to our actual EZW frontend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">EZW Frontend with React<\/h3>\n\n\n\n<p>Before we start our coding, let&#8217;s define our expected outcome. On our previous <a href=\"https:\/\/www.codeastar.com\/flask-easy-web-app-python\/\">EZW single module setup<\/a>, we have following user interface: <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"722\" height=\"273\" data-attachment-id=\"902\" data-permalink=\"https:\/\/www.codeastar.com\/flask-easy-web-app-python\/ezw_form\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/03\/ezw_form.png?fit=722%2C273&amp;ssl=1\" data-orig-size=\"722,273\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ezw_form\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/03\/ezw_form.png?fit=300%2C113&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/03\/ezw_form.png?fit=722%2C273&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/03\/ezw_form.png?resize=722%2C273&#038;ssl=1\" alt=\"\" class=\"wp-image-902\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/03\/ezw_form.png?w=722&amp;ssl=1 722w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/03\/ezw_form.png?resize=300%2C113&amp;ssl=1 300w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/figure><\/div>\n\n\n\n<p>So our requirements are: a pair of date pickers , a location input box and a submit button for our frontend. <\/p>\n\n\n\n<p>Okay, let&#8217;s go back to our &#8220;<em>ezw_react<\/em>&#8221; folder and start our coding. First, remove all files within &#8220;<em>ezw_react\/src<\/em>&#8221; folder. Yes, remove them all. Don&#8217;t panic, we just remove unwanted files and replace files that matter later. Then, we go to install required packages for &#8220;<em>ezw_react<\/em>&#8221; using <em>npm<\/em>. <em>Npm<\/em> is a package manager tool, so you can think about it as Node.js version of Python&#8217;s <em><a rel=\"noreferrer noopener\" aria-label=\"pipenv (opens in a new tab)\" href=\"https:\/\/pipenv.readthedocs.io\/\" target=\"_blank\">pipenv<\/a><\/em>. We install following packages:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" aria-label=\"react-datepicker (opens in a new tab)\" href=\"https:\/\/github.com\/Hacker0x01\/react-datepicker\" target=\"_blank\">react-datepicker<\/a> (date picker package)<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"react-geosuggest (opens in a new tab)\" href=\"https:\/\/github.com\/ubilabs\/react-geosuggest\" target=\"_blank\">react-geosuggest<\/a>     (package to handle geolocation)<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"axios (opens in a new tab)\" href=\"https:\/\/github.com\/axios\/axios\" target=\"_blank\">axios<\/a>      (promise based HTTP client)<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"moment (opens in a new tab)\" href=\"https:\/\/momentjs.com\/\" target=\"_blank\">moment<\/a>       (JavaScript date object handler)<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"react-icons-weather (opens in a new tab)\" href=\"https:\/\/github.com\/williamsb\/react-weather-icons\" target=\"_blank\">react-icons-weather<\/a>  (package to display weather icons)<\/li><li><\/li><\/ul>\n\n\n\n<p>with the command, <em>npm install &lt;package_name&gt; &#8211;save<\/em>. <\/p>\n\n\n\n<p>After that, we create a <em>index.js<\/em> file under &#8220;src&#8221; folder with following content: <\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\">import React from 'react';\nimport ReactDOM from 'react-dom';\nimport DatePicker from \"react-datepicker\"; \nimport \"react-datepicker\/dist\/react-datepicker.css\";\n\nclass Ezw extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = \n        {\n          startDate: new Date(),\n          endDate: new Date(), \n        };    \n        this.handleChangeStart = this.handleChangeStart.bind(this);\n        this.handleChangeEnd = this.handleChangeEnd.bind(this);\n    }\n\n    handleChangeStart(date) \n    {\n    }\/\/handleChangeStart\n\n    handleChangeEnd(date) \n    {\n    }\/\/handleChangeEnd\n   \n    render() \n    {\n      return (      \n        <div>\n        <h1>EZ Weather Forecast React Frontend<\/h1>\n            <div className=\"comp_ezw\">\n                <div>Date range:<\/div>\n                <DatePicker\n                selected={this.state.startDate}\n                selectsStart\n                startDate={this.state.startDate}\n                endDate={this.state.endDate}\n                onChange={this.handleChangeStart}\n                dateFormat=\"dd-MM-YYYY\"\n                className=\"ezw_datepicker\"\n                \/>\n                <div className=\"ezw_to\">TO<\/div>\n                <DatePicker\n                selected={this.state.endDate}\n                selectsEnd\n                startDate={this.state.startDate}\n                endDate={this.state.endDate}\n                onChange={this.handleChangeEnd}\n                dateFormat=\"dd-MM-YYYY\"\n                className=\"ezw_datepicker\"\n                \/>\n            <\/div>\n        <\/div>\n      );\n    }\/\/render\n}\/\/ezw\n\nReactDOM.render(\n    <Ezw \/>,\n    document.getElementById('root')\n  );\n<\/pre>\n\n\n\n<p>Open <em>http:\/\/localhost:3000<\/em> in the browser, you should see our date pickers created using React.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"527\" height=\"455\" data-attachment-id=\"1781\" data-permalink=\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/ezw_react1\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/02\/ezw_react1.png?fit=527%2C455&amp;ssl=1\" data-orig-size=\"527,455\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ezw_react1\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/02\/ezw_react1.png?fit=300%2C259&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/02\/ezw_react1.png?fit=527%2C455&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/02\/ezw_react1.png?resize=527%2C455&#038;ssl=1\" alt=\"\" class=\"wp-image-1781\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/02\/ezw_react1.png?w=527&amp;ssl=1 527w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/02\/ezw_react1.png?resize=300%2C259&amp;ssl=1 300w\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" \/><\/figure><\/div>\n\n\n\n<p>Ta-Da! We just made our first React app by ourselves! There are major code blocks in our source, <em>index.js<\/em>: <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>create a React component, &#8220;Ezw&#8221;<\/li><li>initialize startDate and endDate as component states<\/li><li>create two empty date methods for later use<\/li><li>bind date methods to the React component &#8220;Ezw&#8221;<\/li><li>add Datepicker objects in HTML-like syntax on render method<\/li><li>Render the React component &#8220;Ezw&#8221; into a HTML reference &#8220;root&#8221;  <\/li><\/ol>\n\n\n\n<p>We have all the basic setup for our date pickers. The next thing we need to do is adding logic to our Ezw React component. Do you remember the states and date methods we created in previous step? Now we are going to use them to get date information into the Ezw component. So we update the Ezw component with: <\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\">    handleChangeStart(date) \n    {\n        if (date > this.state.endDate)\n        {\n            this.setState({\n                endDate: date\n              });\n        }\n\n        this.setState({\n          startDate: date\n        });\n\n    }\/\/handleChangeStart\n\n    handleChangeEnd(date) \n    {\n        if (date < this.state.startDate)\n        {\n            this.setState({\n                startDate: date\n              });\n        }\n\n        this.setState({\n            endDate: date\n        });\n    }\/\/handleChangeEnd\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Handle Geolocation with Google API <\/h3>\n\n\n\n<p>From our single module EZW Flask solution, we handled geolocation in backend. And we mentioned in past, the modern day frontend languages are more powerful, they can handle some of the backend tasks as well. So why don't we take the advantage of frontend module and provide user a better user experience? Thus we have the React GeoSuggest package.<\/p>\n\n\n\n<p>The idea of GeoSuggest is easy, we let user enter a part of a location and we provide a list of suggestion from Google map. Since it is a Google service, we have to use Google web service API key. Let's move to <a rel=\"noreferrer noopener\" aria-label=\"Google Developer Console (opens in a new tab)\" href=\"https:\/\/console.developers.google.com\/\" target=\"_blank\">Google Developer Console<\/a> for key generation. After that, we enable <a rel=\"noreferrer noopener\" aria-label=\"Google Maps Geocoding API (opens in a new tab)\" href=\"https:\/\/developers.google.com\/maps\/documentation\/geocoding\/start\" target=\"_blank\">Google Maps Geocoding API<\/a>, <a rel=\"noreferrer noopener\" aria-label=\"Google Places API Web Service (opens in a new tab)\" href=\"https:\/\/developers.google.com\/places\/web-service\/\" target=\"_blank\">Google Places API Web Service<\/a> and <a rel=\"noreferrer noopener\" aria-label=\"Google Maps Javascript API (opens in a new tab)\" href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/\" target=\"_blank\">Google Maps Javascript API<\/a> to make the React GeoSuggest package work.<\/p>\n\n\n\n<p>Now we have the API key and the enabled services. Other than we hard code the key into our source, there is a better way to handle variables in React --- by using a <strong>.env<\/strong> file. The <strong>.env<\/strong> file should be located under the root folder at: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/ezw_react\n    \/src \n      index.js\n      index.css\n    \/public\n      index.html\n    package.json\n    .env <\/code><\/pre>\n\n\n\n<p>We put <em>REACT_APP_GOOGLE_API_KEY=&lt;your Google API key&gt;<\/em> in the <strong>.env<\/strong> file. And then we put <em>&lt;script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=%REACT_APP_GOOGLE_API_KEY%&amp;libraries=places\"&gt;&lt;\/script&gt;<\/em> into the <em>&lt;head&gt;&lt;\/head&gt;<\/em> section of <strong>\/ezw_react\/public\/index.html<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">React GeoSuggest in Action<\/h3>\n\n\n\n<p>Okay, we have finished the Google API setting, now it is the time we bring the GeoSuggest to live. First, we add new states and methods in constructor:<\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\">import Geosuggest from 'react-geosuggest';\n\n    constructor(props) {\n        super(props);\n              this.state = \n        {\n          ....\n          latitude: null,\n          longitude: null,\n          readyToSubmit: false, \n          location: null,\n          status: \"Enter date and location...\"\n        };\n        ....\n        this.handleLocation = this.handleLocation.bind(this);\n        this.resetLocation = this.resetLocation.bind(this);\n    }\n<\/pre>\n\n\n\n<p>Second, we define new location methods, which obtain location information from Google: <\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\">    handleLocation(loc)\n    {\n        if (typeof loc !== 'undefined')\n        { \n            this.setState({\n                latitude: loc.location.lat,\n                longitude: loc.location.lng,\n                location: loc.label,\n                readyToSubmit: true,\n                status: \"Ready to Send\"\n              });\n        }\n    }\/\/handleLocation\n\n    resetLocation() \n    {\n        this.setState({\n            latitude: null,\n            longitude: null,\n            readyToSubmit: false,\n            status: \"Enter date and location...\"\n        });\n    }\/\/resetLocation\n<\/pre>\n\n\n\n<p>Finally, we put the GeoSuggest object in Render() method: <\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\">  render() \n    {\n      var fixtures = [\n        {label: 'Mountain View Station, Mountain View, CA, USA', location: {lat: 37.3945565, lng: -122.0782263}},  \n        {label: 'Mountain View Public Library, Franklin St, Mountain View, CA, USA', location: {lat: 37.3968885, lng: -122.0929291}},         \n      ];\n\n      return (      \n        <div>\n         .....\n           <div className=\"comp_ezw\">\n                <div>Location:<\/div>\n                <Geosuggest\n                ref={el=>this._geoSuggest=el}\n                placeholder=\"Start typing!\"\n                initialValue=\"Mountain View\"\n                fixtures={fixtures}\n                onSuggestSelect={this.handleLocation}\n                onChange={this.resetLocation}\n                location={new window.google.maps.LatLng(37.38605, -122.08385)}\n                radius=\"20\" \/> \n            <\/div>   \n        <\/div>\n      );\n    }\/\/render\n<\/pre>\n\n\n\n<p>Please note that we have added a default location \"Mountain View\" and 2 fixture locations, \"Mountain View Station\" and \"Mountain Public Library\".  Those settings are optional, as we just want to try more of the GeoSuggest package. We also apply CSS setting to make the EZW app look fancy, and you can get the complete source at the end of this topic. Then we have: <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1790\" data-permalink=\"https:\/\/www.codeastar.com\/ezw_ui\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_ui.png?fit=851%2C407&amp;ssl=1\" data-orig-size=\"851,407\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ezw_ui\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_ui.png?fit=300%2C143&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_ui.png?fit=851%2C407&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_ui.png?resize=638%2C305&#038;ssl=1\" alt=\"EZW React UI\" class=\"wp-image-1790\" width=\"638\" height=\"305\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_ui.png?w=851&amp;ssl=1 851w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_ui.png?resize=300%2C143&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_ui.png?resize=768%2C367&amp;ssl=1 768w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<p>The first two suggestions in red rectangle are the ones we entered in above code. While others are place suggestions returned from Google Places API! Let's review our current process. A pair of date packers? Check! Geo suggestion? Check! Now we only need a submit button and a layout of our weather report.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Get Weather Report from Backend<\/h3>\n\n\n\n<p>We are almost there. In order to get weather reports, we need to send our request with JSON to our EZW Flask backend module. Like the way we setup Google API key, we can set the EZW backend url at <strong>.env<\/strong> file. Assuming the EZW Flask backend is set at <em>http:\/\/127.0.0.1:5000\/ezw_api<\/em>, so we put following line in the <strong>.env <\/strong>file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>REACT_APP_EZW_API=http:\/\/127.0.0.1:5000\/ezw_api<\/code><\/pre>\n\n\n\n<p>Update <em>index.js<\/em> by adding following functions:<\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\">import WeatherIcon from 'react-icons-weather';\n\nfunction cardLayout(props, i)\n{\n    return (\n        <div key={i}>\n           <div className=\"weather_card\"> \n              <div className=\"weather_info\">\n                <div><div className=\"report_item\">Date:<\/div> {props.date}<\/div> \n                <div><div className=\"report_item\">Max Temperature:<\/div> {props.max_temperature}<\/div> \n                <div><div className=\"report_item\">Min Temperature:<\/div> {props.min_temperature}<\/div> \n                <div><div className=\"report_item\">Summary:<\/div> {props.summary}<\/div>  \n                <div><div className=\"report_item\">Chance of rain:<\/div> {props.raining_chance}<\/div>  \n              <\/div> \n              <div className=\"weather_icon\">\n                <WeatherIcon name=\"darksky\" iconId={props.icon} \/>  \n              <\/div>\n           <\/div>          \n        <\/div>\n      );\n}\/\/cardLayout\n\nfunction Weathercard(props, location) \n{\n    let weather_reports = props.reports;\n    let reports_length = 0;\n    let json_reports = [];\n\n    if (typeof weather_reports !== 'undefined')\n    {\n        json_reports=JSON.parse(weather_reports);\n        reports_length = json_reports.length;\n    }\/\/if not undefined\n\n    var rows = [];\n    for (var i = 0; i < reports_length; i++) {\n        rows.push( cardLayout(json_reports[i], i));\n    }\n\n    return (\n      <div>\n          <div className=\"location\">{location}<\/div>\n          <div>\n            {rows}\n          <\/div>\n      <\/div>\n    );\n}\n<\/pre>\n\n\n\n<p>Those functions define our weather report layout, using the JSON response from EZW backend. Please note that we use a React package, <em>react-icons-weather<\/em>, to display weather icons from Dark Sky API.  <\/p>\n\n\n\n<p>Now we add the part that sends out a JSON request to our EZW backend:<\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\" escaped=\"true\">import axios from 'axios';\nimport moment from 'moment';\n\nclass Ezw extends React.Component {\n    constructor(props) {\n        ....\n        this.getDateResult = this.getDateResult.bind(this);\n    }\n\n    getDateResult()\n    {\n        this.setState({\n            status: \"Processing...\",\n           });\n        \/\/send to server         \n        let json_req = {\"latitude\": this.state.latitude, \"longitude\": this.state.longitude, \n        \"start_date\": moment(this.state.startDate).format('YYYY-MM-DD'), \"end_date\":moment(this.state.endDate).format('YYYY-MM-DD')};\n        axios.post(process.env.REACT_APP_EZW_API,json_req)\n            .then(res =&gt; {\n               this.setState({\n                   status: Weathercard(res.data)\n                });\n            })   \/\/axios   \n    }\/\/getDateResult\n<\/pre>\n\n\n\n<p>You may notice that we are using 2 JavaScript packages on above code: <em>axios <\/em>and <em>moment<\/em>. <em>Axios <\/em>is our HTTP client for handling HTTP request\/response. The major benefits of using <em>axios<\/em> are: 1) it is <a rel=\"noreferrer noopener\" aria-label=\"promise (opens in a new tab)\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Using_promises\" target=\"_blank\">promise<\/a> based and 2) it is JSON ready. And for the <em>moment<\/em> package, it is a popular JavaScript package for handling and formatting date object.<\/p>\n\n\n\n<p>The <em>getDateResult <\/em>function is straight forward, it collects date and location information from our UI, then send a JSON request and receive a JSON response to\/from our EZW Flask backend. Our EZW backend url is defined by the environment variable, <em>process.env.REACT_APP_EZW_API<\/em>. And yes, it is the <em>REACT_APP_EZW_API<\/em> variable we set on the <strong>.env<\/strong> file earlier.<\/p>\n\n\n\n<p>We have all the functions ready, then it is the time we render the submit button and weather report:<\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\">\n    render() \n    {\n      ....\n      let weather_report;\n      weather_report = this.state.status;\n\n      return (\n        <div>\n            ....\n            <div className=\"comp_ezw\">\n                <button \n                    onClick={this.getDateResult }\n                    disabled={!this.state.readyToSubmit} \n                    className=\"button_ezw\"                               \n                    >\n                    SUBMIT\n                <\/button>  \n\t    <\/div>\n            <div className=\"report_ezw\">\n                {weather_report}                \n            <\/div>\n        <\/div>\n      );\n    }\/\/render\n}\/\/ezw\n<\/pre>\n\n\n\n<p>Let's enter date range and location for our test run. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1799\" data-permalink=\"https:\/\/www.codeastar.com\/ezw_search_1\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_1.png?fit=552%2C446&amp;ssl=1\" data-orig-size=\"552,446\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ezw_search_1\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_1.png?fit=300%2C242&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_1.png?fit=552%2C446&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_1.png?resize=414%2C335&#038;ssl=1\" alt=\"EZW enter date\" class=\"wp-image-1799\" width=\"414\" height=\"335\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_1.png?w=552&amp;ssl=1 552w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_1.png?resize=300%2C242&amp;ssl=1 300w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><figcaption>Enter date from 20th April, 2019 to 24th April, 2019<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1800\" data-permalink=\"https:\/\/www.codeastar.com\/ezw_search_2\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_2.png?fit=566%2C439&amp;ssl=1\" data-orig-size=\"566,439\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ezw_search_2\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_2.png?fit=300%2C233&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_2.png?fit=566%2C439&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_2.png?resize=425%2C329&#038;ssl=1\" alt=\"EZW enter location\" class=\"wp-image-1800\" width=\"425\" height=\"329\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_2.png?w=566&amp;ssl=1 566w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_search_2.png?resize=300%2C233&amp;ssl=1 300w\" sizes=\"auto, (max-width: 425px) 100vw, 425px\" \/><figcaption>And we are going to Kagoshima, Japan<\/figcaption><\/figure><\/div>\n\n\n\n<p>Here we go:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1801\" data-permalink=\"https:\/\/www.codeastar.com\/ezw_report\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_report.png?fit=799%2C652&amp;ssl=1\" data-orig-size=\"799,652\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ezw_report\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_report.png?fit=300%2C245&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_report.png?fit=799%2C652&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_report.png?resize=599%2C489&#038;ssl=1\" alt=\"EZW weather report\" class=\"wp-image-1801\" width=\"599\" height=\"489\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_report.png?w=799&amp;ssl=1 799w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_report.png?resize=300%2C245&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_report.png?resize=768%2C627&amp;ssl=1 768w\" sizes=\"auto, (max-width: 599px) 100vw, 599px\" \/><\/figure><\/div>\n\n\n\n<p>Ding! We have our fully functional EZW app using React frontend and Flask backend! Let's have another EZW demo:  <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1802\" data-permalink=\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/ezw_demo\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_demo.gif?fit=800%2C738&amp;ssl=1\" data-orig-size=\"800,738\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ezw_demo\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_demo.gif?fit=300%2C277&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_demo.gif?fit=800%2C738&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_demo.gif?resize=600%2C554&#038;ssl=1\" alt=\"\" class=\"wp-image-1802\" width=\"600\" height=\"554\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_demo.gif?w=800&amp;ssl=1 800w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_demo.gif?resize=300%2C277&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/ezw_demo.gif?resize=768%2C708&amp;ssl=1 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>The benefit of using React is its component based architecture. Our date picker, weather report and geo suggest are all components. And each component has its own methods and APIs. Therefore they can handle their requests on their own, like getting geo suggestions from Google, and without the need of a page refresh. Further more, components can be reused and rearranged, which can shorten app development time and give frontend developers a lot of room to make changes.  <\/p>\n\n\n\n<p>We have both Backend and Frontend modules ready, what's next? Let's bring the EZW app live using Amazon Web Services (AWS) on our <a href=\"https:\/\/www.codeastar.com\/elastic-beanstalk-with-react-frontend-and-flask-backend-part-3\/\">final chapter<\/a>!<\/p>\n\n\n\n<div style=\"height:121px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">What have we learnt in this post?<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>Usage of React to build frontend component<\/li><li>Usage and setting of Google API<\/li><li>Sending and receiving JSON object to\/from backend module <\/li><li>Component based architecture of React<\/li><\/ol>\n\n\n\n<p>(the complete source can be found at&nbsp;<strong>GitHub<\/strong>: <a rel=\"noreferrer noopener\" aria-label=\"https:\/\/github.com\/codeastar\/ez_weather_forecast_react_frontend (opens in a new tab)\" href=\"https:\/\/github.com\/codeastar\/ez_weather_forecast_react_frontend\" target=\"_blank\">https:\/\/github.com\/codeastar\/ez_weather_forecast_react_frontend<\/a> )<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>From our last post, &#8220;Flask Backend and React Frontend for Weather Forecast \u2013 Part 1&#8220;, we built our magic user, RESTful API as the backend module with Flask. This time, we are going to build our sword swinger, who always deals with challenges at the front line. Before we go further, let&#8217;s have a little [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1807,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[2],"tags":[71,134,136,47,48,131,32],"class_list":["post-1769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-we-code-therefore-we-are","tag-ezw","tag-frontend","tag-google-api","tag-javascript","tag-node-js","tag-react","tag-weather-forecast"],"jetpack_publicize_connections":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Frontend and Flask Backend for Weather Forecast \u2013 Part 2<\/title>\n<meta name=\"description\" content=\"We are going to build our weather forecast frontend with React. And make API calls to get geo suggestions from Google and weather reports from our backend.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2\" \/>\n<meta property=\"og:description\" content=\"We are going to build our weather forecast frontend with React. And make API calls to get geo suggestions from Google and weather reports from our backend.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Code A Star\" \/>\n<meta property=\"article:publisher\" content=\"codeastar\" \/>\n<meta property=\"article:author\" content=\"codeastar\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-04T18:05:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-28T07:37:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Raven Hon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeastar\" \/>\n<meta name=\"twitter:site\" content=\"@codeastar\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Raven Hon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/\"},\"author\":{\"name\":\"Raven Hon\",\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd\"},\"headline\":\"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2\",\"datePublished\":\"2019-03-04T18:05:58+00:00\",\"dateModified\":\"2019-06-28T07:37:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/\"},\"wordCount\":1552,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd\"},\"image\":{\"@id\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1\",\"keywords\":[\"EZW\",\"frontend\",\"Google API\",\"JavaScript\",\"Node.js\",\"React\",\"weather forecast\"],\"articleSection\":[\"We code therefore we are\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/\",\"url\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/\",\"name\":\"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeastar.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1\",\"datePublished\":\"2019-03-04T18:05:58+00:00\",\"dateModified\":\"2019-06-28T07:37:59+00:00\",\"description\":\"We are going to build our weather forecast frontend with React. And make API calls to get geo suggestions from Google and weather reports from our backend.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1\",\"width\":1000,\"height\":500,\"caption\":\"React Frontend\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codeastar.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codeastar.com\/#website\",\"url\":\"https:\/\/www.codeastar.com\/\",\"name\":\"Code A Star\",\"description\":\"We don&#039;t wish upon a star, we code a star\",\"publisher\":{\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codeastar.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd\",\"name\":\"Raven Hon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/logo70.png?fit=70%2C70&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/logo70.png?fit=70%2C70&ssl=1\",\"width\":70,\"height\":70,\"caption\":\"Raven Hon\"},\"logo\":{\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/image\/\"},\"description\":\"Raven Hon is\u00a0a 20 years+ veteran in information technology industry who has worked on various projects from console, web, game, banking and mobile applications in different sized companies.\",\"sameAs\":[\"https:\/\/www.codeastar.com\",\"codeastar\",\"https:\/\/x.com\/codeastar\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2","description":"We are going to build our weather forecast frontend with React. And make API calls to get geo suggestions from Google and weather reports from our backend.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/","og_locale":"en_US","og_type":"article","og_title":"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2","og_description":"We are going to build our weather forecast frontend with React. And make API calls to get geo suggestions from Google and weather reports from our backend.","og_url":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/","og_site_name":"Code A Star","article_publisher":"codeastar","article_author":"codeastar","article_published_time":"2019-03-04T18:05:58+00:00","article_modified_time":"2019-06-28T07:37:59+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png","type":"image\/png"}],"author":"Raven Hon","twitter_card":"summary_large_image","twitter_creator":"@codeastar","twitter_site":"@codeastar","twitter_misc":{"Written by":"Raven Hon","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#article","isPartOf":{"@id":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/"},"author":{"name":"Raven Hon","@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd"},"headline":"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2","datePublished":"2019-03-04T18:05:58+00:00","dateModified":"2019-06-28T07:37:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/"},"wordCount":1552,"commentCount":1,"publisher":{"@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd"},"image":{"@id":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1","keywords":["EZW","frontend","Google API","JavaScript","Node.js","React","weather forecast"],"articleSection":["We code therefore we are"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/","url":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/","name":"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2","isPartOf":{"@id":"https:\/\/www.codeastar.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#primaryimage"},"image":{"@id":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1","datePublished":"2019-03-04T18:05:58+00:00","dateModified":"2019-06-28T07:37:59+00:00","description":"We are going to build our weather forecast frontend with React. And make API calls to get geo suggestions from Google and weather reports from our backend.","breadcrumb":{"@id":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#primaryimage","url":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1","width":1000,"height":500,"caption":"React Frontend"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codeastar.com\/"},{"@type":"ListItem","position":2,"name":"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2"}]},{"@type":"WebSite","@id":"https:\/\/www.codeastar.com\/#website","url":"https:\/\/www.codeastar.com\/","name":"Code A Star","description":"We don&#039;t wish upon a star, we code a star","publisher":{"@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codeastar.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd","name":"Raven Hon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/image\/","url":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/logo70.png?fit=70%2C70&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/logo70.png?fit=70%2C70&ssl=1","width":70,"height":70,"caption":"Raven Hon"},"logo":{"@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/image\/"},"description":"Raven Hon is\u00a0a 20 years+ veteran in information technology industry who has worked on various projects from console, web, game, banking and mobile applications in different sized companies.","sameAs":["https:\/\/www.codeastar.com","codeastar","https:\/\/x.com\/codeastar"]}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8PcRO-sx","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/posts\/1769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/comments?post=1769"}],"version-history":[{"count":34,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/posts\/1769\/revisions"}],"predecessor-version":[{"id":2062,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/posts\/1769\/revisions\/2062"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/media\/1807"}],"wp:attachment":[{"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/media?parent=1769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/categories?post=1769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/tags?post=1769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}