function DishCard(props) {
  return (
    <div className="dish-card">
      <h2>{props.name}</h2>
      <p>{props.description}</p>
      <p>Цена: {props.price} ₽</p>
    </div>
  );
}

function Welcome(props) {
  return <h1>Добро пожаловать, {props.name}!</h1>;
}

<Welcome name="Анна" />
<Welcome name="Иван" />

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Создаем состояние: count — текущее значение, setCount — функция для его изменения.

  return (
    <div>
      <p>Вы нажали {count} раз(а).</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

function Welcome() {
  return <h1>Добро пожаловать!</h1>;
}

<div id="root"></div>

import React from 'react';
import ReactDOM from 'react-dom';

function Welcome() {
  return <h1>Добро пожаловать!</h1>;
}

ReactDOM.render(<Welcome />, document.getElementById('root'));

function Header() {
  return <h1>Ресторан «Весна»</h1>;
}

function Menu() {
  return (
    <ul>
      <li>Пицца «Маргарита»</li>
      <li>Салат «Цезарь»</li>
      <li>Тирамису</li>
    </ul>
  );
}

function Footer() {
  return <footer>Контакты: +7 (999) 999-99-99</footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Menu />
      <Footer />
    </div>
  );
}

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

function Card(props) {
  return (
    <div className="card">
      <h2>{props.title}</h2>
      <div>{props.children}</div>
    </div>
  );
}

function App() {
  return (
    <div>
      <Card title="Рекомендуемое блюдо">
        <p>Пицца «4 сыра»</p>
        <p>Цена: 500 ₽</p>
      </Card>
      <Card title="Напитки">
        <ul>
          <li>Кофе</li>
          <li>Чай</li>
          <li>Сок</li>
        </ul>
      </Card>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="comment">
      <div className="user-info">
        <img src={props.author.avatarUrl} alt={props.author.name} className="avatar" />
        <div className="user-name">{props.author.name}</div>
      </div>
      <div className="comment-text">{props.text}</div>
      <div className="comment-date">{props.date}</div>
    </div>
  );
}

function Avatar(props) {
  return <img src={props.avatarUrl} alt={props.name} className="avatar" />;
}

function UserInfo(props) {
  return (
    <div className="user-info">
      <Avatar avatarUrl={props.user.avatarUrl} name={props.user.name} />
      <div className="user-name">{props.user.name}</div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="comment">
      <UserInfo user={props.author} />
      <div className="comment-text">{props.text}</div>
      <div className="comment-date">{props.date}</div>
    </div>
  );
}