私的TSXで入門するReact

 ReactのHelloWorldを見ていると「Reactのここがイケてる」と思っているところが外れている。そんなわけで個人としてReactのイケていると思ってる部分を盛り込んだHelloWorldの代わりを用意した。JSXで説明できたらシンプルでよかったのだが、それを飛ばしてTSXで用意してしまったのはアレだと思っている。

 そもそもReactとは?フロントエンドで新しいHTML要素を、動作を含めて定義してしまえるようなものという感覚がある。そしてそれをコンポーネントと呼ぶ。このコンポーネントは状態を変数として持ち、状態が変更されると自動で表示を書き換えてくれる。
 

 ボタンを押すと表示している数字をインクリメントしていくコンポーネントを作る。↓が実際に作ったコード。
import * as React from 'react';


interface CounterProps {
defaultCount: number;
}

interface CounterState {
count: number;
}

export default class Counter extends React.Component<CounterProps, CounterState> {
constructor(props: CounterProps){
super(props);
this.state = { count: this.props.defaultCount };
}

public increment(event: any) : void {
this.setState({ count: this.state.count + 1 });
}

public render() {
return (
<div>
Count: { this.state.count }
<button onClick = { e => this.increment(e) }>Increment!</button>
</div>
);
}
}


 CounterPropsはコンポーネントの初期状態を与えるのに使う変数の型、CounterStateはコンポーネントの状態を維持していく変数の型。TypeScriptなのでこういうのが必要。
 Counterが今回定義した、ボタン押下で数値をインクリメントして表示していくコンポーネント。メソッドconstructorはCounterPropsな型の変数を受け取って、それを初期状態としてセットしている。メソッドrenderはコンポーネントの表示を担当する。divのテキストCountの真後ろに、状態として持っているcountを置いている。そしてその直後にインクリメントに使うボタンを置いている。ボタンを押すとメソッドincrementが実行される。メソッドincrementは状態として持っている変数countをインクリメントし、それを状態として再度セットしている。
 今回定義したコンポーネントCounterについてまとめる。コンストラクタで初期状態をセット。メソッドrenderでコンポーネントの表示される形の定義、カウントしている番号とボタンの表示。メソッドincrementで番号をインクリメントし、それを状態として再度セットしている。
 インクリメントが実行されたときに、これまでのJSのようにDOMをいじって表示の更新をする関数やメソッドは書いたか?書いていない。だがReactの仕組みとしてコンポーネントの状態変更は補足され、incrementが実行されたときに、メソッドrenderで定義したとおりの表示に、最新の状態を反映して書き換えが行われる。



 従来のJavaScriptだったらどうだろう。イベントに対応するメソッドを書いて、その中でdocument.getElementByIdやらdocument.createElement、あるいはjQueryを使ってグリグリグリ。
 Reactを使ったら、renderに表示の形を書いて、あとは状態変更を書いておけばOK。こんなところがReactの基礎かなぁと。

今回のを動かすのに必要なファイル一式
https://github.com/hMatoba/ReactPlayground/tree/92ed62f5a5122132580a4e817a432aa0556963fe


 
comment: 0

WindowsでTypeScriptでJSXのHello, World

 WindowsでReactのお勉強をしている。JSXのところまで進んだのだが、型がそれなりには固くあってのしいのでTypeScriptでいくことにした。そのミニマルな環境構築。

 最初はVisualStudioにいいプロジェクトテンプレがあるか、どっかのブログで同じことやってるのがあるだろうと思って探したが見つからなかった。素直に公式ドキュメントに従うのが楽だった、というメモ。

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html


comment: 0