JSX Expressions та JavaScript у JSX

Привіт, Олена!

function UserInfo() {
  const firstName = "Марія";
  const age = 25;

  return (
    <div>
      <h2>{firstName}</h2>
      <p>Вік: {age}</p>
    </div>
  );
}

function Greeting() {
  const name = "Андрій";

  return <p>Доброго дня, {name}!</p>;
}

function Product() {
  const price = 120;
  const quantity = 3;

  return (
    <div>
      <p>Ціна одного товару: {price} грн</p>
      <p>Кількість: {quantity}</p>
      <p>Разом: {price * quantity} грн</p>
    </div>
  );
}

Разом: 360 грн

function Profile() {
  const firstName = "Ірина";
  const lastName = "Коваль";

  return <h2>{firstName + " " + lastName}</h2>;
}

function Profile() {
  const firstName = "Ірина";
  const lastName = "Коваль";
  const fullName = `${firstName} ${lastName}`;

  return <h2>{fullName}</h2>;
}

function formatPrice(price) {
  return `${price} грн`;
}

function Product() {
  const price = 250;

  return <p>Вартість: {formatPrice(price)}</p>;
}

import { createRoot } from "react-dom/client";

function formatPrice(price) {
  return `${price.toFixed(2)} грн`;
}

function App() {
  const productName = "Навушники";
  const price = 1499;
  const quantity = 2;
  const total = price * quantity;

  return (
    <main>
      <h1>Замовлення</h1>
      <p>Товар: {productName}</p>
      <p>Ціна: {formatPrice(price)}</p>
      <p>Кількість: {quantity}</p>
      <p>Сума: {formatPrice(total)}</p>
    </main>
  );
}

createRoot(document.getElementById("root")).render(<App />);

{name}
{price * quantity}
{formatPrice(price)}
{isOnline ? "Онлайн" : "Офлайн"}

// Помилка: if не є виразом
return <p>{if (isOnline) "Онлайн"}</p>;

function Status() {
  const isOnline = true;

  return <p>{isOnline ? "Користувач онлайн" : "Користувач офлайн"}</p>;
}

умова ? значенняЯкщоТак : значенняЯкщоНі

function Status() {
  const isOnline = true;
  let message;

  if (isOnline) {
    message = "Користувач онлайн";
  } else {
    message = "Користувач офлайн";
  }

  return <p>{message}</p>;
}

function Notification() {
  const hasNewMessages = true;

  return (
    <section>
      <h2>Повідомлення</h2>
      {hasNewMessages && <p>У вас є нові повідомлення</p>}
    </section>
  );
}

function UserPanel() {
  const isAdmin = false;

  return (
    <div>
      <h2>Панель користувача</h2>
      {isAdmin && <button>Налаштування адміністратора</button>}
    </div>
  );
}

function UserCard() {
  const user = {
    name: "Софія",
    city: "Львів",
    age: 28,
  };

  return (
    <article>
      <h2>{user.name}</h2>
      <p>Місто: {user.city}</p>
      <p>Вік: {user.age}</p>
    </article>
  );
}

function Values() {
  const title = "Заголовок";
  const count = 10;
  const nothing = null;

  return (
    <div>
      <h2>{title}</h2>
      <p>Кількість: {count}</p>
      <p>{nothing}</p>
    </div>
  );
}

function Example() {
  const isReady = true;

  return (
    <div>
      {isReady && <p>Готово</p>}
    </div>
  );
}

function Example() {
  const name = "Олена";

  return (
    <div>
      <p>name</p>
      <p>{name}</p>
    </div>
  );
}

function OrderSummary() {
  const price = 500;
  const quantity = 4;
  const discount = 100;
  const total = price * quantity - discount;

  return (
    <section>
      <h2>Підсумок замовлення</h2>
      <p>Загальна сума: {total} грн</p>
    </section>
  );
}

<p>Загальна сума: {price * quantity - discount} грн</p>

function Greeting() {
  const name = "Олена";

  return <h1>Привіт, name!</h1>;
}

function Greeting() {
  const name = "Олена";

  return <h1>Привіт, {name}!</h1>;
}

return <p>{if (isActive) "Активний"}</p>;

return <p>{isActive ? "Активний" : "Неактивний"}</p>;

function User() {
  const user = { name: "Олена" };

  return <p>{user}</p>;
}

function User() {
  const user = { name: "Олена" };

  return <p>{user.name}</p>;
}

const name = "Іван";

return <p>{"name"}</p>;

return <p>{name}</p>;

function BookCard() {
  const title = "Кобзар";
  const author = "Тарас Шевченко";
  const price = 300;
  const quantity = 2;
  const total = price * quantity;

  return (
    <article>
      <h2>{title}</h2>
      <p>Автор: {author}</p>
      <p>Ціна: {price} грн</p>
      <p>Кількість: {quantity}</p>
      <p>Разом: {total} грн</p>
      {quantity > 0 && <p>Є в наявності</p>}
    </article>
  );
}