React 教程

过去，React官方的教程主要是使用类组件创建的。
实际上，大多数情况下我们都会使用函数组件，并且有很多关于如何改写官方教程的文章。
目前，虽然只是一个Beta版本，但官方提供了使用函数组件的教程，并且我也尝试着去创建了。
这是一个井字棋程序，代码和内容都不是很复杂。

这只是一个简单的教程，不过有一些令人担忧的地方。
因此在完成井字棋程序后，我将其改为了React + TypeScript，并转变为了五子棋程序。
在这里我将大致介绍一下三子棋和五子棋，并记录一下修改部分。

引言

• 製作者（私）

Web 系のスキルは業務ほぼ未経験（Pythonで簡単なFlaskサーバーをたてる程度）。

HTML + CSS + JavaScriptはググれば何とかなる（はず）。

ReactやTypeScriptは自習で軽く触った程度。

製作意図

Web 系転職に必要な言語スキル習得のため。
数ヶ月後に当時のスキルを把握するため。

总结

三目並べ的教程

• 盤面は 3*3

• O と X で盤面を埋める。

• ターンプレイヤーを表示。

• 勝者を表示。

• 前に戻る（所謂「ちょっと待った！」）。

◯✕ ゲームといった方が馴染み深い。

以下是五子棋的附加功能

• 盤面は 10*10

● と ○ で盤面を埋める。

源代码的修改内容

React + TypeScriptに変更。
盤面を設定で任意のサイズに変更。
ファイル分割。
ソースコードのリファクタリング。

ハードコーディングの解消。

TypeScriptの型。

JSDocの追加。
and so on.

源代码

我使用React + TypeScript创建的井字游戏已经在GitHub上公开了。

想法

因为我使用了编写代码的方式来比较了 Class Component 的教程，所以我能够确认可读性已经得到了提高。
React 是很有趣的，但我对写法还不够熟悉，感到有些沮丧。
不过，通过重新编写教程，我认为我的语言理解有了加深。
顺便提一下，这个教程完成需要大约 7 小时。
由于这个月还有应用信息技术工程师考试，原本计划只进行教程学习……
不过，这是度过一个美好的星期日的方式。