Our front-end team 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 revolutionized 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.js.
Here's why we're re-building our GUI in React.js, and why you might want to consider it as the basis of your next project:
Components are the future of web development
Shadow DOM and frameworks such as PolymerJS generated a lot of buzz lately, and rightly so. The core concept of Polymer boils down to creating self-contained, customizable elements that you can easily import and use in your project. This in itself is a fantastic idea, but React.js takes that concept to the next level.
React.js 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.js is extremely efficient
React.js creates its own virtual DOM where your components actually live. This approach gives you enormous flexibility and amazing gains in performance because React.js calculates what changes need to be made in the DOM beforehand and updates the DOM tree accordingly. This way, React.js avoids costly DOM operations and makes updates in a very efficient manner.
It's awesome for SEO
React.js stands out from the crowd because you can run React.js 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!
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.js turns those bits of HTML into functions with a special JSXTransformer.
It gives you out-of-the-box developer tools
When you start your adventure with React.js, don't forget to install the official React.js chrome extension. It makes debugging your app so much easier.
After you install the extension, you'll have a direct look into the virtual DOM just as if you were browsing a regular DOM tree in the elements panel. Pretty amazing!
The brains behind Facebook are maintaining this project
React.js is now open source, but it was first developed at Facebook for internal purposes. After a while, Facebook engineers realized that they created something truly awesome and decided to share their project with the world.
Facebook uses some React.js, and Instagram’s entire website was built on React.js after the two companies joined forces. Other successful projects using React.js include Khan Academy and New York Times.
If you haven't already, check out the next article in this series - Getting Started with React.js: Creating Material Design Components, in which I share a demo/tutorial and we build something together.