From 2f7481ae623809360eefd4afa3a397e62811efe3 Mon Sep 17 00:00:00 2001
From: Andrej Rasevic <andrej@rasevicengineering.com>
Date: Fri, 15 Jan 2021 14:27:44 -0500
Subject: [PATCH] adding lifecycle example
---
codeExamples/week2/lifecycle.html | 128 ++++++++++++++++++++++++++++++
1 file changed, 128 insertions(+)
create mode 100644 codeExamples/week2/lifecycle.html
diff --git a/codeExamples/week2/lifecycle.html b/codeExamples/week2/lifecycle.html
new file mode 100644
index 0000000..f2e4430
--- /dev/null
+++ b/codeExamples/week2/lifecycle.html
@@ -0,0 +1,128 @@
+<!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?");
+ console.log(newProps)
+ console.log(newState)
+ console.log(destination)
+ 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
--
GitLab