React for Web Designers React for Web Designers
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.
<script> tag and write a few lines of code in between:
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):
And that’s it. It looks pretty much the same as before, just simplified. So what’s changed exactly?
- Your Page is now also a function. This is lifesaving and I’ll explain why below.
sayHellofunction 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.
If you’ve dabbled in web design, you already know and love the common tags, like
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.
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.
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
props.name 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.
React vs. other frameworks—is this the one?
Interested in React resources for designers?
Get on the list to be notified when we launch full courses, tutorials and articles related to 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.
Want more design articles?
Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.