読者です 読者をやめる 読者になる 読者になる

Perl日記

PerlとかRubyとかPHPとかPythonとか

ReactでJSON整形ツール書いてみた

できたもの
https://dl.dropboxusercontent.com/u/9152456/json_stringify/index.html

いろいろやった後、削りまくったら結局stateしか使わなかった。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JSON整形ツール</title>
    style略
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
  </head>
  <body></body>
  <script type="text/jsx">
    var App = React.createClass({
      getInitialState: function() {
        return {stringifiedJson: "ここに整形されたJSONが表示されます", textValue: ""};
      },
      onChange: function(e) {
        var text = e.target.value;
        this.setState({textValue: text});
        if (text == "") {
          return;
        }

        try {
          var json = JSON.parse(text);
          this.setState({stringifiedJson: JSON.stringify(json, null, "  ")});
        }
        catch(e) {
          this.setState({stringifiedJson: e.message});
        }
      },
      render: function() {
        return (
          <div>
            <header>
              <textarea id="json_box" ref="textArea" value={this.state.textValue} onChange={this.onChange} placeholder="ここにJSONをいれてください"/>
            </header>
            <div id="content">
              <pre id="stringified_json">{this.state.stringifiedJson}</pre>
            </div>
          </div>
        );
      },
    });
    React.render(<App />, document.body);
  </script>
</html>