open-index/open-npm huggingface dataset:
npm package: @suranjitnamasudra/review-widget
Description: A reusable review widget component
Author: Suranjit Namasudra
Latest version: 1.0.4


## the packages we needs to install to create the npm react js library.

npm install react react-dom
npm install --save-dev babel-cli babel-preset-env babel-preset-react css-loader style-loader webpack webpack-cli webpack-node-externals

## 2. Set Up Babel Configuration
- Create a .babelrc file in your package root to configure Babel for transpiling your code:

```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```

## 3. Set Up Webpack Configuration
- Create a webpack.config.js file in the root of your package. This file will define how to bundle the library and handle CSS modules:

```
const path = require("path");
const nodeExternals = require("webpack-node-externals");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
    libraryTarget: "umd",
    globalObject: "this",
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.module\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
};
```

## 4. Add Scripts to package.json
- Update your package.json with build and pre-publish scripts:
```
"main": "dist/index.js",
"scripts": {
  "build": "webpack",
  "prepublishOnly": "npm run build"
}
```

## 5. CSS Module Configuration
- In your components, import CSS modules using the .module.css extension. For example, if you have a CSS module Button.module.css in the src/components folder:

## 6. Build the Package
```
npm run build
```

## 7. Publish to npm
- Before publishing, ensure the following:
- Your package.json has a unique "name" property (e.g., "@yourusername/your-component-library").
- You are logged into npm using npm login

## publish npm packages commond
```
npm publish --access public
```