You don’t need webpack for your React Components Library

If you arrived here maybe you started copying around the same components in your projects more than once, and you started questioning how to write a shareable Components Library.

TLDR;
As the title says, you don’t need webpack for your React Components Library, just Babel.

I will not explain what is a React Components Library or what is webpack because it’s not the purpose of this article.

Photo by Emile Perron on Unsplash

How to write a React Components Library?

Giving an answer to this question is simple, just write a React Component, only a js or jsx file and you have your library.
Making it shareable is simpler than you think.

Let’s start writing some code.

Start creating a folder for the library.

~/ $ mkdir awesome-components-library
~/ $ cd awesome-components-library

and initialize npm

~/awesome-components-library $ npm init -y

Create your first component

// awesome-components-library/src/Button.js 
import React from 'react'
function Button(props) {
  return <button>{props.children}</button>;
}
export default Button;

The folder structure should look like this:

awesome-components-library 
- src/Button.js
- package.json 
- package-lock.json

Now we have to try to use our library in a project. For learning purposes we will not use the “standard way”, by publishing it on the npm registry, but we are going to use the npm link feature, which is even useful for debugging.

~/awesome-components-library $ npm link

Great! We have created our library, now we have to use it.

We can use create-react-app to make it simpler:

~/ $ npx create-react-app demo-app
~/ $ cd demo-app
~/demo-app $ npm link awesome-components-library

Edit the src/App.js to use the library:

// demo-app/src/App.js
import Button from "awesome-components-library/src/Button";
//...
export default Button;

Well done, you should see an error because this example does not work! Before going to the solution, let’s try to ask “why”.

The demo-appuses webpack to bundle and serve the code to the browser.
By default webpack does not transpile code under the node_modules folder, thus, the library will not work, because the JSX code is not transformed into a valid javascript code.

What do we need? Transpiling!

babel is the answer, and configuring it is simpler than you think.

~/demo-app $ npm install --save-dev @babel/core @babel/cli

With the above code, we have installed the babel cli, now we need to say to babel how to transpile the code, and for this, we need @babel/preset-env which allows you to use the latest JavaScript, and @babel/preset-react used for JSX transformation and other react relative stuff.

~/demo-app $ npm install --save-dev @babel/preset-env @babel/preset-react

Now, to transpile:

~/demo-app $ npx babel src -d lib

The above code will transpile js files in the src folder and will output them in the lib folder.
The last step is to use the transpiled version of the file in our demo app

// demo-app/src/App.js
import Button from "awesome-components-library/lib/Button";
//...
export default Button;

Now it works!

We have setup a React Components Library without the headache of setting different tools.

I think keeping it simple and asking “why” before start writing code based on community concerns, is a good way of acting, you will be more conscious of what you are doing spending only half an hour more.