diff --git a/cmsc388a/code_examples/data_requests/fetch.html b/cmsc388a/code_examples/data_requests/fetch.html
new file mode 100644
index 0000000000000000000000000000000000000000..f5b41a9d9daf589b6711048a8992f4924418bfdd
--- /dev/null
+++ b/cmsc388a/code_examples/data_requests/fetch.html
@@ -0,0 +1,56 @@
+<!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>
diff --git a/cmsc388a/code_examples/life_cycle_methods/lifecycle.html b/cmsc388a/code_examples/life_cycle_methods/lifecycle.html
new file mode 100644
index 0000000000000000000000000000000000000000..ad5354911754bb794c5c73e2cf72656dcf63083e
--- /dev/null
+++ b/cmsc388a/code_examples/life_cycle_methods/lifecycle.html
@@ -0,0 +1,125 @@
+<!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
diff --git a/cmsc388a/lectures/life_cycle_methods/InitialRenderLifecycleMethods.jpg b/cmsc388a/lectures/life_cycle_methods/InitialRenderLifecycleMethods.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4ccae038c6d7007f6235ae2c87967b38dc5b2f4f
Binary files /dev/null and b/cmsc388a/lectures/life_cycle_methods/InitialRenderLifecycleMethods.jpg differ
diff --git a/cmsc388a/lectures/life_cycle_methods/PropsChangeLifecycleMethods.jpg b/cmsc388a/lectures/life_cycle_methods/PropsChangeLifecycleMethods.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6c274edf867f369828226b1bb125cb44973c2d88
Binary files /dev/null and b/cmsc388a/lectures/life_cycle_methods/PropsChangeLifecycleMethods.jpg differ
diff --git a/cmsc388a/lectures/life_cycle_methods/StateChangeLifecycleMethods.jpg b/cmsc388a/lectures/life_cycle_methods/StateChangeLifecycleMethods.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e238ac57881aec48596bdfb5a10d941c807af2b6
Binary files /dev/null and b/cmsc388a/lectures/life_cycle_methods/StateChangeLifecycleMethods.jpg differ
diff --git a/cmsc388a/lectures/life_cycle_methods/UnmountLifecycleMethods.jpg b/cmsc388a/lectures/life_cycle_methods/UnmountLifecycleMethods.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..71b8f842e81a75e8b6a20119bbf47c72a9268732
Binary files /dev/null and b/cmsc388a/lectures/life_cycle_methods/UnmountLifecycleMethods.jpg differ
diff --git a/cmsc388a/lectures/life_cycle_methods/life_cycle_methods.md b/cmsc388a/lectures/life_cycle_methods/life_cycle_methods.md
new file mode 100644
index 0000000000000000000000000000000000000000..524c8b997cad8c8dc64e70fce75bdf5f9f3e7398
--- /dev/null
+++ b/cmsc388a/lectures/life_cycle_methods/life_cycle_methods.md
@@ -0,0 +1,27 @@
+# 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
+
+
+
+2. Props Change
+
+
+
+3. State Change
+
+
+
+4. Unmount Component
+
+