週末副業記

土日は副業エンジニアのブログです。副業に関することを投稿します。

React攻略への道のり[1日目]


f:id:aisakakun:20160822182427j:plain

まず、webプログラミング経験がない場合は、色々なサイトを見ても
正直よくわかりません。(少なくとも私は..)

なので、この記事では、実際に出力されるものとプログラムの関係がわかりやすいような
プログラムと、使用したテキストエディタを紹介します。

使用したテキストエディタ
まず、テキストエディタですが、sublime textを使っています。

www.sublimetext.com

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 />

すると、こういう感じになると思います。
f:id:aisakakun:20160822183059p:plain

なんとなく、分かった感じ。
本当はreact&reduxを攻略しなければならないのですが、
道のりは長い...


参考URL:
[1]: 10分で始めるReact.js(v.0.14.7) - Qiita
[2]:[React.js] setStateしても直ちにstateは変更されない | Like@Lunatic