cs50 beyond · class hello extends react.component { render() { return hello {this.props.name}!; }...
TRANSCRIPT
![Page 1: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/1.jpg)
CS50 Beyond
![Page 2: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/2.jpg)
![Page 3: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/3.jpg)
React
• Declarative • JSX • Components • State
![Page 4: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/4.jpg)
JSX
![Page 5: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/5.jpg)
JSX
const foo = <h1>Hello!</h1>
![Page 6: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/6.jpg)
React
ReactDOM
Babel
![Page 7: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/7.jpg)
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
![Page 8: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/8.jpg)
Components
![Page 9: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/9.jpg)
class Hello extends React.Component {
}
![Page 10: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/10.jpg)
class Hello extends React.Component {
render() { return <h1>Hello!</h1>; }
}
![Page 11: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/11.jpg)
<Hello />
![Page 12: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/12.jpg)
<Hello name="Alice" />
![Page 13: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/13.jpg)
class Hello extends React.Component {
render() { return <h1>Hello!</h1>; }
}
![Page 14: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/14.jpg)
class Hello extends React.Component {
render() { return <h1>Hello {this.props.name}!</h1>; }
}
![Page 15: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/15.jpg)
State
![Page 16: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/16.jpg)
class Counter extends React.Component {
}
![Page 17: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/17.jpg)
class Counter extends React.Component {
constructor(props) { }
}
![Page 18: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/18.jpg)
class Counter extends React.Component {
constructor(props) { super(props); }
}
![Page 19: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/19.jpg)
class Counter extends React.Component {
constructor(props) { super(props); this.state = { }; }
}
![Page 20: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/20.jpg)
class Counter extends React.Component {
constructor(props) { super(props); this.state = { count: 0 }; }
}
![Page 21: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/21.jpg)
Changing State
![Page 22: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/22.jpg)
this.setState({ count: 28 });
![Page 23: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/23.jpg)
this.setState(state => ({ count: state.count + 1 }));
![Page 24: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/24.jpg)
this.setState(state => { const newCount = 28; return { count: newCount }; });
![Page 25: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/25.jpg)
Guidelines for State
• Never modify state directly, always use setState.
• If state depends on previous state, then setState should take a function as its argument.
![Page 26: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/26.jpg)
Some Useful JS Tools
![Page 27: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/27.jpg)
const list1 = [1, 2, 3, 4, 5]; const copy = [...list1];
![Page 28: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/28.jpg)
const list1 = [1, 2, 3, 4, 5]; const list2 = [...list1, 6];
![Page 29: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/29.jpg)
const list1 = [1, 2, 3, 4, 5]; list1.splice(3, 1);
// list1 is now [1, 2, 3, 5]
![Page 30: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/30.jpg)
Morning Project
• To-Do List • Allow user to:
• Type in a task. • Add a new task to a list of tasks. • Delete a task by clicking a button next to each
task.
![Page 31: CS50 Beyond · class Hello extends React.Component { render() { return Hello {this.props.name}!; } }](https://reader035.vdocuments.net/reader035/viewer/2022071000/5fbcc8daffe7bf648338c508/html5/thumbnails/31.jpg)
CS50 Beyond