DEV Community

Cover image for Building and Publishing a React Component with Vite and NPM
Samuel Peters
Samuel Peters

Posted on • Edited on

Building and Publishing a React Component with Vite and NPM

React has become one of the most popular front-end frameworks due to its component-based architecture, and with the ease of sharing packages through Npm, building and sharing your own React components has never been easier.
In this guide, we'll walk you through the steps of building your own React component from scratch, using the Vite-React framework to streamline the process. We'll cover everything from setting up your development environment to publishing your component on NPM, ensuring that it is both functional and accessible for other developers to use.

Prerequisites

Here are some prerequisites you need to have before diving into building a React component with Vite and publishing it on npm:

  • Basic knowledge of React, JavaScript, and NPM.

  • Node.js installed on your machine.

  • An N.P.M account to publish your package.

  • A GitHub Account for Hosting your Hosting your code repository

Getting Started

To get started, we'll create a new React project using Vite. Vite is a build tool that is optimized for frontend development, and it provides a fast and easy way to set up a new React project.
First, let's create a new directory for our project and navigate to it in the terminal.

  • First Step is to initialize the Vite-React package in our project directory by running the following command:
yarn create Vite react-library-scaffold 
Enter fullscreen mode Exit fullscreen mode

follow the prompt using the arrow key to navigate to react and javascript

Image description

  • Next navigate to the newly created Folder and run the yarn to install the react dependencies

Image description

On completion your file structure should look like this
Image description

  • Next step is to add more information to the package.Json file and modify our vite.config.js files open your terminal and type npm init and enter the name of the library, descriptions, authors ... the new code block should look like this.
{
  "name": "react-library-scafold",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.2"
  },
  "description": "A react-Library-Scaffold",
  "main": "vite.config.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Petsamuel/react-library-scaffold.git"
  },
  "keywords": [
    "react",
    "components"
  ],
  "author": "Peter Samuel",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Petsamuel/react-library-scaffold/issues"
  },
  "homepage": "https://github.com/Petsamuel/react-library-scaffold#readme"
}
Enter fullscreen mode Exit fullscreen mode

Add this Block code to your Package.json
it's specifying where the build folder needed for the component should be stored.

 "main": "./dist/react-library-scaffold.umd.js",
  "module": "./dist/react-library-scaffold.es.js",
  "exports": {
    ".": {
      "import": "./dist/react-library-scaffold.es.js",
      "require": "./dist/react-library-scaffold.umd.js"
    }
  },
Enter fullscreen mode Exit fullscreen mode
  • Next step is to install test dependencies vite, react-test-renderer
npm install @testing-library/dom @testing-library/react c8 eslint eslint-plugin-react jsdom react-test-renderer vitest --save-dev

Enter fullscreen mode Exit fullscreen mode

then add the test script to your package.json file
Image description

  • Next step is configuring the Vite.config.jsx file

add this block of code there

