イントロへのイントロ🦄⚡️🧡

なぜまだ別のフレームワークを学ぶか?🤦‍♂️🤦‍♀️

If you are worried about tons of front-end frameworks and their variations out there, why yet another framework?

角度、reactjsやvuejsのようなフレームワークは、より簡単に、高速アプリケーションをスピンさせる.チーム内のより堅牢で効率的なアプリケーションの開発.
彼らは、アプリケーションを設計、開発、および配信する方法を変更しました.
ますます多くのフレームワークは、フレームワークを洗練し、さらに、簡単で、高速かつ効率的なアプリケーションを開発することが容易にします.
角度❤️
角度は完全なスイートですが、それは肥大です.
反応する💙
反応することはview only 図書館と用途virtual DOM しかし、反応は複雑になる.
Vue💚
Vuejsは書くことが簡単であり、反応と角度の最高の部分を持っています.
スベルト🧡
Svelteは、ユーザーインターフェイスを構築する新しいアプローチです.Svelteには仮想DOMはありません.
Svelteでは、以下のコードを書くことができますuses the platform .
Svelteは仮想DOMとuses the platform .
Svelteは、アプリケーションのパフォーマンスを高めるビルドプロセス中にアプリケーションを最適化します.

アプリを取得し、実行を開始
フレームワークの導入については、コーディングを始めましょう.
どこから始めますか.
ハローワールド

npx degit sveltejs/template hello-world
cd hello-world

あなたからのテンプレートをクローンしたsveltejs/template . では、依存関係をインストールし、サーバーを使用してスピン

npm i
npm run dev

簡単に見るべきだHello World アプリケーションの実行localhost:5000 .

深く潜って、何が生成されるか見てみましょう.
The Svelte コンポーネントは.svelte ファイル.生成されたアプリケーションはApp.svelte .
The Svelte コンポーネントは単純なものではないHTML ファイル.すべてのsvelteコンポーネントには次の3つのセグメントがあります.

スクリプト- JavaScriptを定義する

スタイル- cssを定義するには

プレーンHTML -ちょうどあなたのHTMLとsvelte要素

上記の任意のフレームワークで動作している場合は、何が知っているかもしれませんprops .

Props are attributes that you pass it along the Components.

The export let name インサイドscript タグはname コンポーネントからエクスポートされ、我々は、属性を介して情報を送信することができます.
The props 最初にコンポーネントに接続されますexported を返します.

<script>
        export let name;
</script>

<style>
        h1 {
                color: purple;
        }
</style>

内部で定義した変数(小道具を含む)<script> コンポーネントはHTML component with {variable_name} 表記.The {} は、script タグ.

<h1>Hello {name}!</h1>

アプリケーションはmain.js . 我々は、インポートApp.svelte ここでApp コンポーネントが定義されています).

import App from './App.svelte';

その後、インポートからアプリケーションオブジェクトを作成しますApp コンポーネント.次に定義target そしてまたprops コンポーネントのコンストラクターに.
The target コンポーネントをHTMLドキュメントに表示する場所を定義します.
The props 属性を定義する場所です.

const app = new App({
        target: document.body,
        props: {
                name: 'world'
        }
});

最後に、エクスポートapp からmain.js .

export default app;

があるrollup.config.js これは、アプリケーションのバンドルとビルドを管理します.

import App from './App.svelte';

短い代替をしたいcodesandbox
チックタックトー
クラシックを創ろうTic Tac Toe 反応(公式)の例からSvelte .
コンポーネントフォルダを作成するSvelte コンポーネントApp.svelte .
次のコンポーネントが必要になります.

Square.svelte - チックタックつま先の各正方形は別になりますsvelte コンポーネント.

Board.svelte - ボードコンポーネントはすべての四角形コンポーネントを保持します.このコンポーネントはデータを子プロセスに渡す責任がありますsquare コンポーネントは、また、ゲームが終了しているかどうかを決定します.

Game.svelte - ゲームコンポーネントは、全体的なラッパーですBoard コンポーネント.

まず最初にGame.svelte コンポーネント.ゲームのコンポーネントはBoard コンポーネント.

<div class="game">
    <Board />
</div>

今、私たちはBoard コンポーネント.

<script> 
    import Board from './Board.svelte';
</script>

ボードを少しスタイルを作ろう.

<style>
.game {
    display: flex;
    flex-direction: row;
}
</style>

ボードコンポーネントは、それぞれ3つの正方形の3行があります.

<div class="board-row">
    <Square />
    <Square />
    <Square />
</div>
<div class="board-row">
    <Square />
    <Square />
    <Square />
</div>
<div class="board-row">
    <Square />
    <Square />
    <Square />
</div>

我々は、インポートする必要がありますSquare コンポーネント<script> セクション.

