React（基礎）を勉強中です。
初心者でもパッと作れる練習用サンプルコードありませんか？
コンポーネントの連携の部分のコーディングを練習したいです。
筆者もそうですが、プログラミング初心者だと「何かを完成させた」という成功体験に乏しいため、コーディングの練習のモチベーション維持が大変ですよね。
練習しても何か動くものが出来上がらないとヘコむので、80行で完成するサンプルを紹介します。
今回は「複数のコンポーネントを連携させて使う」のサンプルです。
Reactで単位変換インチ/センチ変換アプリを作成する
「コンポーネント＝アプリを構成する部品」
インチに数字を入れるとセンチに変換して表示、センチに数字を入れるとインチに変換して表示するというミニアプリのコードです。
完成すると次のような、単位変換ミニアプリとなります。
Reactによる単位変換アプリ作成手順
1. プロジェクトを作成する
プロジェクト（今回は「incn_to_cm」という名前にします）を作成。
$ create-react-app incn_to_cm2. 以下のフォルダ構成に従い各ファイルを記述する
各ファイルのコードは次項を参照してください。
+incn_to_cm | - package.json //必要なモジュールが記載してあるファイル | - index.html //メインとなるindex.htmlファイル | +<src> | |- index.js //メインのJavaScript | |- InchToCm.js //コンポーネントInchToCm | |- ValueInput.js //コンポーネントValueInput | +<out> | |- bundle.js //コンパイル済みJavaScriptファイル
3. コンパイルする
$ npm run build $ npm install -g http-server $ hs
コンパイルすると「out/bundle.js」が生成されます。
4. アプリを実行する
$ cd incn_to_cm
$ npm start
単位変換アプリ各ファイルの中身
index.html
src/index.js
src/InchToCm.js
ValueInputが２つ（インチ入力用とセンチ入力用）配置されています。
src/valueInput.js
単位変換コンポーネントの説明
Reactでは親コンポーネントから子コンポーネントに何かを伝えるときは、要素のプロパティ（タグの属性）を介して伝達されます。
コンポーネント側で値に変化が生じたときはonChangeやonSubmitなどのイベントを通じて外部に伝えます。
コンポーネントの３大要素
Reactのコンポーネントを構成する３大要素が、状態（state.xxx）、プロパティ(props.xxx)、イベント(onXXX)。簡単にまとめると次のとおり。
状態（state.xxx）
状態（state）はコンポーネントの状態を表す。書き換え可能なデータの集まり。
状態（state）を変更するときは、this.state.xxxを直接書き換えるのではなくthis.setState()を介して値を変更します。
プロパティ(props.xxx)
プロパティ(props)は外部からコンポーネントへの窓口の役割を担っています。
プロパティは一度設定されるとコンポーネント内部で変更されることはありません。
読み取り専用。
イベント(onXXX)
HTML/JavaScriptのイベントとReactのイベントは異なります（例：JavaScriptだとonclick、ReactだとonClickなど）。
Reactのイベントはプロパティ（props）を介して指定できます。
JSXでイベントを指定する
<div>
<MyComponent onChange={handleChange} />
</div>おわりに
React基礎を学ぶのに使える、80行で完成するサンプルを紹介してきました。
React基礎はきりの良いところまで続けて勉強しますが、一度JavaScriptの文法の勉強に戻ろうか模索中。
JavaScriptがあやふやなままReact来てしまったのは良くなかったかと反省あり。
コメント