Stay ahead and focused

Language of Web

Sep 6

HTML and React

HTML does not allow you bend the character. That's why it's said that HTML pages are static pages, and the page content can't be changed in general. Javascript has long been the magic behind static HTMLs by operating on the page DOM after it's rendered in the browser. Therefore practically HTML can be "programmed" by Javascript to do a lot of cool things.

But only until React 1 is invented by Facebook at 2013, it starts to be a bit clearer that HTML might become truly part of the programming component so to be operated in a classical programming way.

Other than the basic idea for storing HTML as template files and then injected back to main body for re-usability, what's more fundamental here is that it embeds native HTML block perfectly inside the native javascript code block.

React.createClass({
    render: function() {
        // HTML without quotation mark around it
        return <div>Hello, {this.props.name}!</div>;
    }
});

Having HTML content inside Javascript without quotation mark is more than just interesting. Visually the HTML content separates from the Javascript code via its unique tag structure. On the other hand, inside HTML block, you can reference Javascript variables with Javascript code.

    // Javascript is both in and out of HTML
    return <div>Hello, {this.props.name}!</div>;

Although the placement of Javascript variable in HTML is commonly seen feature, React version makes it more swift in accessing the local variables of the programming unit.

Small Step

This programming unit, commonly referred as widget, achieves both look and feel at the same time, is wrapped into a compact Class definition, which opens the door for more object based programming capability with decent separation between logic and presentation, but not in the sacrifice of separating them too far apart. For the sake of better code arrangement, you might still store the HTML in a separate file, traditionally referred as templates. But for the first time, the look and feel can be written so close together while still in their native format.

It's worth to mention that React needs to compile HTML into Javascript code to finish the blend, therefore the original file has to be saved with extension '.jsx'. Although this blending process can be transparent to the developer once setup, since this new extension isn't supported by HTML spec, you have to either use a run-time Javascript jsx library or a build process to facilitate it.2 3

Retrospectively speaking, React is unique in a way that it aims to accomplish a smaller but more fundamental step in the legacy of HTML and Javascript, which is how to construct a compact and efficient programming unit so that the re-usability of the content with both look and feel can be drastically improved. The fact that they accomplished it without changing ways of people writing HTML and Javascript is revolutionary and it will for sure stand out of the crowd in the long run.


References

  1. A Javascript library for building user interfaces
  2. Creating a Simple Application Using React JS and Flux Architecture
  3. Building Applications with React and Flux

Comments