Creating a Design System for ReactJS from Scratch

But if you’re here, I don’t need to convince you of the advantages of having a design system. You already know the benefits of having a single source of truth for your web components across all projects, and how empowering it is for developers to have a dedicated ecosystem to control and create a consistent style guide.

You’re probably asking yourself the same thing I did: What exactly does it take to make a design system? I wrote down traits I’d encountered across most systems that were absolutely essential and went on my way.

It’s pretty simple when you distill it down.

We need components to share. A place to build them and another place to document them. And linting and testing that ensures code is error free and working.

For the sake of this tutorial, I’ll be going with the following stack:

Let’s tackle each of these needs one by one, and build this design system piece by piece.

We’ll be building our components with ReactJS, and in this case, styling them using a CSS in JS library. You can totally use CSS, SASS, LESS, or whatever you prefer in your own system. I chose CSS in JS for the benefits when used in design systems.

This allows our components to be as lightweight as possible, and slip in and out of other apps without requiring global styles that would conflict with other systems.

I’ll quickly cover how I chose the CSS in JS library in correlation to design systems. If you’re not that interested in those, just skip past to “Starting your project”.

I left it down to a few factors: Ease of use, Bundle Size, and Performance (load and render times).

At the end of of the day, I chose JSS (specifically react-jss for React integration). It’s got great performance, small bundle, and large system’s like Material UI have shown it’s worth.

I initially chose Emotion, because I liked writing real CSS instead of JSON. But theming with Emotion didn’t work as well as it did with JSS. Emotion technically performs better when you don’t used it’s ‘styled’ components, but it forces you to use them when you want theme variables in your CSS. Less perf, more abstraction and dependencies — not what I wanted for this system.

JSS was the clear winner, time to build our system.

5. Install the dependencies: npm install react-jss

6. Go inside your package.json and add peer dependencies:

7. Create a .babelrc file in the project root and add these preset configurations:

8. Create a new folder in the project root called .storybook and create a config.js file in that folder with the following config:

And now you have a base project to start developing components! Let’s break down what just happened:

We created a new project (NPM, Git, etc), installed all the dependencies, and setup default configurations for Babel and Storybook. The Storybook config specifically tells Storybook to grab all the stories from the src/components/ folder that have the suffix .story.js.

We’ll be placing our components in the /src/components/ folder. Each component will be stored inside it's own folder, preferably Pascal cased (ComponentNameExample). Inside will contain any components, stories, tests, and an index.js to provide default exports for all the components.

It should look like this:

Let’s start by creating a new component at /src/components/Button/Button.js:

Let’s break this component down and understand how JSS works.

The first major thing we see is a variable for CSS styling called styles. In this case, the styles variable is a function that accepts a theme object, and returns an object of CSS classes. That theme object contains global values we place in a theme.js file, allowing us to set dynamic values like theme.text.color.

Below the styles variable is the actual Button itself, which is just a functional React component. The injectSheet HOC processes the style variable and provides a classes prop on the Button component. We grab our class names from there, and apply them using className={classes.buttonClassName}.

So basically:

Now that we have a component, let’s actually figure out how to look at it.

The problem with developing React components is having a dev environment setup to make the process possible. You’ll usually find yourself using a boilerplate like Create React App, or creating a custom Webpack config to compile the JS to a page. Instead of bloating our project down with all the Create React App dependencies, or going through the hassle of setting up Webpack just to look at components — we use StorybookJS.

Our Storybook config (/.storybook/config.js) looks through our src/components/ folder and finds any files with the suffix .story.js.

We can create our first story by making a file in src/components/Button/Button.story.js:

Storybook uses a function called storiesOf to create stories of your component. We chain .add(description, component) methods to it with the variations of our component.

The only special thing we do here is wrap our components in a <ThemeProvider> component. This comes from react-jss, and uses React's Context Provider system to pass the theme object down to our <Button>. If we didn't wrap this, we couldn't use the theme variable in our components.

If you make any changes to your components and save while Storybook dev server is running, it’ll re-build and reload with any changes.

You’d be surprised by how easy it can be to start developing React components and deploying them as NPM packages.

At the end of the day, you only need to write React code and commit it to git. There’s no need to setup crazy build processes like Webpack or Parcel, or even Babel really. Your components will be imported into other people’s projects who will handle transpiling on their end. The simpler you keep your project, the better actually.

In the next part of the tutorial I’ll cover adding testing, linting, and automated component documentation!

Rock on 🤘 Ryo

References

Related posts:

Setting up a closing deal checklist is just a very easy to do item that helps turn closed deals into paying customers. As the team grows there are more hand offs between teams ie Sales ->…

Fast and rapid charging the Opel Ampera E in Germany on the side of the highway. Learn the realities of electric vehicle charging and fast charging infrastructure available in Europe

My dog is a mutt with scraggly beige fur and a cowlick on her face. Her name is Buttercup. Butter for short. We think she is a mix between a chihuahua and some kind of terrier. Unless she is…