React. Реакт. Тестовая задача 013. Условная логика

---

Условная логика

Разберёмся, что здесь происходит:

  <script src="/js/react/react.development.js"></script>
  <script src="/js/react/react-dom.development.js"></script>
  <script src="/js/react/babel.min.js"></script>
  ...
  <script type="text/babel">
    const { useState, createElement } = React;
    const { createRoot } = ReactDOM;

//const isDaylight = true;
const isDaylight = false;

createRoot(document.getElementById('root')).render(
  <>
    {isDaylight
      ? <h2>Добрый день!</h2>
      : <h2>Спокойной ночи!</h2>
    }
  </>
); 

Условная логика

Одна из самых частых задач в построении динамического интерфейса (да и вообще в программировании) - реализация условной логики, когда в зависимости от действий пользователя показывается разный интерфейс. Например, переключение тёмной и светлой тем на сайте. В JSX внутри фигурных скобок можно писать любые JavaScript-выражения, поэтому мы можем использовать операторы ?: и &&.

Тернарный оператор ?: — это сокращённый аналог if/else