Skip to content
Snippets Groups Projects
Commit 5c8cb461 authored by Andrej Rasevic's avatar Andrej Rasevic
Browse files

updating lecture code examples

parent f40d4df4
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
CodeExamples/Week5/context-example/src/reportWebVitals.js 0 → 100644
+ 13
− 0
View file @ 5c8cb461
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
CodeExamples/Week5/context-example/src/setupTests.js 0 → 100644
+ 5
− 0
View file @ 5c8cb461
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
CodeExamples/Week5/context-example/yarn.lock 0 → 100644
+ 11407
− 0
View file @ 5c8cb461
This diff is collapsed.
CodeExamples/Week5/lifecycle.html 0 → 100644
+ 135
− 0
View file @ 5c8cb461
<!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>
);
}
componentDidMount() {
console.log("componentDidMount: Counter Component is inserted into the tree!");
}
}
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() {
console.log('calling increase')
console.log(this)
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: Counter Parent 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() {
// this === PArentCounterComponent
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 taseen='Taseen'/>
</div>,
destination
);
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment