Series Part 4: A beginner’s guide to comparing, and getting started with, MVC frameworks: React

This is the fourth part of my series on MVCs, where I will be collecting and offering links for getting to know, and get started with, MVCs.

I will be focusing on what I consider to be the big four right now (each will become a link as I publish that part):

  1. Intro
  2. AngularJS
  3. Ember.js
  4. React (this post)
  5. Backbone.js
  6. Summary

React

I suppose you should really start with React’s own Getting Started page, but, once again, it is so dry I’m afraid you will fall asleep, or get intimidated, before you really get going! You may need to come back later, to get download, installation, set-up, etc. instructions, but for now…

offers an equally informative, but far-more enjoyable, introduction.

For a really good quick run through all the basics of React, Learn React offers a very brief, but easy to follow, list of videos. I think this is a good way to get the core concepts before diving into the thorough documentation.

But things get really sweet when you crack open Build with React! Very easy to read along with, and each short page has an embedded JS Bin quiz for you to do! I have to admit, I found myself quite addicted, wanting to keep clicking on to the next exercise, and trying alternatives within the JS Bins! (Enough fun, in fact, to help me ignore all the XML and inline handlers cluttering up my JavaScript…)

As an added benefit to React, there is also React Native, which allows you to use React to build native apps. Yeah, use JS to build iOS and Android apps… I have not dug too deeply into this yet, but if you are interested, here are a couple of resources.

Bottom Line

Initially I was a little put-off because React is so JS-heavy and seemed a little awkward, but when I saw JSX I thought “Things just got much better…” It is very friendly, being able to essentially write HTML in your JS, kind of like one would with jQuery, with something like:

$('body').append('<div><h1>Hello World!</h1></div>');

And once I saw createClass, I was pretty much in love: React basically does what we’re all pretty used to (Object-Oriented JS), with very little alteration (though I did get tripped up a few times by forgetting to wrap variables and methods inside of { and }

I was also quite enthused to learn that React can also be rendered server-side, which helps to satisfy my old-curmudgeony ways, allowing actual pages to be rendered on the server, sent to the client, then interacted with there as a SPA

I hope you enjoyed getting to know React, up next is Backbone.js!

Happy learning,
Atg

Leave a Reply

Your email address will not be published. Required fields are marked *