tushar-try v0.2.0
Publish React components as an npm package
Created the boilerplate with npx create-react-app
Procedure
- Delete everything besides
App.js
andindex.js
- Create a folder
lib
insidesrc
that stores everything I am to publish on npm.- Create
components
folder insidelib
where component elements resides andindex.js
to export them
- Create
My Component MyForm
const MyForm = () => {
return (
<form>
<h1>Hello</h1>
<p>Enter your name:</p>
<input type="text" />
</form>
);
};
Install Babel and build the dist folder
- To install Babel, run the following in the CLI:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install -save @babel/polyfill
In the top-level folder of your project, add a file called babel.config.json and add the following presets:
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
],
"@babel/preset-react"
]
}
@babel/env tells the browser which versions it should target, and @babel/preset-react allows Babel to compile JSX.
In package.json , under scripts, replace the build script with the following:
"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files"
Alter the package.json
"name": "tushar-try",
"description": "Basic Form React Component",
"author": "Tushar Goyal",
"version": "0.1.0",
"private": false,
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"repository": {
"type": "git"
},
Now do npm login
and then do npm publish
- Now by including
tushar-try
library in any project , you can use the components that are exported insrc/lib/index.js
This project was bootstrapped with Create React App.
Do npm install tushar-try
in any project and
You can use MyForm
component from tushar-try
package using import {MyForm} from tushar-try
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.\ Open http://localhost:3000 to view it in the browser.