Top 6 Reasons Why We Love React
Our front-end team at Syncano 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!
It gives you out-of-the-box developer tools
When you start your adventure with React, don’t forget to install the official React 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 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, and Instagram’s entire website was built on React after the two companies joined forces. Other successful projects using React include Khan Academy, New York Times and our very own Syncano Dashboard :)
Bonus: Mobile Apps using React Native
Once you get comfortable with building web application with React, you can easily switch to building mobile application using React Native. Though it is not directly related to React, React Native follows same design patterns, making the transition easier!
Using only JavaScript, you will be able to build the native equivalent to Java, Swift or Objective-C, thus supported both by Android and iOS.
Some example applications that were built using this framework are Facebook Ads Manager and Discovery VR.
Tutorials: Go build awesome stuff with React!
If you haven’t already, check out the app tutorials you can build with React on Syncano:
Original article written by Marek Pelka, updated by Marcin Godlewski.
