The makings of a component

The makings of a component

According to Facebook’s official React documentation, “components let you split the UI into independent, reusable pieces, and think about each piece in isolation.”

Components are the fundamental building blocks of a React application. They can be as small as a button with two states, or as big as an entire screen full of content. They are often composed inside of each other, so it’s important that your components are as independent as possible.

If you want to learn more about how to make components in JavaScript, all the information is on Facebook’s React documentation site:

But let’s state the obvious — you’re reading this because you don’t want to be writing components directly in JavaScript code!

Indeed, as visual building blocks, React components are the perfect kind of thing to be designed graphically rather than directly in code. React Studio lets you do exactly that, and next we’ll show you how it works.

Use vector graphics

In general, you want to use vector graphics in your components rather than bitmap graphics (such as PNG images). Using vectors makes your component easily scalable to different screen sizes and pixel densities. It’s also easier to edit your component’s contents for different states when you have everything in vectors rather than fixed bitmaps.

React Studio has the essential drawing tools for vector shapes, so you can do most things directly in its interface. However, you don’t have to!

We also have a powerful import plugin for Sketch. For this tutorial, I’ll bring in some simple graphics via this route.

Here’s a simple Sketch document with just one artboard:

The component shown here is an online status indicator. We might use this component in a list to show when a particular user is online and also display some contact information information in that case.

To transfer these graphics into React Studio, look in the Plugins menu in Sketch:

In React Studio, the transferred component will look like this:

Again, this is the kind of graphics we could have easily drawn inside React Studio too, but I really wanted to show you the Sketch plugin! It works for much more complex designs too. (You can even specify things like whether elements should go in the foreground or scroll flow groups in React Studio.)

Now that we have some graphics, let’s move on to defining the component’s behavior.

Component properties

Most components are not static, but dynamic. In other words, the content of the component needs to change in response to outside commands.

Properties (also called “props”) are the React way of passing data into a component from the outside. To make efficient use of React Studio, you need to know a bit about properties and how they are passed inside the React app you’re making.

For this “online status indicator” component, there are clearly at least two properties:

– Online / offline status

– User’s contact info (shown only when online)

The online status property needs to affect three elements:

– Circle’s color

– Text content of the big label (“User online”)

– Visibility of the contact info label

Let’s see how to define these in React Studio.

We can start with the contact info because it’s straightforward: the label will simply show the value of a property named “contactInfo”.

Select the element, click on the Data tab in the inspector, and enter the property name in the “Text” field under “Take value from property”:

That’s all!

Now the property’s name appears in the top-left corner of the canvas editing area. There’s also a thin blue line that links the name of the property into the element(s) that are using it:

This makes it easy to see what properties are actually used by your component. (If you’re a designer and you will hand this component over to a programmer, he/she will appreciate this info!)

Next, we want to make this component react to the user’s online status. We could do this in the same way, using text/color properties on the graphics and text (together with some small scripts to select the text content)… But there’s an easier and more designer-friendly way.

States

React Studio has a timeline-style interface that lets you visually define different states for one component. In this case, we just need two states: online and offline.

Click on the “Add State” button above the element list. You’ll see a new state appear on the right-hand side of the list:

This interface is intentionally similar to what you might find in a video editing app.

Each element is like a “track” of video, and you can cut or extend the elements so that they fill multiple states or don’t appear in a state at all. (There are “arrow” and “blade” tools right above the element list that can be used for these editing operations.)

In this case, we could use the first state to represent “offline” and the second state “online”.

The second state is actually all ready, so we only want to edit the first state. Select the “User online” element in State 1. In the editing area, double-click on the element to edit its content, and change the text to “User offline”.

Then double-click on the green circle. This takes you into shape editing mode, where you can modify the vector graphic. Change the fill color for the circle to red:

Click “Back” to return to the element list.

Finally, click on the contact info (phone number) element in the editing area, and press Backspace to delete it because we don’t want to show this info when the user is offline.

Now you should see the following:

Our two states are now ready.

As a last step to making this component more usable in code, you could rename the elements. Click on an element name to change its name. You could name them something like this:

Creating component instances

Now that we have a component, we can use it elsewhere: in another component or a navigation screen. (To tell you the truth, screens are really just components that have special status inside React Studio so that you can make navigation more easily. So there’s no difference whether you use a component inside a screen or another component.)

Open a screen and drag the component from its Project Map block (where it says “drag from here”) into the screen’s editing area:

You’ve just created a “component instance”. You could think of the component itself as being like a blueprint: it’s not quite the thing itself, just the plans you can use to create physical instances of the thing.

In this case, the instance was created by dragging. It’s just a single instance that you can configure. (In another typical use case, component instances would be created by a List element which repeats a component as many times as there are “rows” of data. This tutorial won’t show you that, but you can look in the Elements box to find the List element.)

Select the component instance and look at the Inspector on the right-hand side. You’ll see settings that you can configure for this component:

The component wasn’t renamed yet, so it’s still called “Component 1”.

Click on the “Active component state” selection box and choose “State 2”. The component instance will now display the online state.

Congratulations, you’ve just made a real React component with properties!

Previewing the code

If you’re a programmer (or work with one), you might want to see what the React JavaScript code for this component looks like. You could export the entire project, but there’s an easier way.

Go back to the component itself (double-click on it in Project Map). Then click on “Code Glance” in the app toolbar. This opens a JavaScript editor that shows you the exact code that will be exported.

Code Glance feature in action

Component UI

Previously we saw the user interface for the component instance — just a text field for the “contactInfo” property. This was automatically generated when we added the property.

That UI is good enough for the “contactInfo” property, but for other kinds of properties we might want to have something more complex. For example, if we had a property called “backgroundColor”, we’d probably want the UI to be a color picker instead. Or, we might want to add some explaining text so that the person who uses our component later knows what these properties mean.

For these situations, you can easily override the automatic component UI and design it yourself. Select the component in the Project Map and uncheck “Auto-generate from properties”: