Intro to the React Framework

The ShapeEditor Component

Lets look at the implementation of some of these components, starting with the ShapeEditor.

/** @jsx React.DOM */var ShapeEditor = React.createClass({  componentWillMount: function () {    this._parser = new ShapeParser();  },  getInitialState: function () {    return { text: '' };  },  render: function () {    var shapes = this._parser.parse(this.state.text);    var tree = (      <div>        <textarea class="editor" onChange={this.handleTextChange} />        <ShapeCanvas shapes={shapes} />      </div>);    return tree;  },  handleTextChange: function (event) {    this.setState({ text: event.target.value })  }});

As the name suggests, the ShapeEditor provides the editing experience by generating the <textarea/> and the live feedback on the <ShapeCanvas/<. It listens to the onChange event (events in React are always named with camel case) on the <textarea/> and on every change, sets the text property of the component’s state. As mentioned earlier, whenever you set the state using setState(), render is called automatically. In this case, the render() of the ShapeEditor gets called where we parse the text from the state and rebuild the shapes. Note that we are starting with an initial state of empty text, which is set in the getInitialState() hook.

For parsing the text into a set of shapes, We use an instance of the ShapeParser. I’ve left out the details of the parser to keep the discussion focused on React. The parser instance is created in the componentWillMount() hook. This is called just before the component mounts and is a good place to do any initializations before the first render happens.

It is generally recommended that you funnel all your complex processing through the render() method. Event handlers just set the state while render() is the hub for all your core logic.

The ShapeEditor uses this idea to do the parsing inside of its render() and forwards the detected shapes by setting the shapes property of the ShapeCanvas. This is how data flows down into the component tree, from the owner (ShapeEditor) to the owned (ShapeCanvas).

One last thing to note in here is that we have the first line comment to indicate JSX → JS translation.

ShapeCanvas to Generate the Shapes

Next, we will move on to the ShapeCanvas and the Ellipse, Rectangle and Text components.

p>The ShapeCanvas is rather straightforward with its core responsibility of generating the respective <Ellipse/>, <Rectangle/> and <Text/> components from the passed in shape definitions (this.props.shapes). For each shape, we pass in the parsed properties with the attribute expression: properties={shape.properties}.

/** @jsx React.DOM */var ShapeCanvas = React.createClass({  getDefaultProps: function(){    return {      shapes: []    };  },  render: function () {    var self = this;    var shapeTree = <div class="shape-canvas">    {      this.props.shapes.map(function(s) {        return self._createShape(s);      })    }      </div>;    var noTree = <div class="shape-canvas no-shapes">No Shapes Found</div>;    return this.props.shapes.length > 0 ? shapeTree : noTree;  },  _createShape: function(shape) {    return this._shapeMap[shape.type](shape);  },  _shapeMap: {    ellipse: function (shape) {      return <Ellipse properties={shape.properties} />;    },    rect: function (shape) {      return <Rectangle properties={shape.properties} />;    },    text: function (shape) {      return <Text properties={shape.properties} />;    }  }});

One thing different here is that our component tree is not static, like we have in ShapeEditor. Instead it’s dynamically generated by looping over the passed in shapes. We also show the "No Shapes Found" message if there is nothing to show.

The Shapes: Ellipse, Rectangle, Text

All of the shapes have a similar structure and differ only in the styling. They also make use of the ShapePropertyMixin to handle the style generation.

Here’s Ellipse:

/** @jsx React.DOM */var Ellipse = React.createClass({  mixins: [ShapePropertyMixin],  render:function(){    var style = this.extractStyle(true);    style['border-radius'] = '50% 50%';    return <div style={style} class="shape" />;  }});

The implementation for extractStyle() is provided by the ShapePropertyMixin.

The Rectangle component follows suit, of course without the border-radius style. The Text component has an extra property called value which sets the inner text for the <div/>.

Here’s Text, to make this clear:

/** @jsx React.DOM */var Text = React.createClass({  mixins: [ShapePropertyMixin],  render:function(){    var style = this.extractStyle(false);    return <div style={style} class="shape">{this.props.properties.value}</div>; }});

Tying It All Together With App.js

app.js is where we bring it all together. Here we render the root component, the ShapeEditor and also provide support to switch between a few sample shapes. When you pick a different sample from the drop down, we load some predefined text into the ShapeEditor and cause the ShapeCanvas to update. This happens in the readShapes() method.

/** @jsx React.DOM */var shapeEditor = <ShapeEditor />;React.renderComponent(  shapeEditor,  document.getElementsByClassName('container')[0]);function readShapes() {  var file = $('.shapes-picker').val(),    text = SHAPES[file] || '';  $('.editor').val(text);  shapeEditor.setState({ text: text }); // force a render}$('.shapes-picker').change(readShapes);readShapes(); // load time

To exercise the creative side, here is a robot built using the Shape Editor:

---

And That’s React for you!

Phew! This has been a rather long article and having reached to this point, you should have a sense of achievement!

We have explored a lot of concepts here: the integral role of Components in the framework, use of JSX to easily describe a component tree (aka intermediate-DOM), various hooks to plug into the component lifecyle, use of state and props to drive the render process, use of Mixins to factor out reusable behavior and finally pulling all of this together with the Shape Editor example.

Hope this article gives you enough boost to build a few React apps for yourself. To continue your exploration, here are few handy links:

• Docs
• Source on Github
• Blog