A Complete Guide On How To Build A React Library With Vite

Sometimes you like to build a React library, for example for other developers to use it, or install through npm, or locally.

After browsing the available sources, it occurs it’s not completely documented anywhere. So here’s my instruction working as of October 2023.

Prerequisitories

• Node.js
• pnpm (you can use yarn or npm instead if you fancy)

We will create two projects. One will be the React library, and the second will be a React application that uses that library.

Creating Library

1. Call:

pnpm create vite library --template react

This instruction will create a folder with a React project. We decide to name this project (and folder) library.

If you want to create a TypeScript library, you can use:

-- template react-ts

I won’t cover this variant in this tutorial, you can figure it out.

2. Call the commands below to go into the library folder and install dependencies:

cd library
pnpm install

3. Create a component called Foo.jsx under src folder. It will be a component we want to export:

function Foo() {
  return (
    <>
      blablabla
    </>
  )
}

export default Foo