Initial Commit

.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+

AppSnapshots/0-Init-App.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h2>Welcome to React</h2>
+        </div>
+        <p className="App-intro">
+          To get started, edit <code>src/App.js</code> and save to reload.
+        </p>
+      </div>
+    );
+  }
+}
+
+export default App;

AppSnapshots/1-Components-and-Props-App.js

@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+import "./App.css";
+
+const PLACES = [
+  { name: "Palo Alto", zip: "94303" },
+  { name: "San Jose", zip: "94088" },
+  { name: "Santa Cruz", zip: "95062" },
+  { name: "Honolulu", zip: "96803" }
+];
+
+class WeatherDisplay extends Component {
+  render() {
+    return <h1>Displaying weather for city {this.props.zip}</h1>;
+  }
+}
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        {PLACES.map((place, index) => (
+          <button
+            key={index}
+            onClick={() => {
+              console.log("Clicked index " + index);
+            }}
+          >
+            {place.name}
+          </button>
+        ))}
+        <WeatherDisplay zip={"12345"} />
+      </div>
+    );
+  }
+}
+
+export default App;

AppSnapshots/2-State-App.js

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import "./App.css";
+
+const PLACES = [
+  { name: "Palo Alto", zip: "94303" },
+  { name: "San Jose", zip: "94088" },
+  { name: "Santa Cruz", zip: "95062" },
+  { name: "Honolulu", zip: "96803" }
+];
+
+class WeatherDisplay extends Component {
+  render() {
+    return <h1>Displaying weather for city {this.props.zip}</h1>;
+  }
+}
+
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      activePlace: 0
+    };
+  }
+  render() {
+    const activePlace = this.state.activePlace;
+    return (
+      <div className="App">
+        {PLACES.map((place, index) => (
+          <button
+            key={index}
+            onClick={() => {
+              this.setState({ activePlace: index });
+            }}
+          >
+            {place.name}
+          </button>
+        ))}
+        <WeatherDisplay key={activePlace} zip={PLACES[activePlace].zip} />
+      </div>
+    );
+  }
+}
+
+export default App;

AppSnapshots/3-Lifecycle-and-Data-App.js

@@ -0,0 +1,74 @@
+import React, { Component } from "react";
+import "./App.css";
+
+const PLACES = [
+  { name: "Palo Alto", zip: "94303" },
+  { name: "San Jose", zip: "94088" },
+  { name: "Santa Cruz", zip: "95062" },
+  { name: "Honolulu", zip: "96803" }
+];
+
+class WeatherDisplay extends Component {
+  constructor() {
+    super();
+    this.state = {
+      weatherData: null
+    };
+  }
+  componentDidMount() {
+    const zip = this.props.zip;
+    const URL = "http://api.openweathermap.org/data/2.5/weather?q=" +
+      zip +
+      "&appid=b1b35bba8b434a28a0be2a3e1071ae5b&units=imperial";
+    fetch(URL).then(res => res.json()).then(json => {
+      this.setState({ weatherData: json });
+    });
+  }
+  render() {
+    const weatherData = this.state.weatherData;
+    if (!weatherData) return <div>Loading</div>;
+    const weather = weatherData.weather[0];
+    const iconUrl = "http://openweathermap.org/img/w/" + weather.icon + ".png";
+    return (
+      <div>
+        <h1>
+          {weather.main} in {weatherData.name}
+          <img src={iconUrl} alt={weatherData.description} />
+        </h1>
+        <p>Current: {weatherData.main.temp}°</p>
+        <p>High: {weatherData.main.temp_max}°</p>
+        <p>Low: {weatherData.main.temp_min}°</p>
+        <p>Wind Speed: {weatherData.wind.speed} mi/hr</p>
+      </div>
+    );
+  }
+}
+
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      activePlace: 0
+    };
+  }
+  render() {
+    const activePlace = this.state.activePlace;
+    return (
+      <div className="App">
+        {PLACES.map((place, index) => (
+          <button
+            key={index}
+            onClick={() => {
+              this.setState({ activePlace: index });
+            }}
+          >
+            {place.name}
+          </button>
+        ))}
+        <WeatherDisplay key={activePlace} zip={PLACES[activePlace].zip} />
+      </div>
+    );
+  }
+}
+
+export default App;

AppSnapshots/4-Installing-Components-App.js

@@ -0,0 +1,96 @@
+import React, { Component } from "react";
+import "./App.css";
+// import "bootstrap/dist/css/bootstrap.css";
+import "bootswatch/journal/bootstrap.css";
+
+import { Navbar, NavItem, Nav, Grid, Row, Col } from "react-bootstrap";
+
+const PLACES = [
+  { name: "Palo Alto", zip: "94303" },
+  { name: "San Jose", zip: "94088" },
+  { name: "Santa Cruz", zip: "95062" },
+  { name: "Honolulu", zip: "96803" }
+];
+
+class WeatherDisplay extends Component {
+  constructor() {
+    super();
+    this.state = {
+      weatherData: null
+    };
+  }
+  componentDidMount() {
+    const zip = this.props.zip;
+    const URL = "http://api.openweathermap.org/data/2.5/weather?q=" +
+      zip +
+      "&appid=b1b35bba8b434a28a0be2a3e1071ae5b&units=imperial";
+    fetch(URL).then(res => res.json()).then(json => {
+      this.setState({ weatherData: json });
+    });
+  }
+  render() {
+    const weatherData = this.state.weatherData;
+    if (!weatherData) return <div>Loading</div>;
+    const weather = weatherData.weather[0];
+    const iconUrl = "http://openweathermap.org/img/w/" + weather.icon + ".png";
+    return (
+      <div>
+        <h1>
+          {weather.main} in {weatherData.name}
+          <img src={iconUrl} alt={weatherData.description} />
+        </h1>
+        <p>Current: {weatherData.main.temp}°</p>
+        <p>High: {weatherData.main.temp_max}°</p>
+        <p>Low: {weatherData.main.temp_min}°</p>
+        <p>Wind Speed: {weatherData.wind.speed} mi/hr</p>
+      </div>
+    );
+  }
+}
+
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      activePlace: 0
+    };
+  }
+  render() {
+    const activePlace = this.state.activePlace;
+    return (
+      <div>
+        <Navbar>
+          <Navbar.Header>
+            <Navbar.Brand>
+              React Simple Weather App
+            </Navbar.Brand>
+          </Navbar.Header>
+        </Navbar>
+        <Grid>
+          <Row>
+            <Col md={4} sm={4}>
+              <h3>Select a city</h3>
+              <Nav
+                bsStyle="pills"
+                stacked
+                activeKey={activePlace}
+                onSelect={index => {
+                  this.setState({ activePlace: index });
+                }}
+              >
+                {PLACES.map((place, index) => (
+                  <NavItem key={index} eventKey={index}>{place.name}</NavItem>
+                ))}
+              </Nav>
+            </Col>
+            <Col md={8} sm={8}>
+              <WeatherDisplay key={activePlace} zip={PLACES[activePlace].zip} />
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default App;