Posted by Will Thomas on Sep 14, 2017

React and Styled Components for Designers

Recently at MyBuilder we’ve started to adopt React more and more (Facebook’s Javascript UI framework), and it’s presented me with some really interesting opportunities to start changing the way I build and style interfaces. My goal here is to explain how somebody like myself — a designer — can get up and running with React quickly, and start building and styling components.

TLDR: Show me how to make a React sandbox with real CSS.

I started making websites in 2008, and ever since it’s been drilled into me that you keep your HTML, CSS and JS separate. Well it seems that is no longer case, React will have you writing HTML in your Javascript and Styled Components will have you writing your CSS there too, and I’m here to assure you this isn’t a terrible thing.

I used to be 'with it'. Then they changed what 'it' was.

The goal here is component delineation, we want to create a set of self contained reusable components, that can work on the web and native apps (React JS, React Native). Now more than ever designers are expected to design and maintain styles for increasingly sophisticated applications that work across a number of platforms; React in tandem with Styled Components can help us avoid these problems, use real CSS, and keep styling manageable at scale.

If you are at all familiar with the BEM CSS methodology (Block, Element, Modifier), this workflow essentially takes those principles to their logical conclusion and forces styles around reusable components.

If you need more convincing on how this works and why you should change up your workflow, I heartily recommend reading A Unified Styling Language by Mark Dalgleish.

A React sandbox with real CSS

At MyBuilder we’re using React to build more and more of our complex interfaces, that means I need to start getting to grips with React so I can contribute components that will make it into production. Fortunately for me, the rest of the team has found a great set of tools for me to use, and fortunately for you I’m going to show you how to use them, so let’s get started!

So what are we going to achieve by the end of this tutorial?

  • Create a React app using Create React App.
  • Install and Run Storybook, an interactive development & testing environment for React.
  • Install Styled Components, a library for styling React components with real CSS.
  • Create a basic component and view it in Storybook.
  • Style a component with real CSS.

If you haven’t already go ahead and install Node and npm.

Create React App

If you’re interested in getting to grips with React (and I do hope you are), you’ve probably heard it can be less than straight forward. That may have been the case but then Facebook made Create React App, a zero configuration tool to get you up and running in no time. In fact it’s as easy as this…

npm install -g create-react-app
create-react-app my-app

Go make yourself a cup of tea and when you get back, it might be done (all 915 dependencies). And that’s all we need it for really. This is a great environment for you to experiment with React, but in this tutorial we’re done with it already.

Install Storybook

We’ll be developing our components in Storybook, this environment runs outside of the app we just made, allowing us to develop UI components in a sandbox. Storybook is also super simple to get up and running…

npm i -g @storybook/cli
cd my-app
getstorybook

Install Styled Components

Before we take a look at the sandbox, let’s get our last piece of the puzzle in place, Styled Components. For me this is the piece that makes React components really compelling; Unlike a lot of styling implementations available for React, Styled Components uses tagged template literals which allow us to write real CSS directly into our components. Again installing is very easy, just run the following command…

npm install --save styled-components

Running Storybook

Now we’ve sourced all the libraries we need, we can get the Storybook sandbox running…

npm install
npm run storybook

You should then get a URL to view your new Storybook. Once there you’ll notice a sidebar with a list of sample components on the left and a content area to show the rendered components. It’s not too hard to imagine — that once you have started to build up a collection of components — you could very easily use Storybook as a living style guide.

The Storybook UI

Now let’s take a look at the file structure we’ve just made. Do yourself a favour and don’t look in the node_modules directory and instead take a peek inside src. If everything has gone according to plan — you should be able to find stories/index.js, this is where we manage our Storybook by adding new sections (or stories) and within these, new components.

Storybook comes with a few example components, like <Button/>. But what are these components and how do we make our own?

Building components

The Storybook example modules are imported from elsewhere in the project, so lets ditch those and make a new one and add it it to our storybook. Go ahead and open stories/index.js and clear out everything except for those first 2 imports. Then we’ll add a new constant called ‘MyComponent’ and output a little bit of HTML, make sure your component name starts with a capital letter or React will assume your trying to add a generic HTML element. Finally we’ll add a new story called ‘Example story’ and then add our new component to that.

Your stories/index.js file should now look like this…

import React from 'react';

import { storiesOf } from '@storybook/react';

// Define a new component
const MyComponent = (props) => (
  <div className={ props.className }>Hello { props.name }!</div>
)

// Add a new story
storiesOf('Example Story', module)
  // Add our new component to the story
  .add('My Component', () => <MyComponent name="world"/>);

The eagle-eyed amongst you may have noticed that I also added some properties (props) into our component. The property className is reserved and is used to hook in styles to the component (more on that later). The other property name I’ve defined myself, and this can be used when we output the component in the Storybook (or anywhere else for that matter); In the component this is accessible via { props.name }. Go ahead and try changing the name and see what happens in the browser, or even try adding your own new properties.

Adding styles

As we’ll be using the Styled Components library to write real CSS, we have to import it into our document first. Incluce the following line with our other imports…

import styled from 'styled-components';

In order to style a component we essentially duplicate it by dropping it into a function provided by Styled Components called styled(). This way we preserve the original component and have a styled version, allowing us to make multiple versions of any given component. We then use tagged template literals to write our CSS, this means we can write CSS the way we’re used to it, and add logic without having to use concatenation.

All of our components properties are available here too, so your CSS can be more expressive than ever! Oh, and if you can’t live without LESS or SASS, there’s already a library called Polished with all your favourite functions and mixins!

const StyledMyComponent = styled(MyComponent)`
  background-color: ${ props => props.color ? props.color : 'blue' };
  color: white;
`;

Now if we go back to our Storybook story we can update MyComponent to StyledMyComponent, you should now see the styled version. As you can see above we can use component properties to change our CSS too, let’s use the color property to modify our CSS.

.add('My Component', () => <StyledMyComponent name="world" color="#bada55"/>);

If you’re already getting excited, then I strongly recommend checking out this presentation by Glen Maddern explaining what else you can do with Styled Components.

So there you have it, a quick set up sandbox with React components and real CSS. Of course we’ve just scratched the surface. Once you start to separate out more complex components into their own files, you can see how Storybook becomes a powerful tool that allows you to develop and share components outside of your usual development environment.

Jobs at MyBuilder and Instapro

We need a brilliant designer, who loves the web and can implement their designs with solid HTML and CSS skills.

View vacancies
comments powered by Disqus