Reactに挑戦してみる 4
概要
React参考書籍を読んでみる。
参考書籍
WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
- 作者: 柴田文彦
- 出版社/メーカー: インプレス
- 発売日: 2016/11/25
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
JSXを使ってみる。
JSFiddleの言語を、Babelに変更して、以下のようなコードを書いてみる。
ReactDOM.render( <h2>Hello, React World!</h2>, document.getElementById('content') );
これだけで、OK!めっちゃシンプル!
JSXとHTMLの違い
JSXは、HTMLみたいな記述ができるけど、XMLなので、書き方が微妙に違う。
- 属性名='属性値'のように書く。styleは、{{}}で囲んで。
ReactDOM.render( <h2 style={{ fontStyle: 'oblique', fontFamily: 'Arial', color: 'green' }}> Hello, React World!</h2>, document.getElementById('content') );
- class, forは全然違う名前になる
class-> JSXでは、className='myClass' というように、classNameで指定する。 for -> htmlFor
JSXの中で使うJavaScript
var HelloWorld = React.createClass({ render: function() { return ( <h2>Hello, {this.props.name} World!</h2> ); } }); ReactDOM.render( <HelloWorld name='React'/>, document.getElementById('content') );
なんと、カスタムコンポーネントをタグのようにして、書くのか!
JSXでステート付きのコンポーネントを作成する
var Evaluator = React.createClass({ getInitialState: function() { return { expression: '' }; }, reCalcValue: function(e){ if (e.key === 'Enter') this.setState({ expression: e.target.value }); }, render: function() { return ( <div> <input type='text' onKeyPress={this.reCalcValue} /> <h2>{eval(this.state.expression)}</h2> </div> ); } }); ReactDOM.render( <Evaluator />, document.getElementById('content') );
確かに直感的にわかりやすい感じがするな〜!