React - библиотека JS. Познавательное развлечение для новичка.

React. Реакт. Тестовая задача 001. Привет, React!

Как подключить React и начать с ним работать

• react.development.js — сама библиотека React. Она отвечает за создание компонентов и управление их состоянием.
• react-dom.development.js — обеспечивает связь между React и браузером, то есть «отрисовывает» компоненты на странице.
• babel.min.js — позволяет писать современный JavaScript (JSX) прямо в браузере, преобразуя его в понятный для браузера код.

Где взять эти файлы?

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Что такое CDN-сервис

Использование файлов React (react.development.js, react-dom.development.js, babel.min.js) на своём сервере (домене)

• react.development.js - скачать здесь.
• react-dom.development.js - скачать здесь.
• babel.min.js - скачать здесь.

Ключевые моменты примера 001

1. Создание точки входа для React. Элемент <div id="root"></div> служит точкой входа для React-компонента. Именно сюда будет вставляться созданный интерфейс.
2. Подключение скриптов. Скрипты react.development.js и react-dom.development.js обеспечивают работу React. Babel не используется, так как код написан без JSX.
3. Основной React-код. Используется ReactDOM.createRoot() для создания корня приложения. Метод .render() выводит элемент в указанный контейнер. React.createElement() создаёт виртуальный элемент с заданным тегом, свойствами и содержимым.
4. Простота примера. Минималистичный код идеально подходит для первого знакомства с React. Нет сложных настроек или сторонних библиотек — чистый базовый пример. Такой подход отлично демонстрирует принцип работы React без лишней нагрузки.

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 002. Текущее время

🎯 Анализ движения вперёд по сравнению с первой задачей

const { useState, createElement } = React;

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 003. Заголовок - Подзаголовок - Параграф

🎯 Разница между задачей №3 и предыдущей (№2)

React.createElement(
  'section',
  null,
  [
    /* div с двумя вложенными элементами */
    React.createElement(
      'div',
      null,
      [
        React.createElement('h1', null, 'Заголовок'),
        React.createElement('h2', null, 'Подзаголовок'),
      ]
    ),
    /* Ещё один div с параграфом */
    React.createElement(
      'div',
      null,
      React.createElement('p', null, 'Параграф')
    )
  ]
);

Основные шаги вперёд по сравнению с задачей №2:

⚠️ Что пока отсутствует, но скоро пригодится:

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

Тестовая задача 004. Здесь только развлечения: выступление двух девушек на конкурсе "За чистый и красивый код React!"

🎯 Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 005. Создание элемента без использования JSX

🎯 Оценка прогресса от задачи №3 к задаче №5

<h1>Заголовок</h1>
<p>Параграф</p>

React.createElement('h1', null, 'Привет, React!')

React.createElement(
  'div',
  null,
  [
    React.createElement('h1', null, 'Привет, React!'),
    React.createElement('h2', null, 'Создание элемента без использования JSX')
  ]
);

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 006. Эквивалентная запись с использованием JSX

🎯 Переход от задачи №5 к задаче №6: ключевые изменения и развитие

const element = (
  <div>
    <h1>Привет, React!</h1>
    <h2>Эквивалентная запись с использованием JSX</h2>
  </div>
);

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 006. Эквивалентная запись с использованием JSX

🎯 Переход от задачи №6 к задаче №7: ключевые изменения и развитие

const folderName = 'Папка всем папкам папка';
createRoot(...).render(<h1>{folderName}</h1>);

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 008. Также выражение может дополнять уже существующий контент: Как тебе такое, Илон Маск?!

🎯 Переход от задачи №7 к задаче №8: ключевые изменения и развитие

<span>Также выражение может дополнять уже существующий контент: Как тебе такое, {person}?!</span>

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 009. Блок хороших новостей

🎯 Переход от задачи №8 к задаче №9: ключевые изменения и развитие

className={goodNews}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 010. "Я проживаю по адресу"

🎯 Переход от задачи №9 к задаче №10: ключевые изменения и развитие

function address(street, house) {
  return (
    <>
      <p>Улица {street}</p>
      <p>Дом {house}</p>
    </>
  );
}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 011. "Что это за пустой тег?"

🎯 Переход от задачи №10 к задаче №11: ключевые изменения и развитие

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 012. "Встраивание изображений"

🎯 Переход от задачи №11 к задаче №12: ключевые изменения и развитие

function address(street, house) {
  return (
    <>
      <p>Улица {street}</p>
      <p>Дом {house}</p>
    </>
  );
}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

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

🎯 Переход от задачи №12 к задаче №13: ключевые изменения и развитие

{isDaylight
  ? <h2>Добрый день!</h2>
  : <h2>Спокойной ночи!</h2>
}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 014. "Условная логика. Бывает, что в таких конструкциях возвращается null"

🎯 Переход от задачи №13 к задаче №14: ключевые изменения и развитие

{userName
  ? <h2>Добро пожаловать, {userName}!</h2>
  : null
}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 015. "Оператор && (логическое И) - это аналог if"

🎯 Переход от задачи №14 к задаче №15: ключевые изменения и развитие

{isLunchTime && <h2>Время обеда!</h2>}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 016. "Операторы && связанные в цепочку"

🎯 Переход от задачи №15 к задаче №16: ключевые изменения и развитие

