In this article, you’ll learn an opinionated set of steps to get a component library up and running fast. The focus will be on helping you set up a development environment that allows you to develop your components, and also see those components running in a live app.

Getting Started

mkdir acme-components
cd acme-components

mkdir demo src

acme-components
├── demo
└── src

Creating Your Components

acme-components
├── demo
└── src

cd src

npm init

acme-components/
├── demo
└── src
    ├── Button.js
    ├── Input.js
    ├── package.json
    └── theme.css

NOTE:

• These components are purposefully simple so we can focus on the workflow. You’ll build more complex components in the third part of this article series.
• If you use Angular or Vue, you would write these components with those Angular or Vue syntax, and not the React syntax you see below.

// Button.js
import React from 'react';

const Button = (props) => {
  const { type } = props;
  return (
    <button
      type={type || "submit"}
      className="acme-button">
      {props.children}
    </button>
  )
}

export default Button;

// Input.js
import React from 'react';

const Input = (props) => {
  return (
    <input {...props} className="acme-input" />
  )
}

export default Input;

/* theme.css */
.acme-button {
  color: #444;
  background: lightblue;
  padding: 0.5em;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  font-size: 1.1em;
}
.acme-input {
  padding: 0.5em;
  color: #444;
  font-size: 1.1em;
  border-radius: 4px;
}

Building Your Components

npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-react

TIP: There is also a popular Babel preset for Vue.

acme-components/
├── demo
└── src
    ├── .babelrc   <-- HERE
    ├── Button.js
    ├── Input.js
    ├── package.json
    └── theme.css

{
  "presets": ["@babel/react", "@babel/env"]
}

TIP: You can read about more advanced ways of configuring Babel on their docs.

"scripts": {
  "build": "babel *.js *.css package.json --out-dir ../dist --copy-files"
},

NOTE: By default Babel copies all JavaScript files it builds to the --out-dir. The --copy-files option is necessary for copying over your CSS files and package.json file.

npm run build

acme-components
├── demo
├── dist
│   ├── Button.js
│   ├── Input.js
│   ├── package.json
│   └── theme.css
└── src
    └── ...

Building Your Demo

TIP: If your components will be used in multiple types of environments, it might make sense to create multiple demo apps so you can test your components in each. In that case I’d recommend creating multiple demo directories with descriptive names, for example demo-react and demo-angular.

acme-components <-- go here
├── demo
├── dist
│   └── ...
└── src
    └── ...

npx create-react-app demo

cd demo

npm install ../dist

"acme-components": "file:../dist",

import Button from 'acme-components/Button';
import Input from 'acme-components/Input';

import 'acme-components/theme.css';

function App() {
  return (
    <>
      <h1>ACME’s Components</h1>
      <Input />
      <Button>Button component</Button>
    </>
  );
}

export default App;

npm run start

Establishing a Development Workflow

acme-components
├── demo
├── dist
│   └── ...
└── src <-- go here
    └── ...

npm install --save-dev npm-watch

"scripts": {
  "build": "babel *.js *.css package.json --out-dir ../dist --copy-files",
  "watch": "npm-watch"
},

"watch": {
  "build": {
    "patterns": ["*"],
    "extensions": "css, js"
  }
},

npm run watch

Wrapping up