DEV Community

Cover image for A Step-by-Step Guide to Building and Publishing a React Package
Kelvin Moses
Kelvin Moses

Posted on • Originally published at iamkelv.hashnode.dev

A Step-by-Step Guide to Building and Publishing a React Package

Introduction

Creating reusable components is a fundamental aspect of modern web development. In this tutorial, I will walk you through the process of building your own React package. By packaging your components, you can easily share and reuse them across multiple projects or even publish them as open-source libraries. This tutorial will provide you with a step-by-step guide to create, build, and distribute your React package.

Prerequisites

Before getting started, ensure you have the following prerequisites:

  1. Basic knowledge of JavaScript and React.

  2. Node.js installed on your machine.

Step 1: Setting Up Your Project

To begin building your own React package, follow these steps to set up your project:

Create a new directory for your project. Open your terminal and run the following command:

mkdir my-react-package
Enter fullscreen mode Exit fullscreen mode

This command will create a new folder named **my-react-package\** in your current directory.

Navigate to the project directory by running the following command:

cd my-react-package
Enter fullscreen mode Exit fullscreen mode

Now you are inside the **my-react-package\** directory.

Initialize a new Node.js project by running the following command:

npm init -y
Enter fullscreen mode Exit fullscreen mode

This command creates a new **package.json\** file, which will serve as the configuration and dependency management file for your project.

By following these detailed steps, you will have a new project directory with a **package.json\** file ready for the next steps of building your React package.

Step 2: Create Your React Component

In this step, you will create your React component inside the project directory. Create a new file called **MyComponent.js\** and add the following code:

import React from 'react';

function MyComponent() {
  return <div>This is my custom React component!</div>;
}

export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

Feel free to modify the component code to suit your requirements. You can add props, state, and any other functionality needed for your component.

Step 3: Building Your Package

To make your React component usable as a package, you need to transpile and bundle it using a build tool like Babel and webpack.

Install the necessary dependencies by running the following command:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli
Enter fullscreen mode Exit fullscreen mode

Create a new file called **webpack.config.js\** in your project directory and add the following code:

const path = require('path');

module.exports = {
  entry: './MyComponent.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-react-package.js',
    library: 'MyReactPackage',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};
Enter fullscreen mode Exit fullscreen mode

This configuration file tells webpack to transpile your component using Babel and bundle it into a single file inside a **dist\** folder. The bundled file will be named my-react-package.js, and the component will be exposed as MyReactPackage using the Universal Module Definition (UMD) format.

Next, update your package.json file with the following:

{
  "main": "dist/my-react-package.js",
  "scripts": {
    "build": "webpack"
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Building and Testing Your Package

To build your React package, run the following command:

npm run build
Enter fullscreen mode Exit fullscreen mode

This will transpile and bundle your component, generating the my-react-package.js file inside the dist folder.

To test your React package locally, create a new React project in a separate directory and install your package as a dependency:

npx create-react-app my-test-app
cd my-test-app
npm install /path/to/my-react-package
Enter fullscreen mode Exit fullscreen mode

Replace **/path/to/my-react-package\** with the actual path to your React package.

Now, you can import and use your React component in your test application:

import React from 'react';
import MyComponent from 'my-react-package';

function App() {
  return (
    <div>
      <h1>Welcome to my test application!</h1>
      <MyComponent />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Step 5: Publishing Your Package

To share your React package with others or publish it as an open-source library, you can publish it to a package registry like npm. Follow these steps to publish your package:

  1. Create an account on npm by visiting https://www.npmjs.com/signup.

  2. Log in to your npm account using the command:

npm login
Enter fullscreen mode Exit fullscreen mode
  1. Publish your package by running the command:
npm publish
Enter fullscreen mode Exit fullscreen mode

Step 6: Running Your React App

To see your React app in action, follow these steps to run it locally:

  1. Open your terminal and navigate to the root directory of your React app.

  2. Run the following command to start the development server:

npm start
Enter fullscreen mode Exit fullscreen mode

This command will compile your React app and launch a local development server. You should see output indicating that the server is running.

  1. Open your web browser and visit **http://localhost:3000\**. You should see your React app running live.

Now you can interact with your React components and test the functionality of your app in the browser. Any changes you make to your code will trigger automatic reloading, allowing you to see the updates in real-time.

Congratulations! Your React package is now published and ready to be installed by others. 😊

Conclusion

In this tutorial, you learned how to build your own React package. You created a React component, bundled it using webpack and Babel, and published it to the npm package registry. Now, you can easily reuse and share your custom React component across various projects or with the wider developer community.

Remember to regularly update and maintain your React package to provide bug fixes, new features, and improvements to your users.

Happy packaging!

Note: The above tutorial provides a basic understanding of building a React package. For more advanced usage, consider exploring additional tools, techniques, and best practices, such as TypeScript integration, testing, and versioning. Make sure and package name you're using is not taken

You can view the source code here

You can check the published version on NPM here

Hope you have learned a lot from this article 😊😊

I'd love to connect with you on Twitter | LinkedIn | GitHub

Resources

NPM Documentation

Webpack.js

Top comments (0)