Tutorial: How to Build and Publish a React NPM Package 🔥 #02

Creating a React NPM package is a great way to share your reusable components with other developers. In this tutorial, I will walk you through the process of building and publishing a React NPM package.

Step 1: Set up your React project
To start, create a new React project using Create React App. You can do this by running the following command in your terminal:

npx create-react-app my-react-package

This will create a new React project called my-react-package. Navigate to the project directory by running cd my-react-package.

Step 2: Create your React component
Next, create the component that you want to package and publish. You can create a new component by running the following command in your terminal:

touch src/MyComponent.js

Open the MyComponent.js file in your favorite text editor and add the following code:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default MyComponent;

Step 3: Set up your package.json file
In order to publish your NPM package, you will need to have a package.json file in your project directory. Run the following command in your terminal to create a package.json file:

npm init -y

Open the package.json file in your text editor and add the following fields:

{
  "name": "my-react-package",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Step 4: Set up Babel and Webpack
To bundle your React component, you will need to set up Babel and Webpack. Run the following command in your terminal to install the necessary dependencies:

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli --save-dev

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

const path = require('path');

module.exports = {
  entry: './src/MyComponent.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    libraryTarget: 'commonjs'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

Step 5: Create a build script
Next, update the scripts field in your package.json file to include a build script:

"scripts": {
  "build": "webpack --config webpack.config.js"
}

Step 6: Build your React package
To build your React package, run the following command in your terminal:

npm run build

This will compile your React component and bundle it into a single JavaScript file in the dist directory.

Step 7: Publish your NPM package
To publish your NPM package, you will need to create an NPM account and run the following command in your terminal:

npm login

Enter your NPM credentials and then run the following command to publish your package:

npm publish

Congratulations! You have successfully built and published your React NPM package. Other developers can now install and use your component by running npm install my-react-package.

That’s it for this tutorial! I hope you found it helpful in learning how to create a React NPM package. Happy coding! 🔥