Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class...
Transcript of Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class...
![Page 1: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/1.jpg)
Online Multimedia 2019/20 – Tutorial 06
Tutorial 06 – Front-end Tooling
Winter Semester 2019/20
![Page 2: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/2.jpg)
Online Multimedia 2019/20 – Tutorial 06
●
●
●
![Page 3: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/3.jpg)
Online Multimedia 2019/20 – Tutorial 06
export default class OmmCounter extends Component {
…
render() {
return
React.createElement('div', null,
React.createElement('span', null, this.state.count),
React.createElement('div', null,
React.createElement('button', {onClick: this.inc}, '+'),
React.createElement('button', {onClick: this.dec}, '-')))
}
}
omm-counter.tsx
export default class OmmCounter extends Component {
…
render() {
return (
<div>
<span>{ this.state.count }</span>
<div>
<button onClick={this.inc}>+</button>
<button onClick={this.dec}>-</button>
</div>
</div>
)
}
} omm-counter.tsx
●●
Recap
![Page 4: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/4.jpg)
Online Multimedia 2019/20 – Tutorial 06
●●●
const c: React.FC = () => {return (<div>TSX</div>)
}
import React from 'react';
import './App.css';
import OmmCounter from './components/omm-counter/omm-counter'
const App: React.FC = () => {
return (
<div className="app">
<div className="header"><h1>Counter - React
Hooks</h1></div>
<OmmCounter />
</div>
);
}
export default App; App.tsx
Recap
![Page 5: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/5.jpg)
Online Multimedia 2019/20 – Tutorial 06
● state useState :
const [currentState, setCurrentState] = useState('any data')const F = () => { setCurrentState('new state') }
● useState() r○○
Recap
![Page 6: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/6.jpg)
Online Multimedia 2019/20 – Tutorial 06
● props
●
import React, { Component } from 'react';
interface ChildProps { name: string, age: number }
export default class Child extends Component<ChildProps> {
render() {
return (<div>
<div>name: {this.props.name}</div>
<div>age: {this.props.age}</div>
{/* <div>role: {this.props.role} </div> */}
</div>)
}} child.tsx
import React, { Component } from 'react';
import Child from './child'
export default class Parent extends Component {
render() {
return (
<div><Child name={"Max"} age={18}/></div>
)
}
}
parent.tsx
Recap
![Page 7: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/7.jpg)
Online Multimedia 2019/20 – Tutorial 06
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
Recap
![Page 8: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/8.jpg)
Online Multimedia 2019/20 – Tutorial 06
●ReactDOM
● ReactDOM.render
State change Compute diff Re-render
Virtual DOM
Browser DOM
Recap
![Page 9: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/9.jpg)
Online Multimedia 2019/20 – Tutorial 06
Click Event
OmmCounter.inc
Render: createElement
UpdateState
Phase 1: Reconciliation
Phase 2: Commit
●
●
●
●
Recap
![Page 10: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/10.jpg)
Online Multimedia 2019/20 – Tutorial 06
Recap
●if (condition) {
optionalRender = (<div>render under a condition</div>)
}
return (<div>{optionalRender}</div>)
●return (<div>{
this.state.stateArray.map(item => {
return <div key={item.id}>{item.property}</div>
})
}</div>)
![Page 11: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/11.jpg)
Online Multimedia 2019/20 – Tutorial 06
![Page 12: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/12.jpg)
Online Multimedia 2019/20 – Tutorial 06
●
○○
●
●○○
●○○
●○○ https://martinfowler.com/articles/practical-test-pyramid.html
![Page 13: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/13.jpg)
Online Multimedia 2019/20 – Tutorial 06
●
●expect(val1).toBe(val2)
●
●○○
![Page 14: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/14.jpg)
Online Multimedia 2019/20 – Tutorial 06
●src/App.test.tsx
●npm test
{
...
"scripts": {
...
"test": "react-scripts test",
...
},
...
} package.json
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
}); App.test.tsx
![Page 15: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/15.jpg)
Online Multimedia 2019/20 – Tutorial 06
●●
○
○
●● →● →
![Page 16: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/16.jpg)
Online Multimedia 2019/20 – Tutorial 06
●● →● →
import React from 'react';
import OmmCounter from './omm-counter';
import { render, fireEvent } from '@testing-library/react';
it('renders without crashing', async () => {
const { getByText } = render(<OmmCounter />);
const text = document.querySelector('.counter-state');
expect(text!.innerHTML).toBe('0');
});
it('plus button works', () => {
const { getByText } = render(<OmmCounter />);
fireEvent.click(getByText('+'));
const text = document.querySelector('.counter-state');
expect(text).toBeDefined();
expect(text!.innerHTML).toBe('1');
});
it('minus button works', () => {
... // similar to above
}); omm-counter.test.tsx
![Page 17: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/17.jpg)
Online Multimedia 2019/20 – Tutorial 06Online Multimedia 2019/20 – Tutorial 06
![Page 18: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/18.jpg)
Online Multimedia 2019/20 – Tutorial 06
●
●
●
●
●
○
○
![Page 19: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/19.jpg)
Online Multimedia 2019/20 – Tutorial 06
![Page 20: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/20.jpg)
Online Multimedia 2019/20 – Tutorial 06
![Page 21: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/21.jpg)
Online Multimedia 2019/20 – Tutorial 06
![Page 23: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/23.jpg)
Online Multimedia 2019/20 – Tutorial 06
![Page 24: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/24.jpg)
Online Multimedia 2019/20 – Tutorial 06
![Page 25: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/25.jpg)
Online Multimedia 2019/20 – Tutorial 06
●
●
![Page 26: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/26.jpg)
Online Multimedia 2019/20 – Tutorial 06
●
●●
![Page 27: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/27.jpg)
Online Multimedia 2019/20 – Tutorial 06
●●
![Page 28: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/28.jpg)
Online Multimedia 2019/20 – Tutorial 06
●●
→
→ useEffect()
A large mount of scripting after component is rendered
Frequent GC (Pressure)
long fetch() time
![Page 29: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/29.jpg)
Online Multimedia 2019/20 – Tutorial 06Online Multimedia 2019/20 – Tutorial 06
●○
● getMeme()○
![Page 30: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/30.jpg)
Online Multimedia 2019/20 – Tutorial 06
●
![Page 31: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/31.jpg)
Online Multimedia 2019/20 – Tutorial 06
![Page 32: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/32.jpg)
Online Multimedia 2019/20 – Tutorial 06
●
●
● index
![Page 33: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/33.jpg)
Online Multimedia 2019/20 – Tutorial 06
●index
todo.id
●
●todo.id
![Page 34: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/34.jpg)
Online Multimedia 2019/20 – Tutorial 06
● ReactDOM.render
●○ ⇒
●○
■
○■ key
![Page 35: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/35.jpg)
Online Multimedia 2019/20 – Tutorial 06Online Multimedia 2019/20 – Tutorial 06
render @testing-library/react ReactDOM.render
![Page 36: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/36.jpg)
Online Multimedia 2019/20 – Tutorial 06
![Page 37: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/37.jpg)
Online Multimedia 2019/20 – Tutorial 06
●●●●
●●
![Page 38: Tutorial 06 – Front-end Tooling...Online Multimedia 2019/20 – Tutorial 06 export default class OmmCounter extends Component {… render() {return React.createElement('div', null,](https://reader033.fdocuments.us/reader033/viewer/2022052023/6038da49ce973b33e5539f37/html5/thumbnails/38.jpg)
Online Multimedia 2019/20 – Tutorial 06
●● npm install cypress --save-dev●
https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Add-a-test-file