How to Use Your npm Library in a React Project 관련

How to Create an npm Library

---

In the world of JavaScript development, npm (Node Package Manager) has become an essential tool for managing dependencies and sharing reusable code. Whether you're building a simple website or a complex web application, npm libraries help streamline ...

• Installing Your Package
  • Step 1: Create a New React Project with Vite (if needed)
  • Step 2: Install Your npm Package
• Importing and Using the Library in a React Component
• Handling Package Updates and Versioning
• Using a Local Version of Your Package in Development
  • Step 1: Link Your Package Locally
  • Step 2: Use It in Your React Project
• Publishing an Update to Your Package
• Final Thoughts on Using npm Libraries in React (Vite Edition)

---

How to Create an npm Library

In the world of JavaScript development, npm (Node Package Manager) has become an essential tool for managing dependencies and sharing reusable code. Whether you're building a simple website or a complex web application, npm libraries help streamline ...

Now that we’ve published our npm package, let’s see how to install, import, and use it inside a React project created with Vite. This section will guide you through the process using both npm and Yarn.

---

Installing Your Package

Step 1: Create a New React Project with Vite (if needed)

If you don’t have an existing React project, create one using Vite:

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

yarn create vite@latest my-react-app --template react
cd my-react-app
yarn install

Once the installation is complete, you can start the development server:

yarn dev

npm run dev

Step 2: Install Your npm Package

Now, install the npm library we created earlier (my-awesome-library).

npm install my-awesome-library

yarn add my-awesome-library

---

Importing and Using the Library in a React Component

Once installed, you can use the library inside a React component.

Open src/App.jsx and modify it as follows:

import React from "react";
import { formatDate } from "my-awesome-library";

function App() {
  const today = new Date();
  return (
    <div>
      <h1>Formatted Date</h1>
      <p>{formatDate(today)}</p>
    </div>
  );
}

export default App;

Now, run your Vite React app:

yarn dev

npm run dev

This will display a formatted date on the webpage, confirming that our library is working!

---

Handling Package Updates and Versioning

To update your npm package in your project:

yarn upgrade my-awesome-library

npm update my-awesome-library

If you want to check outdated dependencies:

yarn outdated

npm outdated

---

Using a Local Version of Your Package in Development

If you’re still making changes to your npm package and want to test it in your React project before publishing, you can use npm link or yarn link.

Step 1: Link Your Package Locally

Go to your package’s project folder:

cd ~/path-to-my-awesome-library
yarn link

cd ~/path-to-my-awesome-library
npm link

Step 2: Use It in Your React Project

Navigate to your React app and link the package:

cd ~/path-to-my-react-app
yarn link my-awesome-library

cd ~/path-to-my-react-app
npm link my-awesome-library

Now, when you import and use my-awesome-library, it will use the local version instead of the published one.

---

Publishing an Update to Your Package

If you’ve made changes to your package and want to publish a new version:

1️⃣ Update the version number in package.json (use npm version patch for small updates).
2️⃣ Run npm publish to upload the new version.
3️⃣ Run npm update my-awesome-library in your React project to get the latest version.

---

Final Thoughts on Using npm Libraries in React (Vite Edition)

By now, you should have a fully functional npm package and know how to install, use, and update it in a React project using Vite.

✔️ Vite is faster than Create React App and provides better performance for development.
✔️ npm and Yarn make dependency management easy.
✔️ npm link allows local testing before publishing.
✔️ Keeping dependencies updated ensures stability.

This workflow is essential for developers looking to create, maintain, and distribute reusable React components or JavaScript utilities.