javascriptreactjsjquery-pluginsyahoo-weather-apigoogle-geolocation

How to create a quick Weather widget app using Reactjs


I was wondering if there is an example of weather widget that can be created quickly and it would be better if it is lightweight.


Solution

  • I wanted to share some concepts of creating an application using JavaScript, Jquery and Reactjs. Which can help learning quickly than any other sources. Here is what I did using Reactjs:

    HTML:

    <div style="width: 310px;display: block;float: left; padding: 20px;">
       <div id="weather-app"></div>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js'></script>
    <script src="script.js"></script>
    

    JS:

    var Main = React.createClass({
      getInitialState: function(){
        return {
           isLoading: true,
           toggleForm: false,
           isError: false
      }
    },
     setError: function(value){
      this.setState({isError: value});
     },
     changeLoading: function(value){
       this.setState({isLoading: value});
     },
     onToggleForm: function(value){
       this.setState({toggleForm: value});
     },
    onFormSubmit: function(c, s){
      this.onToggleForm(false);
      this.refs.change.toggleForm();
      this.refs.front.reRender(c, s);
      this.setState({isError: false});
    },
    render: function(){
      return (
        <div id="weather" className="weather">
          <ChangeBtn ref="change" isLoading={this.state.isLoading} toggleForm={this.onToggleForm} />
          <Front ref="front" isLoading={this.state.isLoading} isError={this.state.isError} setError={this.setError} loadCallback={this.changeLoading} toggle={this.state.toggleForm} />
          <Form isLoading={this.state.isLoading} toggle={this.state.toggleForm} onFormSubmit={this.onFormSubmit} isError={this.state.isError} setError={this.setError} />
          <Spinner isLoading={this.state.isLoading} />
        </div>
      )
     }
    })
    
    ReactDOM.render(<Main />, document.getElementById("weather-app"));
    

    1) Above code is preview only. Full Example can be found at this plnkr1 link.

    2) I created same example using Jquery here: plnkr2

    3) I wondered, what if I build the same using native JavaScript for extremely lightweight application? Then I also created the same using pure JavaScript here: plnkr3