Todo and Chat apps have been claimed, so it seems that the JSON-editor has become my go-to for testing out a new framework.

Having read a great deal about React, it’s philosophy, use-cases, examples, etc., and recently in combination with Facebook’s Flux for architecting an app, figured I needed to put together my basic app to get a better feel for it.

It’s not the prettiest (it’s pretty similar to the one I’ve built in Polymer) but it works about the same:

And the relevant code:

/** @jsx React.DOM */

 var JsonEditor = React.createClass({
   getInitialState: function() {
     var initialValue = this.props.initial ?
                        this.props.initial :
                        {"default" : "value"};
     return {
       value: initialValue,
       error: false
     };
   },
   handleChange: function() {
     try {
       this.setState({
         value: JSON.parse(this.refs.textarea.getDOMNode().value),
         error: false
       });
     } catch (e) {
       //couldn't parse string, don't update object
       this.setState({error: e})
     }
   },
   render: function() {
     return (
       <div>
         <h3>Input</h3>
         <textarea
           onChange={this.handleChange}
           ref="textarea"
           defaultValue={JSON.stringify(this.state.value)} />
         <h3>Output</h3>
         <div className={(this.state.error) ? 'has-error' : ''}>
           <div className="help">{this.state.error.message}</div>
           <pre>
             {JSON.stringify(this.state.value, null, 2)}
           </pre>
         </div>
       </div>
     );
   }
 });

 var myObject = {
         "key" : "key",
         "passed_in" : ["hey", "react"]
       }

 React.render(<JsonEditor initial={myObject} />, document.body);

I’m still not the biggest fan of JSX (little things like className instead of class not only trip you up, but also move your code farther and farther from HTML), but in a large scale app, or even an app with very dynamic state, I could get past it pretty easily for the purported benefits of React.

React’s paradigm of one-way binding, forcing you as the developer to explicitly manage data-flow and avoid storing state in the DOM, has really grown on me. Sure enough, apps I’ve built / seen using Angular, Backbone, and others often become difficult to reason about as they grow in complexity.

Putting together such an app - larger and more reactive - is next up on the agenda!