How to publish your first ReactJS NPM module easily?

Happy new year peeps! Hope you all are having a good time.

I recently published my first NPM module and it is called React-Pincode. It has more than 150 downloads on the official NPM website. If you feel anything can be improved in the module please raise an issue for that - GitHub Repository

You can check it out here - React-Pincode

So in today's article, I am going to explain how to easily publish your very first ReactJS NPM module and add an interesting Open Source project in your resume.

Make sure NodeJS is installed in your system.

Prerequisites

1. Some familiarity with ReactJS.

2. Babel and Webpack.

So let's begin coding.

1) Create a package.json

2) Add this content to the file.

{
  "name": "react-sample-npm",
  "version": "0.0.1",
  "description": "Put a description here",
  "main": "build/index.js",
  "peerDependencies": {
    "react": "^15.5.4"
  },
  "dependencies": {
    "react": "^15.5.4",
    "webpack": "^2.6.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack"
  },
  "author": {
    "name": "Your name",
    "email": "your email"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.5.1"
  }
}

3) Create a file .babelrc

{
    "presets": ["env"],
    "plugins": [
      "transform-object-rest-spread",
      "transform-react-jsx"
    ]
  }

4) Create a file webpack.config.js

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2' 
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  externals: {
    'react': 'commonjs react' 
  }
};

5) Create a folder src. and inside that create a file index.js. This file will serve as the main module file which will contain the code for the component.

6) Add the following code in index.js

import React from 'react';
class Awesome extends React.Component {
  render() {
    return (
      <div>Whoo! This is my first ReactJS NPM module</div>
    );
  }
}
export default Awesome;

7) Run command

npm install

npm run build

8) Before publishing it on the NPM website, we will test it locally on our system. After the previous step, execute.

npm link

9) Now create a new React App for testing it. The easiest way is to use create-react-app command.

10) After using create-react-app command and creating a new React app. Run command

npm link react-sample-npm

which is our component name which we created in the above steps.

11) Open the project folder and in file App.js which looks like.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

12) Import your npm module

import Awesome from 'react-sample-npm'

13) And use it like

import React from 'react';
import Awesome from 'react-sample-npm';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Awesome/>
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

14) Start the server. and tadaaa!!!

Now it is the time to publish your first module.

15) Create an account on NPM website.

16) After creating an account run command

npm login

npm publish

17) Now you can check your published module on the NPM site.

I hope you guys understood the basic flow for building an NPM module. In case of any doubt please feel free to reach out to me. Hope you all had a great time learning this. :D