はじめてReactを勉強するときに使えるサンプルコード【コンポーネント連携編】80行で完成

react-app

 

ミミウサ
ミミウサ

引き続きReact(基礎)です。ふう。
JavaScriptとReactとイベント名が異なるなど、文法がごっちゃになって区別が分からなくなっているところが目下の悩み。

 

とにかく「プログラミングができるようになりたくば、とにかく書けー」の法則に従い、書いてまとめます。

練習しても何か動くものが出来上がらないとヘコむので、今回も○○行以内で何かが完成するシリーズです。

今回は「複数のコンポーネントを連携させて使う」のサンプルで80行くらいかもです。

Reactで単位変換インチ/センチ変換アプリを作成する

「コンポーネント=アプリを構成する部品」

インチに数字を入れるとセンチに変換して表示、センチに数字を入れるとインチに変換して表示するというミニアプリのコードです。

完成すると次のような、単位変換ミニアプリとなります。

 

react-inch-to-cm

Reactによる単位変換アプリ作成手順

1. プロジェクトを作成する

プロジェクト(今回は「incn_to_cm」という名前にします)を作成。

$ create-react-app incn_to_cm
2. 以下のフォルダ構成に従い各ファイルを記述する

各ファイルのコードは次項を参照してください。

+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が2つ(インチ入力用とセンチ入力用)配置されています。

 

src/valueInput.js

単位変換コンポーネントの説明

Reactでは親コンポーネントから子コンポーネントに何かを伝えるときは、要素のプロパティ(タグの属性)を介して伝達されます。

コンポーネント側で値に変化が生じたときはonChangeやonSubmitなどのイベントを通じて外部に伝えます。

react-component

コンポーネントの3大要素

Reactのコンポーネントを構成する3大要素が、状態(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基礎はきりの良いところまで続けて勉強しますが、一度JavaScriptの文法の勉強に戻ろうか模索中。

JavaScriptがあやふやなままReact来てしまったのは良くなかったかと反省あり。

コメント

タイトルとURLをコピーしました