- PVSM.RU - https://www.pvsm.ru -
На сайте React'a есть туториал [1], в котором описывается разработка игры Tic Tac Toe. Я решил повторить разработку этой игры на Svelte. Статья охватывает только первую половину туториала, до реализации истории ходов. Для целей ознакомления с фреймворком этого вполне достаточно. Каждый раздел статьи соответствует разделу туториала, содержит ссылки на исходный код обоих фреймворков.
React [3] — Svelte [4]
Каждый компонент выполняется в отдельном файле. Компонент может содержать в себе код, html разметку и css стили. Показано использование вложенных компонентов [5], переменных [6] (на примере переменной status), блока each [7]. Стили меняются редко, поэтому разместил их после html разметки, чтобы лишний раз не пролистывать их.
React [9] — Svelte [10]
Объявлено свойство [11] value в Square. Использован блок if [12], без него по-умолчанию показывает null в клеточке. В Board показано использование индексов массива [7] для заполнения клеток.
React [14] — Svelte [15]
По клику в клетке появляется крестик. В Square добавлен обработчик события DOM [16].
React [18] — Svelte [19]
До этого момента состояние клеточек хранилось в самих клеточках, сейчас они переведены в один массив, и этот массив находится в компоненте Board, т.е. в Board сейчас хранится состояние всей игры. Обработка клика выполнена с помощью диспетчера событий [20], он передает сообщение о клике от Square в Board. В сообщении передается индекс клеточки, обработчик сообщения handleClick в Board изменяет состояние игры. Square теперь снова отображает состояние клеточки с помощью свойства value.
React умеет передавать в обработчик события аргумент таким образом:
onClick={() => this.handleClick(i)}
Svelte такого не умеет, или я просто не нашел, как это правильно сделать, поэтому пришлось использовать диспетчер событий, в Square передавать через свойство индекс клеточки и обратно передавать его в Board с помощью диспетчера событий. Если есть лучший способ, расскажите.
React [22] — Svelte [23]
Добавлено появление нолика после крестика.
React [25] — Svelte [26]
Добавлена функция определения победителя, добавлен запрет клика по уже установленным клеткам и после победы.
Дальше проходить туториал не планирую, с фреймворком ознакомился. Сейчас больше интересует взаимодействие с бэкендом.
Автор: nomhoi
Источник [27]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/321120
Ссылки в тексте:
[1] туториал: https://reactjs.org/tutorial/tutorial.html
[2] Inspecting the Starter Code: https://reactjs.org/tutorial/tutorial.html#inspecting-the-starter-code
[3] React: https://codepen.io/gaearon/pen/oWWQNa?editors=0010
[4] Svelte: https://svelte.dev/repl/4f331611b3fe4501913971b2a46d915b?version=3.5.1
[5] вложенных компонентов: https://ru.svelte.dev/tutorial/nested-components
[6] переменных: https://ru.svelte.dev/tutorial/adding-data
[7] блока each: https://ru.svelte.dev/tutorial/each-blocks
[8] Passing Data Through Props: https://reactjs.org/tutorial/tutorial.html#passing-data-through-props
[9] React: https://codepen.io/gaearon/pen/aWWQOG?editors=0010
[10] Svelte: https://svelte.dev/repl/887572b6574d4be98229a63fa17f6d89?version=3.5.1
[11] Объявлено свойство: https://ru.svelte.dev/tutorial/declaring-props
[12] блок if: https://ru.svelte.dev/tutorial/if-blocks
[13] Making an Interactive Component: https://reactjs.org/tutorial/tutorial.html#making-an-interactive-component
[14] React: https://codepen.io/gaearon/pen/VbbVLg?editors=0010
[15] Svelte: https://svelte.dev/repl/4bd87514e4ba431589c119fbbfba1d90?version=3.5.1
[16] события DOM: https://ru.svelte.dev/tutorial/dom-events
[17] Lifting State Up: https://reactjs.org/tutorial/tutorial.html#lifting-state-up
[18] React: https://codepen.io/gaearon/pen/QvvJOv?editors=0010
[19] Svelte: https://svelte.dev/repl/2f509986ea414d5195bd113d1266a435?version=3.5.1
[20] диспетчера событий: https://ru.svelte.dev/tutorial/component-events
[21] Taking Turns: https://reactjs.org/tutorial/tutorial.html#taking-turns
[22] React: https://codepen.io/gaearon/pen/KmmrBy?editors=0010
[23] Svelte: https://svelte.dev/repl/05a8cc126e164a1d8d472533c4538f67?version=3.5.1
[24] Declaring a Winner: https://reactjs.org/tutorial/tutorial.html#declaring-a-winner
[25] React: https://codepen.io/gaearon/pen/LyyXgK?editors=0010
[26] Svelte: https://svelte.dev/repl/5f70682d3143417fa61dfdcab8eb6cfa?version=3.5.1
[27] Источник: https://habr.com/ru/post/456474/?utm_campaign=456474&utm_source=habrahabr&utm_medium=rss
Нажмите здесь для печати.