https://habr.com/ru/post/456474/

• Разработка веб-сайтов
• JavaScript
• Программирование
• ReactJS

На сайте React'a есть туториал, в котором описывается разработка игры Tic Tac Toe. Я решил повторить разработку этой игры на Svelte. Статья охватывает только первую половину туториала, до реализации истории ходов. Для целей ознакомления с фреймворком этого вполне достаточно. Каждый раздел статьи соответствует разделу туториала, содержит ссылки на исходный код обоих фреймворков.

Inspecting the Starter Code

React — Svelte
Каждый компонент выполняется в отдельном файле. Компонент может содержать в себе код, html разметку и css стили. Показано использование вложенных компонентов, переменных (на примере переменной status), блока each. Стили меняются редко, поэтому разместил их после html разметки, чтобы лишний раз не пролистывать их.

Passing Data Through Props

React — Svelte
Объявлено свойство value в Square. Использован блок if, без него по-умолчанию показывает null в клеточке. В Board показано использование индексов массива для заполнения клеток.

Making an Interactive Component

React — Svelte
По клику в клетке появляется крестик. В Square добавлен обработчик события DOM.

Lifting State Up

React — Svelte
До этого момента состояние клеточек хранилось в самих клеточках, сейчас они переведены в один массив, и этот массив находится в компоненте Board, т.е. в Board сейчас хранится состояние всей игры. Обработка клика выполнена с помощью диспетчера событий, он передает сообщение о клике от Square в Board. В сообщении передается индекс клеточки, обработчик сообщения handleClick в Board изменяет состояние игры. Square теперь снова отображает состояние клеточки с помощью свойства value.

React умеет передавать в обработчик события аргумент таким образом:

onClick={() => this.handleClick(i)}

Svelte такого не умеет, или я просто не нашел, как это правильно сделать, поэтому пришлось использовать диспетчер событий, в Square передавать через свойство индекс клеточки и обратно передавать его в Board с помощью диспетчера событий. Если есть лучший способ, расскажите.

Taking Turns

React — Svelte
Добавлено появление нолика после крестика.

Declaring a Winner

React — Svelte
Добавлена функция определения победителя, добавлен запрет клика по уже установленным клеткам и после победы.

Дальше проходить туториал не планирую, с фреймворком ознакомился. Сейчас больше интересует взаимодействие с бэкендом.