Introduction

このドキュメントは https://ja.react.dev/ のTutorial: Tic-Tac-Toe に補足を入れたものです。
https://ja.react.dev/learn/tutorial-tic-tac-toe
細かい部分は原文を参照してほしいです。

About

株式会社要のReact のチュートリアルとして作成しました。

環境に関して

必要な環境はブラウザのみです。
連携するサービスで Codesandbox を利用しています。
特にアカウントを作らなくてもチュートリアルを進めることができます。

アカウントを作る場合、fork等ができるため見直しや別の環境でも利用ができます。
CodeSandboxは非常に便利なためアカウント作成をおすすめします。

このドキュメントの読み方

左のNavにあるCodeSandboxリンクというのはCodeSandboxの途中経過を保存したリンクです。 途中でわけわからなくなったらリンクから再開してください。

チュートリアル: 三目並べ

これから小さな三目並べゲームを作成します。 このチュートリアルは、既存の React 知識を前提としていません。 チュートリアルで学ぶテクニックは React アプリを構築するための基礎であり、 それを完全に理解することで React を深く理解することができます。

チュートリアルはいくつかのセクションに分かれています。

• Setup for the tutorialは、チュートリアルを進めるための開始点となります。
• 「Overview」では、 React の基礎であるコンポーネント、プロパティ、状態について説明します。
• Completing the gameと、 React 開発における最も一般的なテクニックを学ぶことができます。
• Adding time travelと、 React の独自の強みをより深く理解できるようになります。

What are you building?

このチュートリアルでは、React を使用してインタラクティブな三目並べゲームを構築します。

完成品

コードがまだ理解できない、もしくはコードの構文に慣れていない場合でも心配する必要はありません。
このチュートリアルの目的は、React とその構文を理解できるようにすることです。

チュートリアルを続ける前に、上記の三目並べゲームをチェックすることをお勧めします。
あなたが気づく機能の 1 つは、ゲームのボードの右側に番号付きのリストがあることです。
このリストにはゲーム内で発生したすべての動きの履歴が表示され、ゲームの進行に応じて更新されます。

このチュートリアルでは、より単純なテンプレートから始めます。
次のステップでは、ゲームの構築を開始できるように設定します。

Next