A Designer’s Guide to React. What is it, why is it so popular, and… | by Philip Grukinik | November, 2022

What is it, why is it so popular, and what does it mean for us as designers

An abstract illustration of the cross-over between engineering and design
Illustration by Tommaso D’Angelosant

Let’s take a closer look at the most popular JavaScript library, React. Doing so from the designers’ point of view, with one clear goal in mind – to improve our understanding and therefore our approach to designing solutions. As well as to improve our communication with the engineers.

It all started in 1993 with simple static HTML pages. Back then, having links was a core “feature” of every website. Below, you’ll find a screenshot of the first website I ever created, which is still up and running.

Screenshot of the first website ever made.
world Wide Web

As people grew tired of boring websites, a random person shouted: “Let’s make these static pages dynamic”. And just like that, JavaScript was born.

A few years later, a great man named John Resig became annoyed at how hard it was to write JavaScript that worked well in different browsers – so he created jQuery.

In 2010, Google introduced AngularJS to enable developers to build robust single-page web applications, which were gaining popularity at the time.

In 2013, Jordan Walke, a Facebook software engineer, started React.

Like everything in life, things change and grow. As developers demand better ways to build apps, libraries and frameworks are created as a result. Whenever a particular feature is needed, an individual or a group of people creates it, and it grows from there.

React is used to build the front end of an application, which means what people see and interact with. Let’s take a look at why React became so popular in the first place.

Each application has a state, which contains information: what is displayed, which controls are visible, what is selected, etc.

The real magic of React lies in how it handles the state of an application. It contains something called Virtual DOM, which is a virtual copy of the actual DOM. Simply put, the DOM is a structure of all the elements of a page.

An example of how React updates the content of the app.
React’s Virtual DOM

The situation changes when a user interacts with the application, and that’s where React shines. React will automatically update the UI, but only the parts that need to be updated – thanks to the virtual DOM.

Unlike many other libraries and frameworks, the syntax of React is mostly plain JavaScript. Developers who have previously mastered JavaScript can be proficient with React in a matter of days. In addition, there is a lot of documentation, tutorials and training available.

A developer creates small things (components) which are then used to build bigger things, which are then used to build apps.

An example of React's component approach.
React’s component approach

Components are usually independent and have their own logic. They act as plugins in a larger system. If you need to add a new UI block, you can grab the existing component and go from there.

The advantage of reusable components is that they give your apps a consistent look and feel. They are also easy to maintain and scale.

Our design systems work very similarly. However, UI components in code have a lot of functionality other than just aesthetics. The success of React is largely attributed to its component-based approach. This is an efficient way to build software.

Although popularity is not an advantage of React itself, it brings a lot of added value that less popular UI libraries cannot match.

Google Trends

Google Trends

Hard to ignore list of benefits:

  • Infinite number of tutorials and training materials
  • Due to its popularity, it is easy to rent
  • Countless React Plugins That Will Make Your Life Easier
  • Nearly half a million react-related questions answered on Stack Overflow
  • Powered by Meta (Engineers love stability and frequent updates)
  • ~17.7M weekly downloads

We work with developers every day to figure out how our features will be implemented, and we also discuss the intricacies of these features.

Having a basic understanding of React will not only help us with specific features, but will also make development easier as a result.

Lastly, knowing the basics of HTML, CSS, and React will make it easier to provide feedback when reviewing implementations of our ideas.

When you know how CSS works and how React UI components work, you can create a design system that works for your team. We should try to bridge the gap between design and code as much as possible. The more synergy between these two, the better. Sure, this can be an opinionated topic in the industry – but even learning the basics can take you too far.

When setting up the basic blocks of an application, we designers want to ensure that the app matches our design system and that the UI is consistent.

There are generally three options available when creating the UI of an app:

Unstyled libraries are interesting because they provide components with core functionality that are ready to use, as well as components that are accessible. Developers won’t have to override default styles because they are not styles.

Although I’m a big Framer fan, there are times when building a simple interactive prototype with React can be useful (and fun). If you’re willing to play with the code, you’ll get closer relationships with the developers as well. You’d be surprised how much you can achieve with just the minimum.

It is important for designers to know what React is capable of, in order to push the limits of what we are capable of achieving. Whether it’s fancy loading screens with placeholder content or infinite scrolling, designers can benefit from knowing what React can do.

These are some of the best React resources you’ll find online – some free, some paid.

React’s community has compiled both free and paid courses here.

react.design

Written by Philip Davis, a designer who used React to design interfaces at Apple and Facebook. This course focuses on the parts of React that are most useful to designers.

Reactfordesigners.com

This guide will teach you the basics of React, walk you through some React projects, and walk you through how to write your first React app.

Getting closer to React will benefit you as a product designer. My suggestion is not for you to learn to code, but to become more familiar with it. Knowing how to apply your work to the people we work with on a daily basis will make your work more meaningful. As a result, you will appreciate even more for what they do to turn ideas into reality.

Leave a Comment