How to publish a React Component without even including React?
Tags: react, npm, javascript, webdev
Published: 2023-05-25 16:44:05

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](https://www.npmjs.com/)

## 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**.


![React Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yne38ulz118202slzmgp.png)

## 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-



![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm03e5nml82yx9efgfcr.PNG)

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-

![Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8u7mwaro9dtv9f580w0.PNG)

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/](https://www.npmjs.com/)


![npmjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcsy2kb3vmmu9b2l2lka.png)

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 - 

![login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzz8p51p4wncp43ei155.PNG)

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

![login confirm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yct80xsvgquf5wfq3lfv.PNG)

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

```
npm publish
```
After your package has been published, you will get a confirmation - 
![package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viq1o5zkiiw8wcph8fkc.PNG)


Hooray!! You have successfully published a custom package to the official [npm.js](https://www.npmjs.com/) 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 - 

![installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3tqg88pqln8nrduu2vy.PNG)

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 - 

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohmln24f8roecc3jov3y.PNG)

And thats it! You have successfully published your custom package without using React!

Connect with me on Linkedin :- [Linkedin](https://www.linkedin.com/in/aryandev-shourie-175025229/)

Do check out my Github for amazing projects:- [Github](https://github.com/Aryan2727-debug)

View my Personal Portfolio :- [Aryan's Portfolio](https://personal-portfolio-aryan.netlify.app/)