import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve("src", 'src/components/index.jsx'),
      name: 'react-library-scaffold',
      fileName: (format) => `react-library-scaffold.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React'
        }
      }
    }
  },
  plugins: [react()]
})
Enter fullscreen mode Exit fullscreen mode

Make sure you replace name: 'react-library-scaffold' with the name of your component

Likewise, make sure that react-library-scaffold in the filename value is changed to the name of your component

Configure Testing

create a vitest.config.js file in your root folder and add the following code

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    globals: false,
    environment: 'jsdom'
  }
})
Enter fullscreen mode Exit fullscreen mode

Creating Components along with Tests Snapshots

The entry point for your component is /src/components/index.jsx.

For now you we want to create a dummy HelloWorld component as in the examples below, then once the development environment is set up, come back and build your component.

  • Create your component in /src/component/index.jsx. Here's a very simple example:
import React from 'react'

export default function Greeting(props) {
  const {
    message= 'World'
  } = props

  return (
    <div>Hello, {greeting}!</div>
  )
}
Enter fullscreen mode Exit fullscreen mode
  • Add test
import React from 'react'
import renderer from 'react-test-renderer'
import { describe, expect, it} from 'vitest'
import Greeting from './index'

describe('Greeting component', () => {
  it('Greeting component renders correctly', () => {
    const component = renderer.create(
      <Greeting/>
    )

    const tree = component.toJSON()

    expect(tree).toMatchSnapshot()
  })

  it(' prop working', () => {
    const component = renderer.create(
      <Greeting message={'Universe'} />
    )

    const tree = component.toJSON()

    expect(tree).toMatchSnapshot()
  })
})
Enter fullscreen mode Exit fullscreen mode

You can run your tests by typing:

npm test
Enter fullscreen mode Exit fullscreen mode

Or you can run tests and set a watch to re-run tests when anything changes.

 npm run watch

Enter fullscreen mode Exit fullscreen mode

now open the main.jsx and create a component
sample code

import React from 'react'
import Greeting from './components'

const App = () => {
  return (
    <Greeting message={'Universe'} />
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

now run the development server using
npm run dev

Writing a Customized Readme

To make it easy for other developers to use your component, it's crucial to create a high-quality README file that contains comprehensive documentation, usage examples, and highlights the features and advantages of using your component.

Open /src/README.md

Create your README file using markdown.

Pushing to a GitHub repository:

  • Create a new repository on GitHub.
  • Initialize a Git repository in your project folder using git init.
  • Add all files to the repository using git add ..
  • Commit your changes using git commit -m "Initial commit".
  • Set the remote origin to your GitHub repository using git remote add origin <repository-url>.
  • Push your code to the repository using git push -u origin main.

Sure, adding a quick guide on creating an npm account (or Yarn, which uses npm's registry) can be helpful, especially for beginners. Here’s how to add that section to your guide.

Creating an Account on npm (or Yarn)

To publish your React component on npm, you’ll first need an npm account. Here’s a quick walkthrough on setting one up:

Step 1: Sign Up for an npm Account

  1. Go to the npm website.
  2. Click Sign Up in the top-right corner.
  3. Fill out the required information, including your username, password, and email address.
  4. Click Create an account and confirm your email if prompted.

Step 2: Login on the Command Line

Once your account is created, you’ll need to log in through the command line:

  1. Open your terminal.
  2. Run the following command:
   npm login
Enter fullscreen mode Exit fullscreen mode
  1. Enter your npm username, password, and email address when prompted.

After successfully logging in, your npm account is linked to your terminal session, and you're ready to publish packages.

Note: Yarn users can also follow the same steps, as Yarn uses npm’s registry. So logging in to npm will allow you to publish packages via either npm or Yarn.

Now, with your npm account set up, you can continue to the next step in the guide: publishing your component.

Publishing to npm

We are finally ready to publish our component to npm.

To ensure a smooth publishing process, it is important to follow this checklist:

Verify that the version number in your package.json file is accurate and adheres to the semantic versioning convention. Each npm publication should have a unique version number.

Ensure all tests pass:

npm test
Enter fullscreen mode Exit fullscreen mode

Create the build files:

npm run build
Enter fullscreen mode Exit fullscreen mode

UMD and ESM module formats are created and placed in the /dist folder. Again, note that React is not bundled in alongside your component. Just your component code and any dependencies.

Ensure you are logged into npm or yarn. If not type:

 npm login or yarn login
Enter fullscreen mode Exit fullscreen mode

To Publish your component

 npm publish or yarn publish
Enter fullscreen mode Exit fullscreen mode

And all done!
All the code in this guide is available in the repository on Github.

Top comments (6)

Collapse
 
ajit_stephen profile image
AJIT T STEPHEN

I think you forgot to push your completed work to github

Collapse
 
bieefilled profile image
Samuel Peters

Thanks for the feedback.

Collapse
 
jeffrey_tillwick_7b698772 profile image
Jeffrey Tillwick

How does yarn login and yarn publish work in this scenario? At no point in this guide is this covered and running on my machine gives me Couldn't find a script named "login" and Couldn't find a script named "publish". Something's missing.

Collapse
 
bieefilled profile image
Samuel Peters

Ensure yarn is installed on your system
npm install --global yarn

then you need to create an npm account. Once you’ve done that you can setup your username and email in Yarn.
yarn login
This will prompt you for your username and email.

For more details on publishing a package with Yarn, check out the official Yarn guide on publishing a package. [classic.yarnpkg.com/en/docs/publis...]

Collapse
 
zohair636 profile image
Hafiz Muhammad Zohair Ajmal

include: /.{test,spec}.?(c|m)[jt]s?(x)
exclude: *
/node_modules/
, /dist/, /cypress/, /.{idea,git,cache,output,temp}/, /{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*
watch exclude: **/node_modules/
, /dist/

No test files found, exiting with code 1

Hi, Brother When I run the test I got this error. How to solve it?

Collapse
 
snow_ch_9c5fbf94394223619 profile image
SNOW CH

XDDD