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! 🔥
we can use the tsup package for building packages
esm and cjs. import and require syntax
you are right about dependency
i also have built some libraries
❤