Initial commit React Weather App

app/components/About.jsx

@@ -0,0 +1,11 @@
+var React = require('react');
+
+var About = React.createClass({
+  render: function (){
+    return (
+      <h3>About Component</h3>
+    );
+  }
+});
+
+module.exports = About;

app/components/Examples.jsx

@@ -0,0 +1,11 @@
+var React = require('react');
+
+var Examples = React.createClass({
+  render: function () {
+    return (
+      <h3>Examples Component</h3>
+    );
+  }
+});
+
+module.exports = Examples;

app/components/Main.jsx

@@ -0,0 +1,17 @@
+var React = require('react');
+var Nav = require('Nav');
+
+var Main = React.createClass({
+  render: function () {
+    return (
+      <div>
+        <Nav/>
+        <h2>Main Component</h2>
+        {this.props.children}
+      </div>
+
+    );
+  }
+});
+
+module.exports = Main;

app/components/Nav.jsx

@@ -0,0 +1,17 @@
+var React = require('react');
+var {Link, IndexLink} = require('react-router');
+
+var Nav = React.createClass({
+  render: function (){
+    return (
+      <div>
+        <h2>Nav Component</h2>
+        <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Get Weather</IndexLink>
+        <Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> About</Link>
+        <Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Examples</Link>
+      </div>
+    );
+  }
+});
+
+module.exports = Nav;

app/components/Weather.jsx

@@ -0,0 +1,49 @@
+var React = require('react');
+var WeatherForm = require('WeatherForm');
+var WeatherMessage = require('WeatherMessage');
+var openWeatherMap = require('openWeatherMap');
+
+var Weather = React.createClass({
+  getInitialState: function () {
+    return {
+      isLoading: false
+    }
+  },
+  handleSearch: function (location) {
+    var that = this;
+
+    this.setState({isLoading: true});
+
+    openWeatherMap.getTemp(location).then(function (temp) {
+      that.setState({
+        location: location,
+        temp: temp,
+        isLoading: false
+      });
+    }, function (errorMessage) {
+      that.setState({isLoading: false});
+      alert(errorMessage);
+    });
+  },
+  render: function () {
+    var {isLoading, temp, location} = this.state;
+
+    function renderMessage () {
+      if (isLoading) {
+        return <h3>Fetching weather...</h3>;
+      } else if (temp && location) {
+        return <WeatherMessage temp={temp} location={location}/>;
+      }
+    }
+
+    return (
+      <div>
+        <h3>Weather Component</h3>
+        <WeatherForm onSearch={this.handleSearch}/>
+        {renderMessage()}
+      </div>
+    )
+  }
+});
+
+module.exports = Weather;

app/components/WeatherForm.jsx

@@ -0,0 +1,26 @@
+var React = require('react');
+
+var WeatherForm = React.createClass({
+  onFormSubmit: function (e) {
+    e.preventDefault();
+
+    var location = this.refs.location.value;
+
+    if (location.length > 0) {
+      this.refs.location.value = '';
+      this.props.onSearch(location);
+    }
+  },
+  render: function () {
+    return (
+        <div>
+          <form onSubmit={this.onFormSubmit}>
+            <input type="text" ref="location"/>
+            <button>Get Weather</button>
+          </form>
+        </div>
+    );
+  }
+});
+
+module.exports = WeatherForm;

app/components/WeatherMessage.jsx

@@ -0,0 +1,13 @@
+var React = require('react');
+
+var WeatherMessage = React.createClass({
+  render: function () {
+    var {temp, location} = this.props;
+
+    return (
+      <h3>It's it {temp} in {location}.</h3>
+    )
+  }
+});
+
+module.exports = WeatherMessage;