React + yarn + webpack でとりあえず Hello World! する - BppLOG の続き
今度は、ブラウザ上で「Tom」と入力されるのを受けて、「Hi Tom!」と表示されるようにしてみます。
Greeting.js の component を作成します。
import React, { PropTypes } from 'react'; function Greeting(props) { return (<div>Hi {props.name}!</div>); } Greeting.propTypes = { name: PropTypes.string.isRequired, }; export default Greeting;
受け取る prop の型の指定が必要なので、Greeting.propTypes で指定していく。
さらに、isRequired を指定するか、デフォルトpropsを指定して必要があるので指定する。
ひとまずこのcomponentを動かしてみます。
Ehoc.js を書き換えます。
import React, { Component } from 'react'; import Greeting from './greeting'; class Echo extends Component { render() { return ( <div> <Greeting name="Tom" /> <Greeting name="Jelly" /> </div> ); } } export default App;
この状態でブラウザにアクセスすると
Hi Tom! Hi Jelly!
と表示されるようになりました。
React の component はトップレベルは1つである必要があるので、
<div></div>
で囲っています。
続いて、component に state を持たせてみます。
constructor を利用して、state をセットして、その値を component に渡します。
import React, { Component } from 'react'; import Greeting from './greeting'; class Echo extends Component { constructor(props) { super(props); this.state = { name: 'Tom'; } } render() { return ( <div> <Greeting name={this.state.name} /> </div> ); } }
そして、setState を利用してフォームからの入力を受け取って動的に変更できるようにしてみます。
setState は this.state への代入と再レンダリングを行ってくれるので view の反映までがされます。
import React, { Component } from 'react'; import Greeting from './greeting'; class Echo extends Component { constructor(props) { super(props); this.state = { name: 'Tom', }; } handleNameChange(name) { this.setState({ name }); } render() { return ( <div> <input type="text" value={this.state.name} onChange={e => this.handleNameChange(e.target.value)} /> <Greeting name={this.state.name} /> </div> ); } } export default App;
となります。
また、
handleNameChange(name) { this.setState({ name: name }); }
は
handleNameChange(name) { this.setState({ name }); }
と表記を省略できます。
そして、ブラウザにアクセスすると
このようになっているので、フォームに入力してみると、反映されるようになりました。
なるほど、少しずつ state を理解出来るようになってきたので引き続き勉強していきます。
Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門
- 作者: Stoyan Stefanov,牧野聡
- 出版社/メーカー: オライリージャパン
- 発売日: 2017/03/11
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック
- 作者: クジラ飛行机
- 出版社/メーカー: ソシム
- 発売日: 2017/07/26
- メディア: 単行本
- この商品を含むブログを見る
入門 React ―コンポーネントベースのWebフロントエンド開発
- 作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空
- 出版社/メーカー: オライリージャパン
- 発売日: 2015/04/03
- メディア: 大型本
- この商品を含むブログ (2件) を見る