<script>
import Square from './Square.svelte';
</script>

少しスタイルをしましょう.

<style>
.board-row:after {
    clear: both;
    content: "";
    display: table;
}
</style>

それから、我々はSquare コンポーネント内部Square.svelte .

<style>
 .square {
    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;
    padding: 0;
    text-align: center;
    width: 34px;
  }

 .square:focus {
    outline: none;
 }

 .square:focus {
    background: #ddd;
 }
</style>

<script>
let value = "";
</script>

<button class="square"> {value} </button>

定義value を使用し、button 要素.
ボタンをクリックすると、値を変更する必要がありますX . 私たちはon:click イベントハンドラ.

<button class="square" on:click={() => handleClick}> {value} </button>

イベントハンドラSvelte が定義されるon:<event> .
定義しましょうhandleClick インサイド<script> タグ.

function handleClick() {
   value = 'X';
}

ボタンをクリックすると、ボタンの値がX .

There is no this, no complex bindings but a simple variable declaration and changing it.

子コンポーネントの状態を維持してから親に伝播するのは簡単ではありません.むしろ、状態を親に移動し、子要素を維持する方法を親にします.これを行うには、変更しましょうBoard コンポーネントと送信value とon:click イベントハンドラBoard コンポーネント.
両方とも考えましょうon:click and value はprop にSquare コンポーネント.

<script> 
export let value; 
export let handleClick;
</script>

<button class="square" on:click={handleClick}> {value} </button>

今、私たちはBoard コンポーネント.それぞれを定義する代わりにBoard 配列を定義しますsquares 使用してください.

<script>
    let squares = Array(9).fill('');
</script>

にHTMLを変更

  <div class="board-row">
    <Square value={squares[0]} handleClick={() => handleClick(0)}/>
    <Square value={squares[1]} handleClick={() => handleClick(1)}/>
    <Square value={squares[2]} handleClick={() => handleClick(2)}/>
  </div>

  <div class="board-row">
    <Square value={squares[3]} handleClick={() => handleClick(3)} />
    <Square value={squares[4]} handleClick={() => handleClick(4)} />
    <Square value={squares[5]} handleClick={() => handleClick(5)} />
  </div>


  <div class="board-row">
    <Square value={squares[6]} handleClick={() => handleClick(6)} />
    <Square value={squares[7]} handleClick={() => handleClick(7)} />
    <Square value={squares[8]} handleClick={() => handleClick(8)} />
  </div>

また、定義する必要がありますhandleClick メソッド.

function handleClick(i) {
    squares[i] = 'X';
}

👏 それは素晴らしいですcongrats.私たちは本当のゲームを構築しましょう.
ゲームを交互に、1つのプレーヤーのマークを再生されますX と他のO . その状態を加えましょうBoard コンポーネント.

<!-- Board.svelte -->
let isXTurn = true;

function handleClick(i) {
   squares[i] = isXTurn ? 'X' : 'O';
   isXTurn = !isXTurn;
}

クール、今我々は勝者を計算する必要があります.

function calculateWinner(squares) {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];
    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
}

上記の関数はX or O 勝者があるならば、あるいは、他はちょうどAを返しますnull .
我々は、ユーザーが広場をクリックするたびにこれをチェックする必要があります.また、一度選手たちは、広場で他のクリックを許可する必要はありません広場をクリックします.

function handleClick(i) {
    if (calculateWinner(squares) || squares[i] !== '') {
      return;
    }
   squares[i] = isXTurn ? 'X' : 'O';
   isXTurn = !isXTurn;
}

我々は選手のためのゲームのステータスを表示する必要があります.ゲームのステータス情報は動的です.それは変わるでしょう、そして、誰かがそれを聞いて、かつて更新される見解を変えるべきです.
反応世界で我々はstate . Svelteでコンポーネントをバインドする$ . 値は更新されます.

$: winner = calculateWinner(squares)

$: status =  winner ? "Winner: " + winner :"Next player:" + (xIsNext ? "X" : "O");

我々は、内部のステータスを使用しますHTML .

 <div class="status"> {status} </div>

<style>
.status {
    margin-bottom: 10px;
  }
</style>

今、ステータスが再計算されたときに変更されます.
Svelteのコンポーネントは、余分なボイラープレート、スリムではありませんthis そして、それはプラットホームに非常により近いです.実際、彼らは単純でしかないHTML .
チェックアウトSvelte example sites さらに素晴らしいデモ.
ドキュメントの詳細をチェックアウトhere .
我々はさらに詳細についてのチュートリアルについて続きますSvelte .
閉じるこの動画はお気に入りから削除されています.❤️
あなたが何か間違っていると感じるならば、記事の中で行方不明になっているとコメントしてください
あなたは私の上に従うことができます.