まず、webプログラミング経験がない場合は、色々なサイトを見ても
正直よくわかりません。(少なくとも私は..)
なので、この記事では、実際に出力されるものとプログラムの関係がわかりやすいような
プログラムと、使用したテキストエディタを紹介します。
使用したテキストエディタ
まず、テキストエディタですが、sublime textを使っています。
sublime をインストールしたら、このサイト
コマンドラインでSublime Textを起動する | eturlt.net
に書いてあるようにすると、コマンドラインから簡単に開けるので
いいです。
そして、プログラム。
<html> <script src="https://fb.me/react-0.14.7.js"></script> <script src="https://fb.me/react-dom-0.14.7.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> <div id="module"></div> <script type="text/jsx"> var Editor = React.createClass({ getInitialState: function() { return {value: "Type Something here"}; }, handleChange: function() { this.setState({value: this.refs.textarea.value}); }, render: function() { return ( <div className="Editor"> <h3>Input</h3> <textarea onChange={this.handleChange} ref="textarea" defaultValue={this.state.value} /> <h3>Output</h3> <div className="content" dangerouslySetInnerHTML={{__html: this.state.value}} /> </div> ); } }); ReactDOM.render(<Editor />, document.getElementById('module')); </script> </html>
( [1]より引用。)
このプログラムを保存して、webでどのように表示されるかを見るためには、
コマンドライン上で、
open sample.html
とかで、やるとwebページが開くと思います。
そして、なんとなく仕組みが分かったら、
var Button = React.createClass({ getInitialState () { return { clicked: false }; }, clickHandler () { var value = true; this.setState({ clicked: value }); console.log(value); // -> true }, render () { console.log(this.state.clicked); // -> true return <button onClick={this.clickHandler}>Click Me</button>; } });
を加えて([2]より引用)
最初のdangerouslySetInnerHTML={{__html: this.state.value}}
/>という部分に以下を追加してください。
dangerouslySetInnerHTML={{__html: this.state.value}} /> <h2> Button </h2> <Button />
すると、こういう感じになると思います。
なんとなく、分かった感じ。
本当はreact&reduxを攻略しなければならないのですが、
道のりは長い...
参考URL:
[1]: 10分で始めるReact.js(v.0.14.7) - Qiita
[2]:[React.js] setStateしても直ちにstateは変更されない | Like@Lunatic