Wireframes and Prototypes With React: Part 1

Why Prototype and Wireframe in the Browser?

There’s been a ton of good articles on “why prototype” lately, so go ahead and read one if you aren’t sure. The short of it is, you aren’t making something for people to look at. You’re making something for people to interact with, so your design comps better be something people can use. And since we are building dynamic interfaces, why not wireframe in the browser?

What is React?

React is a JavaScript framework created by Facebook. Here’s what they say it is:

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

Hey, that sounds exactly like what we want to do!

Why React?

There are a lot of tools that have been designed for prototyping like InVision, Pixate and some that have been shoehorned into that role (I’m looking at you, Quartz Composer.) So why use a JavaScript framework instead of these other tools?

Reuse

You are going to wind up making similar components across multiple prototypes; either variations in a single project or across multiple projects, so why create them more than once? Create a generic WebSiteHeader and use it over and over again by adding a single tag. Because your components are text files, you can move them around, edit them in whatever app you want, hand them off to anyone, and if you keep then in source control, you can have any number of people use, add, or update your component library easily.

Simplicity

Imagine creating a fully interactive wireframe by just typing this:

var ContactListPage = React.createClass({
    render: function () {
        return (
            <Page>
                <SiteHeader title="SuperCo." navItems={ ['Home', 'About', 'Contact'] } />
                <ContactList contacts={ contactData } />
                <ContactDetailPane feature=={ contactData['bob'] } />
                <SiteFooter message="Lorem Ipsum" navItems={ ['Home', 'About', 'Contact'] } />
            </Page>
        );
    }
});

Your prototypes will be assembled from a few blocks, so they are easy to understand at a glance; easy to build, rearrange, and change. There’s no specialized software to learn: nothing other than a text editor.

Portability

Rather than tools that need specific apps to open your prototypes or require access to something online, by using React you can put your work up anywhere for people to look at, and you can even zip up your stuff and email it to stakeholders who can view it in any browser: even off-line.

Manipulate Content Easily

Sure that list of friends looks great with 5 items. What does it look like with 1? With 47? You can use data-driven prototypes to quickly see different scenarios. Because our React wire frames are text-based, we don’t have to make new images if we want to try out different amounts of content.

Decreased Dev Time For Web Apps

If you’re prototyping a web app, you can use what you’ve done as a starting point for creating the real thing. With the introduction of React Native, this may soon hold true for Mobile apps as well! Why let the effort you put into your prototypes go to waste?

But Code Is Scary!

Maybe just a little, but thanks to Reacts HTML-like JSX syntax, it will feel familiar, and since we are focusing on working fast, we don’t need to worry too much about writing great code: we just want to get our ideas across as quickly as possible.

Setup

Get React

To get started, we will be grabbing the React library from its download page. You should see a Download Starter Kit v0.12.2 button (the current version as of this writing.) Click it, and much to your delight, a react-0.12.2.zip file will be transported through the internet tubes to your computer. Unzip this and, you’ll get a react-0.12.2 directory. Move this somewhere you can access it easily.

Create a project folder and get React in there

Create a new folder somewhere where our prototype is going to live. Copy the build directory from the unzipped react-0.12.2 folder to it. This will let us use React without an internet connection or local web server.

Learn the basics

I’ll be starting from scratch and going slow, but you may want to read through a quick introductory tutorial to have a little bit of familiarity with React before you continue. There are many, many, many out there, including this sitepoint one, a slightly outdated but good scotch.io intro and a more technical in-depth one at tutsplus. Of course, the React homepage also has a pretty nice overview as well. You don’t have to do this by any stretch, but you may find it helpful.

A Few Notes, Warnings, and Disclaimers

Since this series is all about rapid prototyping and cranking out wireframes, I will be using some practices, especially in the first few articles, that “real developers” will cringe at. Using in-browser JSX transformation, global variables all over the place, etc. While these certainly would not be in an article talking about production code or making “real apps”, the fact that speed of iteration is the most important thing here is why I feel comfortable with the trade-offs of implementing things the way I have.

Let’s Get Started!

We’ll be building a wireframe for my brilliant startup idea: Contacrrrr. It is a web app that manages your contacts. While it is certainly not a new idea, it is missing a vowel, and repeats a consonant in its name, so it will have VC funding in no time!

After moments of sketching, I’ve decided on this basic UI, which we will wireframe in the browser with React.

Picture of a sketch of a made up product

Conactrrr, the best thing ever

Intro to React: Hello World!

Before we start our wireframe, let us make sure we have everything set up properly and get our feet wet with React. Open up that folder you made for your first project, fire up your favorite text editor, perhaps grab a beverage, and let’s make a thing! Create a new HTML file named template.html and make it look like this:

<!doctype html>
<html>
<head>
    <title>React Prototype Template</title>
    <script src="build/react.min.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>
<!-- PUT STUFF INSIDE HERE -->
<!-- STUFF GOES ABOVE THIS -->
</body>
</html>

This is is a blank document that includes the React library and the client-side JSX Transformer that we can use a base for all our prototypes. The JSXTransformer turns our JSX (React’s version of JavaScript) into plain JavaScript that the browser understands.

Just to be sure everything is in the right place, your folder should look like this now:

yourFolder/
   build/
   template.html

To make sure everything is working, let us do the traditional Hello World example. Make a copy of your template file and name it helloWorld.html. Open it up and add the following script inside the body tag:

<script type="text/jsx">

// create HiThere component
var HiThere = React.createClass({
    render: function () {
        return (
            <h1>Hello World</h1>
        );
    }
});

// draw HiThere inside the BODY tag
React.render(<HiThere />, document.body);

</script>

A quick walk through of what the above does. First, note that there is a type in our script tag with a value of text/jsx. This is to make sure the browser doesn’t think this is normal JavaScript and try running it (that would be bad.) Next up, we create a HiThere component. This is a very simple component that just returns a header element from it’s render function. Every React component has a render function which spits out what should be drawn in the browser. We then tell React to draw this component into the body element of our page.

If we load our page in a browser, you should see a big Hello World title. If not, make sure that you have the react library build folder in the same directory as your helloWorld.html prototype HTML file, that you spelled things right in you script tags, and that you aren’t getting any errors in your developer console.

Now that we have a good starting point, we can start wireframing! Continue on to Part 2.


Thanks for reading, and until next time, happy coding! I would love to hear feedback or answer any questions via twitter: @veddermatic or by email

back to top