rikuto tech blog

ゆる〜くやってます

React

ja.react.devにcontributeしました

翻訳初contribute どうも。ブログを放置している人です。今日は珍しく更新します。 初めてドキュメントの翻訳なるものに挑戦してみたので、その感想を書きます。 翻訳したのは以下の記事です。 ja.react.dev Next.js等のサーバーサイドレンダリングを行う環…

Reactチュートリアルの三目並べにReduxを導入してReduxを理解する|connect API & JS編

概要 React+Reduxの学習で、Reactチュートリアルの三目並べにReduxを使って書き直してみました。 このシリーズではチュートリアル形式で書き方を解説していきます。 今回はその第1弾として、connect APIを使い、JavaScriptで書いてみます。 参考文献 この記…

React Tutorialを TypeScriptとHooksで書き直してみた⑤(fin)

タイムトラベル機能の追加|Stateのリフトアップ、再び squaresを配列historyに保存しておき、あとで参照できるようにしていきます。 これまで、stateはBoardコンポーネントに実装していましたが、これをGameコンポーネントに移し、Boardにはpropsを渡すこと…

React Tutorialを TypeScriptとHooksで書き直してみた④

手番の処理 ここからBoardコンポーネントを編集して手番ごとにXとOを入れ替えてプロットされるようにします。 編集後のBoardコンポーネントは以下のようになります。 const Board: VFC = () => { const [squares, setSquares] = useState<FillSquare[]>(Array(9).fill(null</fillsquare[]>…

React Tutorialを TypeScriptとHooksで書き直してみた③

前回の続きです。 いよいよ三目並べづくりに入ります。 インタラクティブなコードをつくる 盤面のマスをクリックするとXが現れるようにします。 はじめにSquareコンポーネントにstateを持たせます。 公式チュートリアルではこのように実装されています。 cla…

React Tutorialを TypeScriptとHooksで書き直してみた②

前回からの続きです。 データを Props 経由で渡す マスに数字がプロットされた次のようなアウトプットを想定します。 公式チュートリアルでは、 class Board extends React.Component { renderSquare(i) { return <Square value={i} />; // 追加 } } // ︙ class Square extends </square>…

React Tutorialを TypeScriptとHooksで書き直してみた①

概要 前回記事で書いた「りあクト!」を読んで学んだことですが、現在のReactでは関数コンポーネントが主流になっており、公式チュートリアルでメインに扱われているクラスコンポーネントはあまり用いられないようです。 また、実践的な開発では、JavaScript…

「りあクト!」を読んでみた!

Reactの勉強によいと評判の「りあクト!」シリーズを購入してみました。 booth.pm booth.pm booth.pm 昨年改定され、全3巻になったらしい。ボリュームはかなりあります。 2巻の基礎編まで読み終わりました。ここまで読んだ感想を簡単に。 とにかくわかりやす…