Skip to content

Commit d00f79f

Browse files
kakadiadarpankakadiadarpan
committed
React performance optimization exercise.
1 parent 4c1ff2b commit d00f79f

File tree

8 files changed

+7426
-0
lines changed

8 files changed

+7426
-0
lines changed

‎exercise/.gitignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# dependencies #
2+
#############
3+
/node_modules
4+
5+
# testing #
6+
#############
7+
/coverage
8+
9+
# production #
10+
#############
11+
**/build
12+
13+
# misc #
14+
#############
15+
.DS_Store
16+
.env
17+
npm-debug.log*
18+
yarn-debug.log*
19+
yarn-error.log*
20+
21+
#ESLint config #
22+
#############
23+
.eslintrc.json
24+
25+
26+
# IDE files #
27+
#############
28+
nbproject
29+
.~lock.*
30+
.buildpath
31+
.idea
32+
.project
33+
.settings
34+
composer.lock
35+
.history/
36+
.vscode/

‎exercise/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "react-advanced-workshop",
3+
"version": "1.0.0",
4+
"description": "",
5+
"keywords": [],
6+
"main": "src/index.js",
7+
"dependencies": {
8+
"react": "16.2.0",
9+
"react-dom": "16.2.0",
10+
"react-scripts": "1.1.0"
11+
},
12+
"devDependencies": {},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test --env=jsdom",
17+
"eject": "react-scripts eject"
18+
}
19+
}

‎exercise/public/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
18+
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>React App</title>
24+
</head>
25+
26+
<body>
27+
<noscript>
28+
You need to enable JavaScript to run this app.
29+
</noscript>
30+
<div id="root"></div>
31+
<!--
32+
This HTML file is a template.
33+
If you open it directly in the browser, you will see an empty page.
34+
35+
You can add webfonts, meta tags, or analytics to this file.
36+
The build step will place the bundled scripts into the <body> tag.
37+
38+
To begin the development, run `npm start` or `yarn start`.
39+
To create a production bundle, use `npm run build` or `yarn build`.
40+
-->
41+
</body>
42+
43+
</html>

‎exercise/src/Counter.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { Component, Fragment } from "react";
2+
import superExpensiveFunction from "./utils/superExpensiveFunction";
3+
4+
class Counter extends Component {
5+
static buttonStyle = {
6+
padding: "5px"
7+
};
8+
state = {
9+
count: 0,
10+
timestamp: Date.now()
11+
};
12+
13+
increment = prevState => ({
14+
count: prevState.count + 1
15+
});
16+
17+
handleCounterClick = () => {
18+
this.setState(this.increment);
19+
};
20+
21+
handleDummyOperationClick = () => {
22+
this.setState({
23+
timestamp: Date.now()
24+
});
25+
};
26+
27+
shouldComponentUpdate(nextProps, nextState) {
28+
// Implement shouldComponentUpdate to avoid unnecessary re-renders.
29+
}
30+
31+
render() {
32+
const { count } = this.state;
33+
const calculatedCount = superExpensiveFunction(count);
34+
return (
35+
<Fragment>
36+
<div>Clicks: {calculatedCount}</div>
37+
<div style={Counter.buttonStyle}>
38+
<button onClick={this.handleCounterClick}>Increment</button>
39+
</div>
40+
<div style={Counter.buttonStyle}>
41+
<button onClick={this.handleDummyOperationClick}>Dummy</button>
42+
</div>
43+
</Fragment>
44+
);
45+
}
46+
}
47+
48+
export default Counter;

‎exercise/src/Hello.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from 'react';
2+
3+
export default ({ name }) => <h1>Hello {name}!</h1>;

‎exercise/src/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import { render } from "react-dom";
3+
import Counter from "./Counter";
4+
5+
const styles = {
6+
fontFamily: "sans-serif",
7+
textAlign: "center"
8+
};
9+
10+
const App = () => (
11+
<div style={styles}>
12+
<Counter />
13+
</div>
14+
);
15+
16+
render(<App />, document.getElementById("root"));

‎exercise/src/utils/superExpensiveFunction.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const superExpensiveFunction = input => {
2+
console.log("superExpensiveFunction");
3+
return input;
4+
};
5+
6+
export default superExpensiveFunction;

0 commit comments

Comments
 (0)