How I improved my React development experience by leveraging visual tools

#react #webdev #typescript #css

When we’re developing a UI project, being able to run and debug our components fast is the key to a good dev experience. Commonly, we do this in an isolated development environment where we render and interact with our UI.

Working in a tool that provides both rendering and editing capabilities, developers can reach even shorter cycles, and in turn, improve the development experience.

Wix Component Studio (WCS) is an editor that lets developers visually develop React components in isolation through a UI. WCS understands your code structure and edits it as a developer would, letting you focus on the features and behavior of your business logic.

Building the component

In this post, I’ll walk you through the basics of building a React gift card component for a fictional fintech company called CloudCash. I’ll show you how I did it from scratch through a combination of visual editing in WCS, through the built-in code editor, and using my own IDE.

Here’s what we’re going for:

Creating the new component

The first thing I did after opening Component Studio on my project was create a new component. I clicked on the New Component button and gave it the name “GiftCard”.

Behind the scenes, WCS created three files – gift-card.tsx in our source directory for the component, gift-card.board.tsx containing what WCS needs to render in isolation as a “board” onscreen, and gift-card.module.scss, the stylesheet for the component.

The Elements Panel on the left shows three nested elements – Window, Canvas, and our component, GiftCard. Let’s first resize the component so that it begins to look like an actual gift card by selecting the Canvas element, opening the Properties panel on the right side, and giving it a canvas size of 320px by 205px.

I’ll edit the GiftCard component now by selecting it in the Elements panel and clicking Edit Component.

This changes our editing context from the playground (board) to the actual gift card component, and any changes that I now make are made to the component’s code and affect all instances of it.

Styling the component’s root HTML element

Now that I’ve moved into the scope of the component, I’ll be applying all the styles that belong to the root HTML element. First, I’ll match the height of the component to the canvas by setting it to 100%. This is done by selecting the root node of the component, ‘div.root’ in the Elements panel, and in the Styles panel, selecting the ‘.root’ selector and setting its height.

Next, I’ll set the background color to ‘#282B2D’, the text color to white, and the border radius for the corners to 18px. Finally, I’ll set the display to flex, the alignment to center, the justification to center, and the direction to column.

Adding an element to the component

Right now, I have the layout of the gift card, but my component has only a single element. I'm going to need to add an h2 element to it to give it a proper title. While I can do this in the code, WCS allows me to do it visually. I'll click the Add button in the Elements panel to open the Add Elements panel, where I can search for the h2 element and drag it over as the first child of the root element.

Now I’ll set the text by selecting the Heading 2 text element and giving it the “CloudCash” value in the Properties panel.

Adding a class to an element

When I dragged the h2 element to the Elements panel, WCS added an h2 element to my code. It does not have any class applied to it yet. To style it, I’ll need to add a class to it, and then add a selector to target this class in the component stylesheet. I’ll do this part visually through the Styles panel.

While still selected on the h2 element, I can give it the class name “title” by clicking “Create or apply a class”.

Creating the class through WCS saves effort by suggesting the component CSS file, adding the class selector to it, and applying the class to my component file in one action.

I have a new class at this point, but it doesn’t have any styling yet. Let’s fix the margin and tweak our fonts to make our gift card look a bit better. While I can edit it visually using the Styles panel, in this case I’ll choose to add my CSS through the code editor to show how the code, the stage, and the Styles panel are always in sync. I’ll jump directly to the relevant point in the code by hovering over the selector that I created above and clicking Edit Code.

This brings us to the ‘.title’ selector in the code, where I’ll add a couple of declarations to refine our component some more. I’ll copy and paste the following code snippet to my code:

.title {
    margin: -8px 0 12px;
    font-weight: 200;
    font-style: normal;
    font-size: 36px;
}

Adding a new prop to the component

To make our component truly reusable, I’ll need to have it accept a property to allow controlling the gift card amount from the outside.

We’ve already seen how I can make changes to my component visually and through the code drawer, but WCS also syncs changes to the project code on my file system. This means that I can use my own IDE.

Let's take a look at the component code created by WCS so far by opening the “gift-card.tsx” file in VS Code.

Now let’s add a property called “amount” of the string type. I’ll then destructure it in our component props, give it a default value of “$100”, and lastly, replace the “GiftCard” text in our component with the {amount} expression.

To demonstrate how easily WCS allows you to create examples for your components, I’ll go back up our scope to our original starting board, and through there, give our component an alternative prop value of “$200”. As you might imagine, this capability is very useful for complex components with multiple properties.

And with that, I’ve completed everything I set out to do, and the component is ready for use! I tried to keep this example simple to keep this post focused and concise, but I can create any design that CSS supports.

Check it out for yourself

Interested in learning more about WCS? It’s currently in alpha stage, and we’re expanding user access as we iron out the kinks and refine the overall experience.
Visit wixcomponentstudio.com to sign up for early access and try out our demo.