Reactチュートリアルをやっていってみるその7
これは
Reactチュートリアルをやっていく記事です。
参考
チュートリアル：React の導入
Developer Tools
ブラウザの開発ツールでReactのコンポーネントツリーを表示させるために以下のツールを導入すると良い。
※chrome用のリンク
chrome.google.com
CodePenを使う場合はDebug modeを利用して行うため、手順が異なる点注意。
ゲームを完成させる
現在の状態ではXだけが置かれる状態なので、OとXが交互に置かれるようにしていく。
stateのリフトアップ
Boardが各Squareに現時点のstateがどうなっているか問い合わせるだけで可能だが、
リファクタリングしにくく、コードも分かりにくいものになるのでよろしくない。
ベストな選択はゲームの状態を各Squareに持たせるのではなく、親のBoardコンポーネントで保持する。
Board側はSquareにpropsを渡すことで表示するべきものが判断できる。
Boardコンポーネントにコンストラクタを追加し、マスにnullをセットするよう追加。
gyazo.com
renderSquareが渡された値を読めるように修正。
gyazo.com
これで仕組みとしてはX,0,nullの値を受け取るようになった。
BoardからSquareにイベント通知をしてSquareに関数を呼んでもらうようにする。
handleClickを定義していく
この変更でBoardコンポーネントが制御されたコンポーネントとなり、
BoardコンポーネントがSquareコンポーネントを全面的に制御するようになっている。
handleClickでは.slice()を呼んで配列のコピーを作成している。
今日はここまで。
Reactチュートリアルをやっていってみるその6
これは
Reactチュートリアルをやっていく記事です。
参考
チュートリアル：React の導入
インタラクティブなコンポーネントを作る
Squareコンポーネントがクリックされた場合に"X"と表示されるようにする
まずはSquareをクリックするとブラウザでアラートが表示されるように変更
gyazo.com
アラートが表示されました。
gyazo.com
いちいちアラートが出ては困るので、stateを使ってSquareコンポーネントに自分がクリックされたことを記憶しておき、"X"マークで、マスを埋めるように変更する。
Reactコンポーネントはコンストラクタでthis.stateを設定することで状態を持つことができるようになる。
Squareコンポーネントにコンストラクタを追加する。
JavaScriptのクラスではサブクラスのコンストラクタを定義する際にはsuperを呼ぶ必要がある。
gyazo.com
Sqareコンポーネントのrenderメソッドを書き換えてクリックされた時にstateの場所を表示するようにする。
クリックした場所にXが表示されるようになりました。
今日はここまで。
Reactチュートリアルをやっていってみるその4
これは
Reactチュートリアルをやっていく記事です。
参考
チュートリアル：React の導入
スターターコードの中身を確認する
スターターコードは以下 https://codepen.io/gaearon/pen/oWWQNa?editors=0010
オンラインだとCSS、HTMLも準備されているのでJS部分に集中して学習すれば良いらしい。
スターターコードでは３つのコンポーネントがある。
・Square（正方形のマス目）
・Board（盤面）
・Game
Squareコンポーネント
TODOとなっていて、これから実装していく感じになってます。
ここではbuttonをレンダーするようにしたいようです。
Boardコンポーネント
マス目のレンダリングをしています。
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
Gameコンポーネント
盤面とプレースホルダーを描画するように作られています。
丸やバツを描画するような仕組みを作っていくことになるようです。
今日はここまで。
Reactチュートリアルをやっていってみるその3
これは
Reactチュートリアルをやっていく記事です。
参考
チュートリアル：React の導入
概要
Reactは宣言型で効率的かつ柔軟なJavaScriptライブラリ。
UIをコンポーネントという独立した部品として扱うことで簡単に作ることができるようにしている。
まずはReact.Componentから。
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Example usage: <ShoppingList name="Mark" />
ShoppingListはReactのコンポーネントのクラスあるいはReactコンポーネントの型。
コンポーネントはpropsパラメータを受け取り、renderメソッドから表示するビューの階層構造を返す。
renderではReact要素と呼ばれる軽量な記述形式を返す。
React開発者は"JSX"と呼ばれる構文を使用している。
~
の部分はコンパイル後にReact.createElement('div')に変換される。
JSXではJavaScriptのほぼ全ての機能を利用することができる。
今日はここまで。
Reactチュートリアルをやっていってみるその2
Reactチュートリアルをやっていってみるその1
これは
Reactチュートリアルをやっていく記事です。
参考
チュートリアル：React の導入
昨日までTypeScriptをやってましたが、今日からはReactのチュートリアルをやっていきます。
今回これを思い立ったのはこんな記事を読んだので、組み合わせて手を動かしながらReactとTypeScriptに慣れていけばいいんじゃないかと思ったからです。
チュートリアルを始める前に
早速やっていきます。 Reactチュートリアルは結構きれいな日本語になっているので読みやすくて良いですね。
チュートリアルは○×ゲームの制作を通して
準備、概要、ゲームを完成させる、タイムトラベル機能の追加を行っていく形式になっています。
作るのはこれ。
https://codepen.io/gaearon/pen/gWWZgR?editors=0010
HTMLとJavaScript、あるいは他の言語に慣れていれば前提知識はクリア。
明日からはチュートリアルの準備をして、概要をやっていきたいと思います。
今日はここまで。
