FlexJS and ReactJS

This page is under construction is not complete.

This page describes FlexJS for developers that have familiarity with ReactJS. If you are unfamiliar with RectJS, <<you can find out about it here>>. In particular, we'll look at the relationship between JSX and FlexJS.

In many ways, a ReactJS class definition, using JSX, is similar to a FlexJS MXML file. Here is a simple ReactJS class that displays a string:

var Message = React.createClass({
    render: function() {
        return <span>{props.label}</span>;
    }
});

The ReactJS class render function is called whenever the class property, label, is changed. You would put this into play by doing something like:

ReactDOM.render(
    <Message label="Hello, World" />,
    document.getElementById('top')
);

Compare that to a FlexJS MXML document (called Message.mxml):

<js:Container xmlns:js="library://ns.apache.org/flexjs/basic">
    <fx:Script>
    <![CDATA[
        [Bindable]
        public var label:String;
    ]]>
    </fx:Script>
    <js:Label text="{label}" />
</js:Container>

You would put this into play doing something like this:

<local:Message label="Hello, World" />

The effort between the FlexJS and ReactJS is roughly the same. While ReactJS uses HTML and JavaScript, FlexJS uses FlexJS components and ActionScript. Both ReactJS and FlexJS allow you to place substitutions in line (in FlexJS it is called "data-binding" and actually lets you use expressions, not just variables).

Consider making a minor typographic error in the ReactJS code above:

return <span>{props.lable}</span>;

Instead of returning props.label, you accidentally misspelled is as 'props.lable'. When loaded into the browser, there would be no error detected. Only when the class was loaded using ReactDOM.render() would the error be detected and that would only be a problem determined by the lack of the label. There is no real error except one of omission. A small typo could lead to a long debugging session.

Now try that same thing with FlexJS:

<js:Label text="{lable}" />

Depending on your editor, the error might be detected before you even saved the file. Since "lable" is nowhere to be found, the FlexJS compiler would flag it and potentially save you a lot of time.

If you are only using a simple text editor the command line to compile your code, the compile will detect the mistake before you can run the code.

more here