create some dynamic elements to jekyll on github pages with reactjs

Proloug

While this post isn’t meant to be a series, I thought you would like to know how to add a REST api to a jekyll blog. Eventually, I will be using this api to add related links to my blog’s articles. For now I will just write about how I will use Reactjs to add related links from my REST api.

Reactjs

Facebook released Reactjs as an open source front-end component based framework. Reactjs is a topic that deserves a blog post all for itself. Not that it’s extremely complicated, instead that it’s extremely useful. Some have called Reactjs the V in MVC –that is a gross simplification. Reactjs allows us to define the data that will be used in markup and then define that markup. But, the power and utility of Reactjs comes from the way Reactjs manages that piece of data and semantic structure. Reactjs uses virtual DOM to store the pieces that it manages. When something happens Reactjs will take the changes to those pieces and apply them to a new copy of the virtual DOM –it then compares the two copies and changes the real DOM only where it needs to.

This limits expensive DOM manipulation and allows a record of DOM changes. This can give us undo for an app in a browser.

Components

I was purposefully using the vague term “pieces of data and markup.” This is so I could explain Components in greater detail without having to cover them twice.

The largest front-end tool that we get with Reactjs is the component. Components are designed to be a somewhat self-contained javascript module. Here is a small Reactjs component example:

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

This is a simple “Hello World” Reactjs example component. You will notice two things right away about this: There is no data-structure (and there doesn’t have to be with Reactjs), and some strange XML like stuff in the render function return. That XML is something called JSX and while you might be thinking “What!?! We cannot have presentation in our logic!” You need to remember that JSX is just syntactical sugar, and semantics is functional. Thus, get over yourself. Read up more on the JSX docs page.

If you really want to see how it is done with Reactjs, checkout this Reactjs starter kit on github.

This is really all there is to components. Sure there is more stuff to go into such as: events, props, and state. If you want all that, I suggest reading facebooks documentation on Components.

Pulling from our API

Pulling from the api will require an ajax call (just like anytime we need to integrate a REST api with JavaScript).

Putting it all together

Here is my basic Reactjs component that I will be using to show article teasers.

// @TODO: Put js component here.

Here is my JavaScript ajax api caller thingy.

// @TODO: Write ajax caller thingy and put it here.

Below, you should see the latest article on my blog. If you happen to be here right after this article is published, I am sorry but you have already read this one.