React The jQuery Way

Raw React adds remarkably little and you can do more or less the same with unaided JavaScript - add a little jQuery and it is even easier. The hello element, for example, can be implemented using jQuery:

function HelloJQ(props) {
  this.props = props;
  this.state = {count: 0};
}

HelloJQ.prototype.render = function () {
 return $("#root").empty().append(
         "" + this.props.hellomessage + " " +
                   this.state.count);
};
HelloJQ.prototype.inc = function () {
 this.state.count++;
 this.render();
};

This is an object with a constructor that sets props and initial state and a render and an inc method to update state.  You would use this by creating and instance and then rendering it:

var hello = new HelloJQ(
                 {hellomessage: "Hello World"});
hello.render();

Of course you can use inc to change state and update 

function changestate() {
 hello.inc();
}

No need for a setState method because the inc function automatically does a render. At this point you could argue that this isn't the same as the React component because it provides no facilities for building up a hierarchy of elements and no intelligent rendering. However even with this simple component you can build up a hierarchy simply using HTML. The rendering issue is slightly more subtle but in a component made of nested HTML elements all you would have to do is make sure the state update methods simply updated the sub-elements that had changed. 

The standard example of the problem of bulk re-rendering is to include an input element. Change the render method to:

HelloJQ.prototype.render = function () {
  return  $("#root").empty().append(
          "<input><div>" + this.props.hellomessage +
             " " + this.state.count);     
};

If you try this out you can enter something into the Input element, but as soon as you click the button to update the count whatever was showing is blanked because the render wipes out the entire section of the DOM  including the input.  

However, there is nothing to say we have to re-render the complete component. First we change the definition of the component so that the reference to the div is saved as a property:

HelloJQ.prototype.render = function () {
  this.div=$("<div>").text(
         this.props.hellomessage +
          " " + this.state.count);
  return  $("#root").empty().append(
                         "<input>",this.div); 
};

You can see that now we have a property that lets other methods reference the div and this means we can write the inc function as:

HelloJQ.prototype.inc = function () {
 this.state.count++;
 this.div.text(this.props.hellomessage +
                    " " + this.state.count);
};


Now only the div is updated and anything entered into the Input element is preserved during a state update.  You can also see that this approach would be used to build more complex components.

You can argue that this is messy, but it is also simple, direct and efficient. If you only update the parts of the component that have changed you don't have to implement a virtual DOM and you don't have to have a complex rendering algorithm. 

The Rest of React

So far we have used React with classical JavaScript so that you can clearly see what it is doing. 

What exactly then does the raw React give you?

You can create DOM objects in JavaScript as Plain Old JavaScript Objects and React will render them for you as DOM objects. This keeps you away from the real DOM and the real DOM objects. You only ever have to interact with the virtual DOM. Much of the attraction of React depends on how much you value this. If you know how to work with the DOM raw, or using something like jQuery, then perhaps you will not be so impressed. 

At this level, React gives you nothing over HTML and raw JavaScript, apart from some enforcement of how things are done via a library of functions. 

The only other major part of React is JSX. 

JSX is a declarative language based on JavaScript that allows you to define components. Basically it lets you mix JavaScript with an abbreviated HTML. It basically is a shorthand way of writing creteElement calls. For example 

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

The JSX is the <h1>Hello, world"</h1>. Notice that it isn't a string it is just part of the code - i.e. HTML within JavaScript.  You can read up on JSX syntax but all you will discover are more compressed ways of calling createElement. 

JSX is the feature that attracts many to React but we already have a declaritive language for components in the form of HTML. You can also mix JavaScript into HTM if you really have to. It is arguable that mixing markup and code is a bad idea and similarly mixing code and markup is equally as bad. 

The big problem with JSX is that you have to compile it to HTML5 and JavaScript and this is where we meet React's "tooling". If you want to use JSX you have to put your code through Babel which is a JavaScript to JavaScript compiler that also happens to compile JSX to JavaScript. One advantage of using Babel is that you can also use ES6 and have it compiled to ES5. Once you start using Babel you might as well swallow the other tools - a package manager such npm, a bundler such as Browerify and more. In some situations such a tool chain makes sense in other it simply slows the development of a smallish project.

The point is that the React tool chain is available to plain JavaScript and as such really isn't an advantage confined to React.  

React - A Verdict?

React isn't bad, it is just very limited and given this it is surprising how successful it is. What it provides is an organization for creating components. It is more a set of guidelines for how to do things because you can achieve the same results in plain old JavaScript - you don't even need to move to ES6. JSX is an alternative declarative markup which really isn't needed and if you adopt it you have to adopt a compiler approach and everyone knows that an edit-run cycle is likely to be more efficient than an edit- compile- run cycle. 

Having said all of this, it is still possible to see why some programmers like React - it saves them from having to think and all programmers are lazy. The biggest loser in React's success is the W3C standard Web Components, a true open source cross platform solution to creating components that is also powerful enough for most tasks. 

• Ian Elliot is the author of Just jQuery: The Core UI and Just jQuery: Events, Async and Ajax. 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info