Intro

React & NPM living together in harmony.

Publishing an open source React / Preact component or library to npm can be very rewarding, but getting started with the setup is still more daunting than it should be, especially compared to the relatively easy process of creating a React app via create-react-app or create-preact-app.

Because JS module formats and ES features are all over the place and are unlikely to be normalized anytime soon, npm modules must support both the lowest common denominator format (commonjs) as well as modern ES6 modules without relying on commonplace language features like JSX and class properties that most of the React community takes for granted. For this reason, it’s pretty difficult to take a component you’ve written for an app and publish it directly to npm.

Kylo Ren attempting to publish his first React module…

The purpose of this article is to help React authors easily publish their own, high quality component modules.

Goals

There are some existing React library boilerplates, but none of them fulfilled the following goals which we set out to accomplish:

• Support all possible JS language features during development
• Build process to convert source to commonjs and es module formats required for practical usage on npm
• Use Rollup for build process and Babel for transpilation (we discuss Rollup vs Webpack later on in this article)
• Must come with an example app using the create-react-app standard
• Allow the use of npm modules within your library, either as dependencies or peer-dependencies
• Support importing CSS in your module (note that CSS support will be a noop if you’re using a css-in-js approach)
• Thorough documentation

It’s particularly important for module authors to include a simple, self-contained example app alongside the module itself, as it serves two useful purposes:

1. As a local, hot-reload server for developing your module
2. Easily publishable to github pages so users can quickly demo your module (or comparable hosting alternatives like surge.sh or now.sh)

Now that our goals are clearly defined, check out the boilerplate repo we’ll be starting from:react-modern-library-boilerplate - Boilerplate for publishing modern React modules with Rollup

Walkthrough