Setup a react npm package to share components or other modules in 5 minutes, without getting hands dirty.
babel-*dependencies bundle doesn’t come for free and usually hard to understand
.babelrccould be hard to get them right
Jump to Source Code.
Create folders and files
mkdir -p react-greeting/src # create folder
Initialize yarn and add dependencies
yarn init -y
Minimal setup only requires
@types/react is here to make your life even easier.
Optional but recommended
touch README.md LICENSE # update content as you like
import Greeting from './Greeting'
import React from 'react'
This creates a
Greeting component which could pass in an optional prop
name, then render a
h1 element with a greeting message. (Obviously!)
types so it looks like this
scripts add a convenient script to build the package,
types indicates where to find type definition file.
This builds out several
*.d.ts, those are the only files which are actually needed to be packaged and published.
# Ignore unnecessary files
Publish to npm
yarn publish --access public
Testing is not included in this post for simplicity, but there are two major tests you could do with your new component.
Here is an example unstated-typescript
Test the package inside a react app using yarn link technique.