> [] + []
""
> [] + {}
"[object Object]"
> {} + []
0
<h1>Most important!</h1>
<h2>Second most important!</h2>
<h3>Third most important!</h3>
<div className="content">
<button onClick={() => doSomething()}>
Click me!
</button>
<a href="/my/route">Go home</a>
</div>
<div onClick={() => doSomething()}>
// Content
</div>
❌
<i className="icon-email" title="Email me!"/>
<div className="card">
<div className="card__header">
<img className="card__image" src="/image"/>
Some header content
</div>
<div className="card__body">
Some body content
</div>
<button
className="card__toggle"
onClick={() => toggle()}
/>
</Card>
<Card>
<CardHeader>
<CardImage src="/image"/>
Some header content
</CardHeader>
<CardBody>
Some body content
</CardBody>
</Card>
<Card>
<Card.Header>
<Card.Image src="/image"/>
Some header content
</Card.Header>
<Card.Body>
Some body content
</Card.Body>
</Card>
class UserProfile extends React.Component {
state = {
profile: undefined
};
componentDidMount() {
fetch("/my/profile").then(response => {
this.setState({
profile: response.json()
});
});
}
render() {
if (this.state.profile) {
return (
<div className="user-profile">
<div>Name: {this.state.profile.name}</div>
<div>Email: {this.state.profile.email}</div>
</div>
);
}
}
}
global.fetch.mockImplementation(() => {
return new Promise(resolve => {
resolve({
ok: true,
json: () => {
return {
name: "Jane Smith",
email: "jane@example.com"
}
}
});
});
});
class UserProfile extends React.Component {
state = {
profile: undefined,
completed: false,
};
componentDidMount() {
...
}
render() {
if (!this.state.completed) {
return (
<a href="/profile/edit">Complete your profile!</a>
)
}
else if (this.state.profile) {
return (
<div className="user-profile">
<div>Name: {this.state.profile.name}</div>
<div>Email: {this.state.profile.email}</div>
</div>
);
}
}
}
class UserProfile extends React.Component {
state = {
profile: undefined,
completed: false,
};
componentDidMount() {
...
}
render() {
if (!this.state.completed) {
return (
<a href="/profile/edit">Complete your profile!</a>
)
}
else if (this.state.profile) {
return (
<div className="user-profile">
<div>Name: {this.state.profile.name}</div>
<div>Email: {this.state.profile.email}</div>
</div>
);
}
}
}