¿Cómo publicar un componente ReactJS en NPM?

Siga estos sencillos pasos para publicar su propio componente ReactJS en NPM.

Paso 1: Configuración inicial

Para publicar cualquier componente ReactJS en npm (administrador de paquetes de Nodes), primero debemos crear un componente React en la aplicación React. Las siguientes son las instrucciones para crear cualquier aplicación de reacción.

• Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

• Después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Paso 2: Creación del componente

Abra la carpeta de su proyecto en su editor de código, verá muchas carpetas, dependiendo de su elección, cree una carpeta llamada componentes, como en nuestro caso, hicimos la carpeta dentro de la carpeta src como se muestra a continuación.

Luego, vaya a su carpeta creada y cree su componente ReactJs, como en su caso, hemos creado un componente Navbar usando react-bootstrap llamado Header.js .

import React from "react";
import {
    Nav,
    Navbar,
    NavDropdown,
    Form,
    FormControl,
    Button,
} from "react-bootstrap";
  
const Header = () => {
    return (
        <>
            <Navbar bg="light" expand="lg">
                <Navbar.Brand href="#home">
                    ReactNavbarComponent
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="ml-auto">
                        <Nav.Link href="#home">Home</Nav.Link>
                        <Nav.Link href="#link">Link</Nav.Link>
                        <NavDropdown title="Dropdown" 
                                id="basic-nav-dropdown">
                            <NavDropdown.Item href="#action/3.1">
                                Action
                            </NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.2">
                                Another action
                            </NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.3">
                                Something
                            </NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item href="#action/3.4">
                                Separated link
                            </NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                    <Form inline>
                        <FormControl type="text"
                            placeholder="Search"
                            className="mr-sm-2" />
                        <Button variant="outline-success">
                            Search
                        </Button>
                    </Form>
                </Navbar.Collapse>
            </Navbar>
        </>
    );
};
  
export default Header;

Paso 3: Configuración del entorno para la publicación

Vaya a la carpeta de componentes usando su terminal y escriba npm init . Verá las siguientes cosas en su línea de comando.

Use `npm install <pkg>` afterward to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (components) react-navbar
version: (1.0.0)
description: React-navbar
entry point: (Header.js)                      # Entry Point publishing
test command:
git repository:
keywords:
author: <Name>
license: (ISC)
About to write to C:\Users\Desktop\Tcw\app\src\components\package.json:
{
  "name": "react-navbar",
  "version": "1.0.0",
  "description": "React-navbar",
  "main": "Header.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "<Name>",
  "license": "ISC"
}


Is this OK? (yes)

Instale todas las dependencias necesarias para su componente como dependencias del mismo nivel. Para esto primero, tienes que ir a tu terminal y escribir el siguiente comando: 

npm install (your dependences name)

Para nuestro ejemplo, tenemos que instalar estas dos dependencias para nuestro componente usando el siguiente comando:

npm install react
npm install react-bootstrap

Ahora vaya al archivo package.json y cambie las dependencias como dependencias de pares y elimine la carpeta node_module de la carpeta de componentes .

Ahora si escribes npm install tu terminal verás las siguientes instrucciones:

npm WARN react-navbar@1.0.0 requiere un par de react@^17.0.2 pero no hay ninguno instalado. Debe instalar las dependencias de pares usted mismo.
npm WARN react-navbar@1.0.0 requiere un par de react-bootstrap@^1.6.0 pero no hay ninguno instalado. Debe instalar las dependencias de pares usted mismo.
npm WARN react-navbar@1.0.0 Sin campo de repositorio.

actualizado en 3.59s
encontrado 0 vulnerabilidades

Paso 4: Publicación en npm

Vaya al sitio web de npm y cree una cuenta con su ID de correo y contraseña. Asegúrese de estar en el directorio actual que es el directorio de componentes y escriba los siguientes comandos:

npm login 
# Use your username and password what you have created in the npm website
# Then run this command
npm publish

Ahora su componente ReactJs se ha publicado con éxito en el npm. Vaya a su cuenta npm y allí podrá ver su paquete como se muestra a continuación.