React JSX

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.temp}°C in {props.city}</p>
    );
  } else {
    return (
      <p>Cold: {props.temp}°C in {props.city}</p>
    );
  }
}

<Weather city="York" temp={23} />