Skip to content

Latest commit

 

History

History
103 lines (60 loc) · 3.66 KB

2018-10-05-component-development-setup.md

File metadata and controls

103 lines (60 loc) · 3.66 KB

Component Development Setup - draft

  • Status: accepted
  • Deciders: Pietro, James
  • Date: 2018-10-05

Context and Problem Statement

Developing a React component to be published as a standalone npm module can pose a few challenges, if it's left as an after thought while using create-react-app. Eg identifying the boundaries between the component and the rest of the application.

Decision Drivers

  • A simple and straight forward way to develop a React component
  • Easy to work and update
  • Easy to build and package the component
  • Close to none learning curve for newcomers to the project.
  • Able to see a preview of the component, in a "demo environment"

Considered Options

Consulted this article React tools you need to use in your components development

Decision Outcome

Storybook and bit, seemed great if you are defining a style guide, and want a tool that gives you a fair bit of functionality to help with that, but they might have a bit of a learning curve, and might put new people off in getting involved if it requires familiarizing with those systems to get up to speed.

create-component-lib seemed straight forward to use, simple and transparent in its implementation with the accompanying blog post. It's built on top of create-react-app, and that can used to create demo application to showcase the component in action.

So decided to use create-component-lib module.

And updated it to Create React App 2.0 to be able to use CSS modules.

As well as updated babel-cli to transpile the code of the component, see notes for more details on this setup.