{isThursday && wasRaining && <h2>Пора вернуть долг!</h2>}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 017. "Оператор && (логическое И) - это аналог if"

🎯 Переход от задачи №16 к задаче №17: ключевые изменения и развитие

{(isFrost && isSun)
  ? <h2>День чудесный</h2>
  : <h2>День обычный</h2>
}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 018. "Какой смысл в конструкции: item && item.value"

🎯 Переход от задачи №17 к задаче №18: ключевые изменения и развитие

{item && item.value}

(item && item.value) || 'Нет данных'

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 019. "JSX очень похоже на HTML. Но есть важные отличия"

🎯 Переход от задачи №18 к задаче №19: ключевые изменения и развитие

<div className="proletariat">
  Шаг держи революционный!
  ...
</div>

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 020. "Ещё в JSX отличается атрибут for у label. В JSX-варианте требуется писать htmlFor вместо for"

🎯 Переход от задачи №19 к задаче №20: ключевые изменения и развитие

<label htmlFor="title">Какой-то текст: </label>
<input id="title" type="text" />

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 021. "Самозакрывающиеся теги"

🎯 Переход от задачи №20 к задаче №21: ключевые изменения и развитие

root.render(<img src="/fs/react/task012/logo.png" />);

<img src="/path/to/image.png" />

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 022. "Как и в обычном JavaScript, в JSX можно оставлять комментарии"

🎯 Переход от задачи №21 к задаче №22: ключевые изменения и развитие

{/* Это комментарий к элементу label */}

{/* Однострочный комментарий */}
{/*
   Многострочный
   комментарий
*/}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 023. "Преобразование HTML в JSX"

🎯 Переход от задачи №22 к задаче №23: ключевые изменения и развитие

const [flower, setFlower] = useState('');

value={flower}
onChange={(e) => setFlower(e.target.value)}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая задача 024. "Создание компонента через React.createElement()"

🎯 Переход от задачи №23 к задаче №24: ключевые изменения и развитие

return React.createElement(
  React.Fragment,
  null,
  ...
);

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая игра 001. "Кликай по зелёной!"

🎯 Переход от задачи №24 к игре game001: ключевые изменения и развитие

function Game() {...}
root.render(React.createElement(Game));

React.useEffect(() => {
  if (timeLeft > 0 && !gameOver) {
    const timer = setInterval(() => {
      setTimeLeft(timeLeft - 1);
    }, 1000);
    return () => clearInterval(timer);
  }
}, [timeLeft, gameOver]);

redPositions.map((pos, index) => ...)

const greenSound = new Audio('/fs/react/game001/click-green.mp3');
greenSound.play();

function restartGame() {...}

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

React. Реакт. Тестовая игра 002. "Шахматный адрес. Шахматная нотация — на скорость!"

🎯 Переход от игры game001 к игре game002: ключевые изменения и развитие

(score / (score + errors)) * 100

Развлекательное меропритие. Конкурс девушек-разработчиц: "За чистый и красивый код React!"

Итоги

• Содержание
• React. Реакт. Тестовая задача 001. Привет, React!
• React. Реакт. Тестовая задача 002. Текущее время
• React. Реакт. Тестовая задача 003. Заголовок - Подзаголовок - Параграф
• Тестовая задача 004. Здесь только развлечения: выступление двух девушек на конкурсе "За чистый и красивый код React!"
• React. Реакт. Тестовая задача 005. Создание элемента без использования JSX
• React. Реакт. Тестовая задача 006. Эквивалентная запись с использованием JSX
• React. Реакт. Тестовая задача 007. Папка всем папкам папка
• React. Реакт. Тестовая задача 008. Также выражение может дополнять уже существующий контент: Как тебе такое, Илон Маск?!
• React. Реакт. Тестовая задача 009. Блок хороших новостей
• React. Реакт. Тестовая задача 010. "Я проживаю по адресу"
• React. Реакт. Тестовая задача 011. "Что это за пустой тег?"
• React. Реакт. Тестовая задача 012. "Встраивание изображений"
• React. Реакт. Тестовая задача 013. "Условная логика"
• React. Реакт. Тестовая задача 014. "Условная логика. Бывает, что в таких конструкциях возвращается null"
• React. Реакт. Тестовая задача 015. "Оператор && (логическое И) - это аналог if"
• React. Реакт. Тестовая задача 016. "Операторы && связанные в цепочку"
• React. Реакт. Тестовая задача 017. "Оператор && (логическое И) - это аналог if"
• React. Реакт. Тестовая задача 018. "Какой смысл в конструкции: item && item.value"
• React. Реакт. Тестовая задача 019. "JSX очень похоже на HTML. Но есть важные отличия"
• React. Реакт. Тестовая задача 020. "Ещё в JSX отличается атрибут for у label. В JSX-варианте требуется писать htmlFor вместо for"
• React. Реакт. Тестовая задача 021. "Самозакрывающиеся теги"
• React. Реакт. Тестовая задача 022. "Как и в обычном JavaScript, в JSX можно оставлять комментарии"
• React. Реакт. Тестовая задача 023. "Преобразование HTML в JSX"
• React. Реакт. Тестовая задача 024. "Создание компонента через React.createElement()"
• React. Реакт. Тестовая игра 001. "Кликай по зелёной!"
• React. Реакт. Тестовая игра 002. "Шахматный адрес. Шахматная нотация — на скорость!"
• Итоги