JSX Expressions
const name = 'Jack';
const element = <p>Hi, {name}</p>;
function name(firstName, lastName) {
return firstName + ' ' + lastName;
}
const element = <p>Hello, {name('Jack','Fox')}</p>
JSX attributes
const elem = <img src={user.avatarUrl} />;
const elem = <button className="btn">Button</button>;
JSX Functions
name() {
return "Jack";
}
return (
<h1>Hi {name()}</h1>
)
JSX Conditional rendering
export default function Weather(props) {
if (props.temperature >= 20) {
return (
<p>Warm: {props.temperature}°C in {props.city}</p>
);
} else {
return (
<p>Cold: {props.temperature}°C in {props.city}</p>
);
}
}
<Weather city="Montreal" temp={23} />
JSX Conditional rendering shorthand
export default function Weather(props) {
return (
<p>{`${props.temperature >= 20 ? 'Warm' : 'Cold'}: ${props.temperature}°C in ${props.city}`}</p>
);
}
<Weather city="York" temp={23} />