5 reasons ReactJS is awesome for designers

So you’ve probably heard of Facebook’s React JavaScript framework. It’s all the rage right now. This post will be a quick primer if you 1) do not know what ReactJS is or 2) want to see why, as a designer, React should be your new best friend.

What is ReactJS?

React is a front-end JavaScript framework. It’s sometimes known as the V in Model-View-Controller (MVC). But, it’s so much more than that.

React was born at Facebook. Once Instagram joined the company, the team began to look for ready-made tools to build the Instagram web app. They convinced Facebook’s team to open source and share the React framework. Since then, the open-source project has been shared with the world.

You’ve probably already used a React-based website. Facebook’s Messenger.com and Instagram’s web app both currently run React in production.

Why should you care about React?

The following points are specifically for designers, so I will try to keep my coder viewpoints to a minimum (but they are probably even stronger — another post for another day).

1. Code maintainability = greater flexibility to design

I’ll bet this has happened to every designer: Some screen or component gets to staging or even production, and it has too big of a shadow or overly rounded corners. These little things drive pixel-perfect designers nuts!

The first reason why React is so awesome is a tad nuanced. As a developer who loves pixel-perfect designs, being able to come back to a piece of code that was written days, weeks or months earlier — and not have to spend hours figuring out what the heck I wrote and how to change it — is a massive breath of fresh air.

This is possible because React is fundamentally about small, self-contained components. That is, you’ll find a component for a button, another for a background, and another component for a field. This readability and maintainability is truly the best I’ve seen when it comes to out-of-the-box frameworks.

With React, I find my stance on making changes as a designer is much more open. And my ability to quickly isolate and fix a problem is far greater than with other frameworks. For us developers who might be less than superstars, this feature is a game-changer.

2. Components over pages

React is fundamentally different than other front-end frameworks (that is, before others started copying its methodology) in that each asset is made up of many isolated components. Want a button changed across the whole platform? One change and boom! Done. I know experienced developers will build in this type of abstraction from the beginning, but React makes these types of decisions core to using its framework. Basically, idiot-proof.

3. Many, many tools

React has a handy developer extension published by Facebook for Chrome that’s an effective diagnostic tool. I believe that better tools always equal better results (at least in theory).

Now, there is an ever-growing list of tools to support React. One of the biggest advantages of being the “belle of the ball” is the wide variety of support tools that are available. React Developer tools allow anyone (designers included) to quickly figure out the root of a problem, reducing back and forths between designer and developer.

4. React Native

React’s main methodology is to use the same tools and stack for different systems (i.e., web and mobile). Therefore, in theory, one developer could easily make native apps with React Native after using ReactJS, with many shared components and structures used from the web app (or vice versa). Keeping designs homogeneous is a big thumbs up for all designers.

5. Fast prototyping

Designers and developers cite React’s fast prototyping as a huge plus. As a designer, fast prototypes not only give you more feedback opportunities, but engage clients and customers sooner — before things become too codified.

Design frameworks

When Google published its material design guidelines, I was personally excited about how it laid out excellent UI for non-UI people. The clean and coherent design standards promote flexibility and a quality framework to design along.

Given the amount of attention and recent popularity of React, many projects have sprung up that emulate various design standards for it. Material UI is a solid example. In a short period of time, a beautiful library of standard, Material-compliant React components has been created. This makes designing and prototyping extremely easy.

React’s UI documentation is worth noting. Just look at the sheer size and variety of UI components any designer can grab and implement into their flats or wireframes. My personal favorites right now are:

1. Material-UI: an open-source project I lean heavily on to whip up quick wireframes.
2. Khan Academy components: a great template to start from.
3. React-notification: I’m a sucker for easy-to-use notifications.

React is evolving — fast

React was first published in late 2014 so it’s relatively new in the world of JavaScript frameworks. However, it is quickly attracting top talent (the highest paid front-end developers are React developers) at companies such as Dropbox, HipChat, Lyft and many more.

I would encourage you to check out ReactJS for your next project or side project. It’s an incredibly flexible, useful tool for developers and designers. And if you’ve already worked with ReactJS, do you love it as much as I do?

Feature image: Matt-Jackson via Compfight cc

Originally published at Garage.