Aryan Dev Shourie

Posted on May 25, 2023

How to publish a React Component without even including React?

#react #npm #javascript #webdev

React is a JavaScript library which is used to build attractive User-Interfaces (UIs). Now, most of us know what React is and we also know that to publish a React Component, it is necessary to include the React library.

But, what if I tell you, that it is possible to publish a React Component without even including React! Sounds weird, right?
In this article, I will demonstrate how to publish a React Component to the official npm.js website

Components in React

React has 2 types of components:

Function based Component
Class based Component

Both of these Components can be rendered easily using the ReactDOM.render() function from the React library. This function takes 2 arguments, the HTML code and the HTML element.

The sample code is given below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

In the above code, we are Rendering the App component using the ReactDOM.render() function.

Publishing React Component without React

If we want to publish a React Component without including React itself, we can publish the Component as a standalone module that specifies React as a Peer Dependency.

Basic Setup:

Follow these steps to create the application:

Step 1: Create a React App using the following command-

npx create-react-app peering-example

Step 2: Create a new directory for your component and navigate into it-

mkdir my-react-component
cd my-react-component

Step 3: Initialize a new Node.js module in the directory-

npm init

Step 4: Install React as a Peer Dependency-

npm install --save-peer react

Step 5: Create 2 files-

touch testPackage.js
touch index.js

Project Structure:

Once this process is complete, your folder structure should look something like this-

Your package.json file inside the my-react-component folder should look something like this-

{
  "name": "test-package-for-publish",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "react": "^18.2.0"
  }
}

Step 6: Now, we will create a default component in the testPackage.js file-

import React from 'react';

function testPackage() {
  return (
      <h1>This is a sample package</h1>
  );
};

export default testPackage;

Step 7: We will now export the component as default from the index.js file-

export { default } from './testPackage';

Step 8: Now, we will publish our component to the npm.js website-

npm publish

Running the above command will give you the following error-

This means that if we want to publish a package, we need to be logged into the npm.js website.
Create your account or login into the website - https://www.npmjs.com/

Once logged in, login into your account using the Visual Studio Code Terminal -

npm login

After running this command, you will be asked your username, email and password -

When you enter the correct details, you will be logged into your account -

Now, we can easily publish our component using the command -

npm publish

After your package has been published, you will get a confirmation -

Hooray!! You have successfully published a custom package to the official npm.js website.

You can even check out your published package in your profile section of the website.

Now, to check whether your published package works correctly or not, navigate to the React App -

cd peering-example

Now, install your published package in the React App -

npm install dev-test-package-for-publish

When your package will be installed successfully, it will be added to your package.json file -

Use this package in your App.js file -

import React from "react";
import testPackage from "dev-test-package-for-publish";
import './App.css';

function App() {
  return (
    <>
      <testPackage/>
    </>
  );
}

export default App;

The output on your screen will be -