adding 388a lecture material

1c317d4b · Andrej Rasevic · 6d197c41 · 1c317d4b · 1c317d4b · 1c317d4b
Commit 1c317d4b authored 6 years ago by Andrej Rasevic
--- a/cmsc388a/code_examples/data_requests/fetch.html
+++ b/cmsc388a/code_examples/data_requests/fetch.html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Fetch Example</title>
+  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <div id="container"></div>
+  <script type="text/babel">
+    const API = 'https://hn.algolia.com/api/v1/search?query=';
+    const DEFAULT_QUERY = 'react';
+    class App extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {
+          hits: [],
+        };
+      }
+      componentDidMount() {
+        console.log(API+DEFAULT_QUERY);
+        fetch(API + DEFAULT_QUERY)
+          .then(response => response.json())
+          .then(data => this.setState({ hits: data.hits }));
+      }
+      render() {
+        const { hits } = this.state;
+        return (
+          <ul>
+            {hits.map(hit =>
+              <li key={hit.objectID}>
+                <a href={hit.url}>{hit.title}</a>
+              </li>
+            )}
+          </ul>
+        );
+      }
+    }
+    ReactDOM.render(
+      <App/>,
+      document.querySelector("#container")
+    );
+  </script>
+</body>
+</html>
--- a/cmsc388a/code_examples/life_cycle_methods/lifecycle.html
+++ b/cmsc388a/code_examples/life_cycle_methods/lifecycle.html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>Lifecycle Methods</title>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+<style>
+    #container {
+      padding: 50px;
+      background-color: #FFF;
+    }
+  </style>
+</head>
+<body>
+  <div id="container"></div>
+  <script type="text/babel">
+    var destination = document.querySelector("#container");
+    class Counter extends React.Component {
+      render() {
+        var textStyle = {
+          fontSize: 72,
+          fontFamily: "sans-serif",
+          color: "#333",
+          fontWeight: "bold"
+        };
+        console.log("render: Counter component");
+        return (
+          <div style={textStyle}>
+            {this.props.display}
+          </div>
+        );
+      }
+    }
+    class CounterParent extends React.Component {
+      constructor(props) {
+        super(props);
+        console.log("constructor: It's default time!");
+        this.state = {
+          count: 0
+        };
+        this.increase = this.increase.bind(this);
+      }
+      increase() {
+        this.setState({
+          count: this.state.count + 1
+        });
+      }
+      static getDerivedStateFromProps(props, state) {
+        console.log("getDerivedStateFromProps: You probably don't need this!")
+        return null;
+      }
+      componentDidUpdate(currentProps, currentState) {
+        console.log("componentDidUpdate: Component just updated!");
+      }
+      getSnapshotBeforeUpdate(prevProps, prevState) {
+        console.log("getSnapshotBeforeUpdate: Component is about to commit its changes!")
+        return null;
+      }
+      componentDidMount() {
+        console.log("componentDidMount: Component is inserted into the tree!");
+      }
+      componentWillUnmount() {
+        console.log("componentWillUnmount: Component is about to be removed from the DOM!");
+      }
+      shouldComponentUpdate(newProps, newState) {
+        console.log("shouldComponentUpdate: Should component update?");
+        if (newState.count < 5) {
+          console.log("shouldComponentUpdate: Component should update!");
+          return true;
+        } else {
+          ReactDOM.unmountComponentAtNode(destination);
+          console.log("shouldComponentUpdate: Component should not update!");
+          return false;
+        }
+      }
+      render() {
+        var backgroundStyle = {
+          padding: 50,
+          border: "#333 2px dotted",
+          width: 250,
+          height: 100,
+          borderRadius: 10,
+          textAlign: "center"
+        };
+        console.log("render: CounterParent component");
+        return (
+          <div style={backgroundStyle}>
+            <Counter display={this.state.count} />
+            <button onClick={this.increase}>
+              +
+            </button>
+          </div>
+        );
+      }
+    };
+    ReactDOM.render(
+      <div>
+        <CounterParent />
+      </div>,
+      destination
+    );
+  </script>
+</body>
+</html>
\ No newline at end of file
--- a/cmsc388a/lectures/life_cycle_methods/InitialRenderLifecycleMethods.jpg
+++ b/cmsc388a/lectures/life_cycle_methods/InitialRenderLifecycleMethods.jpg
--- a/cmsc388a/lectures/life_cycle_methods/PropsChangeLifecycleMethods.jpg
+++ b/cmsc388a/lectures/life_cycle_methods/PropsChangeLifecycleMethods.jpg
--- a/cmsc388a/lectures/life_cycle_methods/StateChangeLifecycleMethods.jpg
+++ b/cmsc388a/lectures/life_cycle_methods/StateChangeLifecycleMethods.jpg
--- a/cmsc388a/lectures/life_cycle_methods/UnmountLifecycleMethods.jpg
+++ b/cmsc388a/lectures/life_cycle_methods/UnmountLifecycleMethods.jpg
--- a/cmsc388a/lectures/life_cycle_methods/life_cycle_methods.md
+++ b/cmsc388a/lectures/life_cycle_methods/life_cycle_methods.md
+# React Lifecycle Methods
+* componentWillMount
+* componentDidMount
+* componentWillUnmount
+* componentWillUpdate
+* componentDidUpdate
+* shouldComponentUpdate
+* componentWillReceiveProps
+* componentDidCatch
+## There are 4 types of actions that trigger their own subset of the complete set of React component lifecycle methods.
+1. Initial Rendering of Component
+![Rendering Phase Callbacks](InitialRenderLifecycleMethods.jpg)
+2. Props Change
+![Props Change Callbacks](PropsChangeLifecycleMethods.jpg)
+3. State Change
+![State Change Callbacks](StateChangeLifecycleMethods.jpg)
+4. Unmount Component
+![Unmount Callback](UnmountLifecycleMethods.jpg)