Comparison: Svelte and React

The React site has a tutorial that describes the development of the game Tic Tac Toe. I decided to repeat the development of this game on Svelte. The article covers only the first half of the tutorial, before the implementation of the history of moves. For purposes of familiarization with the framework, this is quite enough. Each section of the article corresponds to a section of the tutorial, contains links to the source code of both frameworks.

Inspecting the Starter Code

React - Svelte

<script> import Board from './Board.svelte'; </script> <div class="game"> <div class="game-board"> <Board /> </div> <div class="game-info"> <div></div> <ol></ol> </div> </div> <style> .game { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; display: flex; flex-direction: row; } .game-info { margin-left: 20px; } ol { padding-left: 30px; } </style> 

 <script> import Square from './Square.svelte'; </script> <div class="status">Next player: X</div> <div class="board"> {#each Array(9) as square, i} <Square value={i}/> {/each} </div> <style> .board { width: 102px; } .status { margin-bottom: 10px; } </style> 

 <script> export let value = ''; let state = ''; function handleClick() { state = 'X'; } </script> <button on:click={handleClick}> {state} </button> <style> button { background: #fff; border: 1px solid #999; float: left; font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; margin-right: -1px; margin-top: -1px; margin-bottom: -1px; padding: 0; text-align: center; width: 34px; } button:focus { outline: none; } </style> 

Each component is executed in a separate file. A component can contain code, html markup and css styles. The use of nested components , each block , is shown. Styles rarely change, so I placed them after the html markup, so as not to scroll through them once again.

Passing Data Through Props

React - Svelte
Property value declared in Square. The Board shows the use of array indices to fill cells.

Making an Interactive Component

React - Svelte
By clicking in the cell a cross appears. A DOM event handler has been added to Square.

Lifting state up

React - Svelte
Up to this point, the state of the cells was stored in them, now they are transferred into one array, which is located in the Board component, i.e. The board now stores the state of the whole game. The clickClick handler handleClick has been moved to the Board component. Square now displays the state of the cell again using the value property.

Taking turns

React - Svelte
Added a zero after the cross.

Declaring a winner

React - Svelte
Added the function of determining the winner, added a ban on clicking on the already established cells after the victory.

I do not plan to go further tutorial, I familiarized myself with the framework. Now more interested in interaction with the backend.

UPDATE: Fixed article and source codes in accordance with the comments in the comments.