React for Web Designers React for Web Designers

Curious about React? Here's a simple way to understand the hype around one of the world's most popular JavaScript library.

Koen Bok

March 2, 2019

Many years ago web development was simple. You could fire up a text editor and make a website that looked like this:

Don’t worry — if you’ve never programmed before and the above still looks intimidating, give it another read-through. You’ll notice that the different <tags> provide structure for your content. Some tags, like <title>, are special because they help your browser understand that this is your page’s title.

But plain, static webpages are inherently boring. Humans crave interaction and on the Web, that means being able to click on things. To solve for that, some smart people at Netscape built JavaScript, which ended up becoming the world’s most popular programming language for websites. But that’s a whole different story.

All you need to know is that JavaScript itself is pretty simple. You use a special <script> tag and write a few lines of code in between:

Pretty straightforward, right? But this example isn’t much fun because all it does is display when you load the page. That’s not interactive. Instead, you want something to click on and for that you need JavaScript to respond to the actions you take on the page.

That’s where functions and events come in. A function is a way to name a block of code, and an event is something that happens to your page—such as click, scroll, tap etc. In this case, we want the click event to run a function called sayHello (which we just made up):

Congratulations, you’re now a web developer! In all seriousness, you’ve just learned some of the foundational elements of JavaScript. And it’s so simple and fun that anyone can pick it up. And if that’s true, then why does everyone think React is so hard?

Enter React

React is a JavaScript library that makes it easier to create interactive UIs. You may find that hard to believe, so lets break it down. Here’s the same block of code we saw before, but written in React:

Open example 

And that’s it. It looks pretty much the same as before, just simplified. So what’s changed exactly?

  • In React, you write your HTML inside your JavaScript (instead of the other way around).
  • Your Page is now also a function. This is lifesaving and I’ll explain why below.
  • The sayHello function is exactly the same, but you don’t need a tag anymore!
  • Finally, the <button> is still the normal HTML you know and love.

So I could stop here and leave you with the understanding that React is all about using less tags and speeding up your workflow. But that’s not why everyone’s so excited about building things in React. It’s not just about using fewer tags, it’s because you can create your own tags. And the tags you create in React are called components.

React Components

If you’ve dabbled in web design, you already know and love the common tags, like div, p, span, etc. For the purposes of this exercise, let’s say you’re building a typical website navigation in HTML. Here’s what that would look like:

Pretty simple, but as you can see, very repetitive. For each menu item, you needed to write a whole bunch of the exact same HTML, with different icons and titles. Even worse, if you later decide to change how a menu item looks, you’ll need to copy, paste and update it for each item.

So let’s try and solve this like the smart computer people that we are. Imagine for a second that on top of all the existing tags, you could make up new ones. And if you had those superpowers, wouldn’t you organize your menu more like this?

Much nicer and cleaner, not to mention more efficient. You’ve just created your own version of HTML, a component made just for the website you’re working on. You can almost think of your components as tiny templates, perfectly integrated with HTML through tags.

I’m sure you guessed by now that this is exactly what React lets you do. Let’s look at the exact version of the above in React.

If you quickly scan this, it should look fairly straightforward, with just a little more JavaScript-y elements, like function and return. I’ll explain below, but generally you define the MenuItem first, and then use it as many times as you like in the Menu as a proper HTML tag. Pretty cool, right? Now let’s zoom in on this even more.

Remember the function from above? Functions are a way to define little blocks of code in JavaScript with input and output, much like a mathematical formula. You put some numbers in and it returns another number. That is exactly what return does here too.

In the example above, the functions are not just used to define a piece of code, but also to name them. And that name is automatically turned into a tag by React, which you can then simply use within any other part of your project, exactly like the MenuItem tag above. Essentially, you can think of a React component as a tag and as a function; all three are the same. It’s worth noting that this gets more complicated as you dive deeper, but for now, this should help you understand the basic principles.

The last part is the input of your components. In this case, that is name for the MenuItem. Inputs in React are called props, a shorthand for properties. If you’d like to use the name prop, you can simply write just as we did in the example. You’re free to pick any name you like and use as many as you need. To use the inputs, you just set the name property of the tag like you would do for anything else in HTML: <MenuItem name="Home" />.

What else can you do?

The sky’s the limit, really. Just use your imagination and pretend you’re the inventor of HTML, because in a way, you are. Now you can build your entire website (or a whole web app) that ends up looking like this:

You can turn all your components into a system, document them, and share them with your team where anyone who knows HTML can use them. If you change a single component, every part of your project will automatically be updated.

And of course, you can style your components and make them interactive. Everything you add will stay contained within the component, so it always works no matter where you use it. I’ll dive deeper into styling and JavaScript in another article, but here is a simple, styled example. If you know CSS, it should be easy to recognize the styling properties, although React uses a camelCase style for them.

Open example 

React vs. other frameworks—is this the one?

JavaScript frameworks seem to appear and disappear as fast as hip sneaker types, sending engineers into furious debates over which one is best. So why is React different and more importantly, why is it worth learning? Perhaps you’re thinking to yourself—well, won’t there be something else in a couple of months?

The answer is to consider React beyond the scope of JavaScript. Instead of just another framework, look at React as a way to build and ultimately think. React allows you to chop up huge projects into small components, which you can then composite, reuse and share, perfectly integrated with the way HTML already works. That’s its real superpower.

Interested in React resources for designers?

Get on the list to be notified when we launch full courses, tutorials, and articles related to React and Framer X

React is just one implementation of this idea and it’s arguably the most popular one. There are many other variants like Vue, Angular, etc, but they all converge towards this same structured way of thinking. Once you master React, it’s not that hard to explore the subtle but smart differences between the different frameworks and pick the one that works best for you.

To circle back, many people perceive React to be hard mostly because of its flexibility. There’s a lot that goes into it, many layers, add-ons and alternatives that make it seem more difficult than it really is. But as I’ve hopefully demonstrated above, React is very simple at its core. If you’re all fired up, check out the React section in our Tutorials page for some resources to get you started.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.