Our front-end team at Astute sol loves trying new things. New frameworks, new build tools… anything that makes our work more efficient deserves my attention.

While some of the tools we use have proved useful, a handful completely revolutionised my workflow (like switching to Sass — one of the best decisions I’ve ever made).

But with the front-end world changing on a daily basis, it’s hard hard to devote time to learning a new framework — especially when that framework could ultimately become a dead end. So if you’re looking for the next best thing but you’re feeling a little bit lost in the framework jungle, I suggest checking out React.

Here’s why we’re re-building our GUI in React, and why you might want to consider it as the basis of your next project:

##It makes writing JavaScript easier

React uses a special syntax called JSX, which allows you to mix HTML with JavaScript. This is not a requirement — you can still write in plain JavaScript — but I strongly suggest that you try the new syntax because makes writing your components a breeze.

Being able to drop a bit of HTML in your render function without having to concatenate strings is fantastic, and after a while it feels very natural. React turns those bits of HTML into functions with a special JSXTransformer.

##Components are the future of web development

Shadow DOM and frameworks such as Polymer generated a lot of buzz lately, and rightly so. The core concept of Polymer boils down to creating self-contained, customisable elements that you can easily import and use in your project. This in itself is a fantastic idea, but React takes that concept to the next level.

React doesn’t use Shadow DOM — instead it gives you the ability to create your own components that you can later reuse, combine, and nest to your heart’s content. I’ve found this to be the single-biggest productivity boost because it’s so easy to define and manipulate your own components.

React creates its own virtual DOM where your components actually live. This approach gives you enormous flexibility and amazing gains in performance because React calculates what changes need to be made in the DOM beforehand and updates the DOM tree accordingly. This way, React avoids costly DOM operations and makes updates in a very efficient manner.

##It’s awesome for SEO

One of the biggest issues with JavaScript frameworks is that they are not exactly search engine friendly. Although there have been some improvements in this area, search engines generally have trouble reading JavaScript-heavy applications.

React stands out from the crowd because you can run React on the server, and the virtual DOM will be rendered and returned to the browser as a regular web page. No need for PhantomJS and other tricks!

import React, { Component } from 'react';

class DemoView extends Component {
  render() {
    return (
      <div>
        <span>
          Cat Demo View
        </span>

        <img src="http://i.imgur.com/QbA1W4Z.jpg">

        <span>
          Some random cats picture.
        </span>
      </div>
    );
  }
}```