This post contains notes learned while setting up a tutorial React website.
Examples from Tutorial: Intro to React
Next up
Terms
| Term |
Defination |
| props |
properties |
| Variable |
Scope |
Updatable |
| var |
global |
yes |
| let |
block |
yes |
| const |
block |
no |
Loop over Array
Useful to create tables and lists.
1
2
3
4
5
| return <div>
{user.map((person, index) => (
<h1>Hello, {<Welcome name={formatName(person)} />}</h1>
))}
</div>
|
Conditional Operator
1
| condition ? true : false
|
Function as property
1
| onClick={() => console.log('click')}
|
Functions
Simplier way to write compoents with only a render compoent and no state. Uses props.x format.
1
2
3
4
5
6
7
8
9
| function Square(props) {
return (
<button className="square"
onClick={props.onSquareClick}
>
{props.squareValue}
</button>
)
}
|
Class
Uses this.props.x format.
1
2
3
4
5
6
7
8
9
| class Board extends React.Component {
render() {
return (
<div>
{this.props.message}
</div>
);
}
}
|
Method (inside class)
1
2
3
4
5
6
7
8
| renderSquare(i) {
return (
<Square
squareValue={this.props.squares[i]}
onSquareClick={() => this.props.onSquareClick(i)}
/>
);
}
|
Constructor (inside class)
Used to save state.
1
2
3
4
5
6
7
| constructor(props) {
super(props)
this.state = {
stepNumber: 0,
xIsNext: true,
}
}
|
Use state inside event (inside class)
1
2
3
4
5
6
7
| constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
blah
}
|
Or experimental
1
2
3
| handleClick = () => {
console.log('this is:', this);
}
|
Arguments to events
1
2
| <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
|
