[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":-5,"_8":9,"_10":11},"actionData","errors","root",{"_529":-5,"_536":-5,"_537":538,"_539":540,"_541":542,"_543":544,"_545":546,"_547":548,"_549":360,"_550":551,"_552":553,"_554":555},"routes/_store+/_readers+/read_/route","routes/_store+/_readers+/read_.$slug/route",{"_16":354,"_355":356,"_357":358,"_359":360,"_361":-7},"routes/_store+/_readers+/read_.$slug.$chapterId/route",{"_12":13,"_14":15,"_16":17,"_18":19,"_20":21},"title","Creating NPM Package with ReactJS","content","

Compiling React to JavaScript

https://leanpub.com/creating-npm-package-with-react-javascript","book",{"_33":34,"_12":13,"_35":36,"_37":38,"_39":40,"_41":42,"_43":15},"nextChapter",{"_22":23,"_12":24,"_25":-5,"_26":27,"_28":29,"_30":-5,"_31":-5,"_32":-5},"sections",[],"level",2,"Distinguishing Source Code from Distribution Code","description","path","#distinguishing-source-code-from-distribution-code","fileCount",1,"quizType","sectionNum","youtubeId","previewContent","

\nIntroduction\n
- \nWelcome to the World of NPM Packages!\n
- \nWhy This Book Will Help You\n
- \nWhat You Will Build\n
- \nUse the Right Tools\n
- \nWhat You Should Know First\n
- \nGot Questions?\n
- \nLet’s Get Started!\n
\n
\nProject Configuration\n
- \n1. Set Up Your System\n
- \n2. Create a Project Directory\n
- \n3. Create a package.json File\n
- \n4. Configure the Project as an ES Module NPM Package\n
- \n5. Initialize a Git Repository\n
- \n6. Specify the Files Git Should Ignore\n
- \n7. Stage and Commit Your Project’s Changes to Git\n
- \n8. Configure a GitHub Remote Repository\n
- \n9. Push Your Local Git Directory to the Remote Repo\n
- \n10. Install React\n
\n
\nTesting React Component\n
- \n1. Install the Testing Tools\n
- \n2. Specify Vitest as Your Project’s Test Runner Tool\n
- \n3. Create Your Code Files\n
- \n4. Write Your Test Case\n
- \n5. Develop Your React Component\n
- \n6. Configure the Entry File\n
- \n7. Install the Code Compiler\n
- \n8. Configure Vite to Compile Your Code\n
- \n9. Configure Vitest’s Testing Environment\n
- \n10. Run the Test\n
\n
\nCommit Message Configuration\n
- \nConventional Commits Message Syntax\n
- \nEnforcing the Conventional Commits Format\n
- \nSetting Up Husky\n
- \nCreating a Hook to Auto-Lint Commit Messages\n
\n
\nSetting Up Commitlint GitHub Action\n
- \n1. Create a Commitlint GitHub Action Workflow File\n
- \n2. Define the Commitlint GitHub Action Workflow\n
- \n3. Test the Commitlint GitHub Action Workflow\n
\n
\nStyling React Components\n
- \n1. Create the Stylesheet\n
- \n2. Apply CSS Styles to Your Component\n
- \n3. Add the Stylesheet to the Entry File\n
- \n4. Run the Test\n
\n
\nCompiling React to JavaScript\n
\nDistinguishing Source Code from Distribution Code\n
\nDefining Package’s Runtime Entry Points\n
\nLocal Testing of Unpublished Package\n
- \n1. Link-Install Your Package Globally in Your System\n
- \n2. Create a NextJS Demo Website for Testing Your Package\n
- \n3. Install Your Package from Your System’s Global Folder to the Test-App\n
- \n4. Configure Turbopack to Resolve Symlinks\n
- \n5. Use the Link-Installed Package in Your Test-App\n
- \n6. Unlink Your Package from the Test-App\n
- \n7. Unlink Your Package from the Global Folder\n
\n
\nCreating README\n
\nCreating LICENSE\n
\nPublishing Package to NPM\n
- \n1. Search Engine Optimization (SEO)\n
- \n2. Confirm That Your Package Have Passing Tests\n
- \n3. Compile Any Pending Code\n
- \n4. Stage and Commit Your Project’s Changes to Git\n
- \n5. Specify the Files You Want to Publish to NPM\n
- \n6. Confirm the Files NPM Will Publish\n
- \n7. Stage and Commit Any Recent Changes\n
- \n8. Push Your Local Git Directory to the Remote Repo\n
- \n9. Sign In or Sign Up on the NPM Website\n
- \n10. Log In to NPM via the Terminal\n
- \n11. Confirm If Your Package’s Name Is Available\n
- \n12. Publish Your Package!\n
\n
\nLocal Testing of the Published Package\n
- \n1. Install the Package\n
- \n2. Import the Package\n
- \n3. Run Your Local Server\n
\n
\nProduction Testing of the Published Package\n
- \n1. Stage and Commit Your Changes\n
- \n2. Set up a GitHub Remote Repository for Your Next.js Test App\n
- \n3. Push Your Local Git Directory to the Remote Repo\n
- \n4. Sign In or Create an Account on the Vercel Website\n
- \n5. Deploy Your Project to Vercel\n
- \n6. Test the Package on Your Live Demo Website\n
\n
\nUpdating Package’s Versions\n
- \nExample 1: Updating to a Patch Version\n
- \nExample 2: Updating to a Minor Version\n
- \nExample 3: Updating to a Major Version\n
\n
\nAutomating Version Management\n
- \n1. Create a Release GitHub Action Workflow File\n
- \n2. Define the Release GitHub Action Workflow\n
- \n3. How to Overwrite semantic-release’s Default Configurations\n
- \n4. Notify Developers That the Package Uses Automated Version Management\n
\n
\nNPM Trusted Publishing Configuration\n
- \nAdd a New Feature\n
- \nUpdate an Existing Feature\n
\n
\nAutomating GitHub Releases\n
- \nAdd the Preset Library to Your Release Workflow\n
- \nConfigure semantic-release to Automatically Publish the Package’s Release Notes\n
\n
\nModularizing JavaScript Codebase\n
- \n1. Identify Independent Elements\n
- \n2. Split the Elements You Want to Extract into Their Separate Modules\n
- \n3. Import the Extracted Elements into the TweetButton.jsx File\n
- \n4. Release the Latest Version of the Project\n
\n
\nEpilogue\n
- \nWhat’s Next?\n
- \nOne Last Favor\n
\n

Introduction

Welcome to the World of NPM Packages!

NPM (Node Package Manager) is a vast database ecosystem that hosts thousands of reusable code packages. Developers use it to share, manage, discover, and install libraries that solve everyday problems or add functionality to their applications.

\n\n\n\n

$\"An$

Packages are sometimes called libraries, plugins, frameworks, or tools. It is simply a directory (or project) that includes a package.json file for recording key information about the package.

Publishing your own NPM package is an empowering way to contribute to the developer community, grow your skills, and build a portfolio-worthy product. In doing so, you will strengthen a range of valuable abilities, including:

\nCommunication\n
\nCollaboration\n
\nOrganization\n
\nProblem-solving\n
\nDocumentation\n
\nTechnical development\n

Becoming a package publisher allows you to take your ideas from concept to a distributable product that others can integrate into their projects. It is a great way to stand out as a developer.

This book is a practical guide to creating, testing, and publishing your own NPM packages using ReactJS. No prior publishing experience is required.

Why This Book Will Help You

Learning to publish NPM packages is not a craft you master by merely reading or watching tutorials—it is a skill you develop by doing.

That is why this book is project-based and hands-on. Along the way, you will build a working NPM package while applying new concepts immediately in a real-world scenario.

To get the most out of this book, open your code editor (like VS Code) and follow along with the examples. Doing so will keep you from falling into “tutorial hell”—where you watch countless tutorials but never actually build anything.

What You Will Build

You will develop a functional and customizable Tweet Button package throughout the book.

While this library might sound simple, don’t underestimate it. This project is designed to teach you the essential skills and patterns required to publish any NPM package. Once you understand the process, you will have the ability to scale your own ideas to any level of complexity.

Use the Right Tools

To ensure smooth progress, it is best to use the exact versions of dependencies listed in this book. This helps avoid unexpected issues that might arise from newer versions.

After completing the project, feel free to upgrade the dependencies. If anything breaks, check online documentation or community discussions for solutions.

What You Should Know First

Knowing the basics of Git, GitHub, React, and JavaScript will make it easier to learn how to publish NPM packages. It’s helpful to be familiar with these tools before you start.

Got Questions?

If you have questions or comments about this book, email contact@codesweetly.com or send me a direct message on Twitter (@oluwatobiss).

Let’s Get Started!

The next chapter will show you how to set up the project.

Project Configuration

Below is the required system and file configurations for creating NPM packages.

1. Set Up Your System

Ensure your system has the following installations:

\nGit\n
\nNode 22.13 (or greater)\n
\nNPM 10.9 (or greater)\n

\n\n\n\n

$\"An$

\nRefer to the Git tutorial to install, update, or verify Git on your system.\n
\nSee the package manager tutorial for steps to install, update, or verify Node and NPM.\n

2. Create a Project Directory

Create a new folder for your project as follows:

Figure 1. Command Line

1 mkdir thank-you-tweet-button-001\n

\n\n\n\n\n

$\"An$

You may use any name. For example, this tutorial uses thank-you-tweet-button-001.

\n\n\n\n

$\"An$

\nChoose a name with 214 characters or fewer.\n
\nUse only lowercase letters in your project name.\n
\nDo not include “js” or “node” in your package name.\n

Afterward, navigate to your project directory using the command line:

Figure 2. The Syntax to Change to a Different Directory

1 cd path/to/thank-you-tweet-button-001\n

\n\n

3. Create a package.json File

Use NPM to initialize a package.json file for your project.

Figure 3. Command Line

1 npm init -y\n

\n\n

4. Configure the Project as an ES Module NPM Package

This guide uses ES Modules in all JavaScript files, so add a \"type\": \"module\" field to your project’s package.json file.

Figure 4. package.json: Set up package as an ES Module library (line 5)

1 {\n2   \"scripts\": {\n3     \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n4   },\n5   \"type\": \"module\"\n6 }\n

\n\n

You should also initialize Git at this stage.

5. Initialize a Git Repository

Create a .git repo in your project’s root directory:

Figure 5. Command Line

1 git init\n

\n\n

6. Specify the Files Git Should Ignore

Create a .gitignore file in your project’s root directory:

Figure 6. Command Line

1 touch .gitignore\n

\n\n

Afterward, open the newly created .gitignore file and write the names of the files, folders, or file types you want Git to ignore.

Here’s an example:

Figure 7. .gitignore

1 /node_modules\n2 /dist\n

\n\n

The snippet above instructs Git to ignore tracking the current directory’s node_modules and dist folders.

\n\n\n\n

$\"An$

\nA current directory is the folder in which you are currently working.\n
\nA current directory is sometimes called a “current working directory (CWD)” or “working directory.”\n

Now, stage and commit your recent changes.

7. Stage and Commit Your Project’s Changes to Git

Run the following command in your terminal to stage and commit your recent changes.

Figure 8. Command Line

1 git add -A && git commit -m \"Initialize project using CodeSweetly's guide\"\n

\n\n

The command above tells Git to stage and commit all modified and untracked files in the project.

Next, configure a remote repository for the project.

8. Configure a GitHub Remote Repository

\nGo to the GitHub website and sign in or create an account if you do not have one.\n
\nAfter signing in, create a new GitHub repository. You may use thank-you-tweet-button-001 or another name of your choice.\n
\nOnce you’ve created a remote repository for your package, link your project’s .git directory (located locally on your system) with the remote repository on GitHub. To connect to the remote repository, go to your package’s root directory via your local terminal and run the git remote add command. Here’s the syntax:\n

Figure 9. Command Line

1 git remote add origin https://github.com/your-username/remote-repo-name.git\n

\n\n\n\n\n

$\"An$

\nReplace your-username in the code above with your GitHub username. Likewise, replace remote-repo-name with your remote repository’s name.\n
\nSee GitHub Docs to learn more on creating a GitHub repository.\n

You can also add the remote repo to your package.json file for easy access to people who want to contribute to your project.

Figure 10. package.json: Add repository field (line 4-7)

 1 {\n 2   \"name\": \"thank-you-tweet-button-001\",\n 3   \"version\": \"1.0.0\",\n 4   \"repository\": {\n 5     \"type\": \"git\",\n 6     \"url\": \"https://github.com/your-username/app-repo-name.git\"\n 7   },\n 8   \"scripts\": {\n 9     \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n10   }\n11 }\n

\n\n

Let’s provide the remote repo’s issues URL as the package’s bug tracker. And an email people can use to report issues:

Figure 11. package.json: Add bugs field (line 8-11)

 1 {\n 2   \"name\": \"thank-you-tweet-button-001\",\n 3   \"version\": \"1.0.0\",\n 4   \"repository\": {\n 5     \"type\": \"git\",\n 6     \"url\": \"https://github.com/your-username/app-repo-name.git\"\n 7   },\n 8   \"bugs\": {\n 9     \"url\": \"https://github.com/your-username/app-repo-name/issues\",\n10     \"email\": \"your-project-email@host.com\"\n11   },\n12   \"scripts\": {\n13     \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n14   }\n15 }\n

\n\n

Afterward, stage and commit your changes:

Figure 12. Command Line

1 git add -A && git commit -m \"Create repository and bugs fields\"\n

\n\n

Next, push your local Git repository to the remote repository.

9. Push Your Local Git Directory to the Remote Repo

After successfully connecting your local directory to the remote repository, you can begin pushing (uploading) your local project to the remote repository. Here’s how:

Figure 13. Command Line

1 git push -u origin main\n

\n\n

The command above instructs Git to push your local main branch’s .git directory to the remote origin branch on GitHub.

\n\n\n\n

$\"An$

If you refresh the main page of your remote repository, you should see your upload.

Now it’s time to set up your project with React.

10. Install React

Install React as a development dependency

Figure 14. Command Line

1 npm i -D react@19.2.4\n

\n\n

The command above tells NPM to install react as your package’s development dependency.

\n\n\n\n

$\"An$

\nThe react package is a library containing React’s core functionality for creating React components.\n
\ni is the shorthand notation for install.\n
\nThe -D flag is the shorthand notation for --save-dev.\n

You may wonder why React is installed as a development dependency if users need it in production. The following explains the reasoning.

Why Install React as a Package’s Dev-Dependency?

Installing React as a development dependency prevents users from being required to download React when installing your package.

React requires only one copy of the react package per project. Therefore, specifying React as a dev-dependency prevents users from having to download React when installing your package. If their project already has a React copy, they wouldn’t need to install another one.

One thing to note: your package will only work in projects that already have React installed. But there’s a good workaround:

\nDuplicate the \"react\" property from your package.json \"devDependencies\" field into the \"peerDependencies\" field as shown:\n

Figure 15. package.json: Add peerDependencies field (line 5-7)

1 {\n2   \"devDependencies\": {\n3     \"react\": \"^19.2.4\"\n4   },\n5   \"peerDependencies\": {\n6     \"react\": \"^19.2.4\"\n7   }\n8 }\n

\n\n

Specifying React as a peer-dependency tells package managers to check whether the app installing your package contains the listed peerDependencies. If so, the application has the dependencies your package needs to work.

If the package manager cannot find the peerDependencies, some NPM versions (such as 7 and 11) will install them automatically. Other versions (such as 3-6) will display a warning that informs the user to install the dependencies manually.

\n\n

Stage and commit your changes:

Figure 16. Command Line

1 git add -A && git commit -m \"Install react\"\n

\n\n

After configuring the project, continue to the next chapter to learn how to write a test case for your component.

Testing React Component

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

1. Install the Testing Tools

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

2. Specify Vitest as Your Project’s Test Runner Tool

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

3. Create Your Code Files

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

4. Write Your Test Case

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

5. Develop Your React Component

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

6. Configure the Entry File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

7. Install the Code Compiler

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

8. Configure Vite to Compile Your Code

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

9. Configure Vitest’s Testing Environment

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

10. Run the Test

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Commit Message Configuration

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Conventional Commits Message Syntax

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Enforcing the Conventional Commits Format

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Setting Up Husky

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Creating a Hook to Auto-Lint Commit Messages

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Setting Up Commitlint GitHub Action

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

1. Create a Commitlint GitHub Action Workflow File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

2. Define the Commitlint GitHub Action Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

3. Test the Commitlint GitHub Action Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Styling React Components

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

1. Create the Stylesheet

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

2. Apply CSS Styles to Your Component

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

3. Add the Stylesheet to the Entry File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

4. Run the Test

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Compiling React to JavaScript

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Distinguishing Source Code from Distribution Code

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Defining Package’s Runtime Entry Points

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Local Testing of Unpublished Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

1. Link-Install Your Package Globally in Your System

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

2. Create a NextJS Demo Website for Testing Your Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

3. Install Your Package from Your System’s Global Folder to the Test-App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

4. Configure Turbopack to Resolve Symlinks

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

5. Use the Link-Installed Package in Your Test-App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

6. Unlink Your Package from the Test-App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

7. Unlink Your Package from the Global Folder

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Creating README

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Creating LICENSE

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Publishing Package to NPM

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

1. Search Engine Optimization (SEO)

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Description

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Keywords

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Author

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

License

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Homepage

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

2. Confirm That Your Package Have Passing Tests

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

3. Compile Any Pending Code

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

4. Stage and Commit Your Project’s Changes to Git

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

5. Specify the Files You Want to Publish to NPM

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

6. Confirm the Files NPM Will Publish

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

7. Stage and Commit Any Recent Changes

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

8. Push Your Local Git Directory to the Remote Repo

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\nThis content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

10. Log In to NPM via the Terminal

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

11. Confirm If Your Package’s Name Is Available

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

1. CLI command

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

2. URL search

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

What to do if your chosen package name is currently in use by someone else

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

12. Publish Your Package!

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Local Testing of the Published Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

1. Install the Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

2. Import the Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

3. Run Your Local Server

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Production Testing of the Published Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

1. Stage and Commit Your Changes

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

2. Set up a GitHub Remote Repository for Your Next.js Test App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

3. Push Your Local Git Directory to the Remote Repo

5. Deploy Your Project to Vercel

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

6. Test the Package on Your Live Demo Website

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Updating Package’s Versions

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Example 1: Updating to a Patch Version

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Example 2: Updating to a Minor Version

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Example 3: Updating to a Major Version

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Automating Version Management

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

1. Create a Release GitHub Action Workflow File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

2. Define the Release GitHub Action Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

3. How to Overwrite semantic-release’s Default Configurations

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

4. Notify Developers That the Package Uses Automated Version Management

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

NPM Trusted Publishing Configuration

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Add a New Feature

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Update an Existing Feature

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Automating GitHub Releases

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Add the Preset Library to Your Release Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Configure semantic-release to Automatically Publish the Package’s Release Notes

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Modularizing JavaScript Codebase

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

1. Identify Independent Elements

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

2. Split the Elements You Want to Extract into Their Separate Modules

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

3. Import the Extracted Elements into the `TweetButton.jsx` File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

4. Release the Latest Version of the Project

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

Epilogue

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

What’s Next?

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n

One Last Favor

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-javascript.\n\n

\n\n","metaText","Build and publish your own ReactJS NPM Package with CodeSweetly's step-by-step guide. Start building and sharing your React creations today!","slug","creating-npm-package-with-react-javascript","showReadLinkString","sample","tocStructure",[44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,19,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146],"publicChapterContent",{"_22":23,"_12":352,"_25":-5,"_26":353,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":350,"_25":-5,"_26":351,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":348,"_25":-5,"_26":349,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":346,"_25":-5,"_26":347,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":344,"_25":-5,"_26":345,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":342,"_25":-5,"_26":343,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":340,"_25":-5,"_26":341,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":338,"_25":-5,"_26":339,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":336,"_25":-5,"_26":337,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":334,"_25":-5,"_26":335,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":332,"_25":-5,"_26":333,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":330,"_25":-5,"_26":331,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":328,"_25":-5,"_26":329,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":326,"_25":-5,"_26":327,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":324,"_25":-5,"_26":325,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":322,"_25":-5,"_26":323,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":320,"_25":-5,"_26":321,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":318,"_25":-5,"_26":319,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":316,"_25":-5,"_26":317,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":314,"_25":-5,"_26":315,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":312,"_25":-5,"_26":313,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":310,"_25":-5,"_26":311,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":308,"_25":-5,"_26":309,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":306,"_25":-5,"_26":307,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":304,"_25":-5,"_26":305,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":302,"_25":-5,"_26":303,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":300,"_25":-5,"_26":301,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":298,"_25":-5,"_26":299,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":296,"_25":-5,"_26":297,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":294,"_25":-5,"_26":295,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":292,"_25":-5,"_26":293,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":290,"_25":-5,"_26":291,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":288,"_25":-5,"_26":289,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":286,"_25":-5,"_26":287,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":284,"_25":-5,"_26":285,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":282,"_25":-5,"_26":283,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":280,"_25":-5,"_26":281,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":278,"_25":-5,"_26":279,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":276,"_25":-5,"_26":277,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":274,"_25":-5,"_26":275,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":272,"_25":-5,"_26":273,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":270,"_25":-5,"_26":271,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":268,"_25":-5,"_26":269,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":266,"_25":-5,"_26":267,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":264,"_25":-5,"_26":265,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":262,"_25":-5,"_26":263,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":260,"_25":-5,"_26":261,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":258,"_25":-5,"_26":259,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":256,"_25":-5,"_26":257,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":254,"_25":-5,"_26":255,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":252,"_25":-5,"_26":253,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":250,"_25":-5,"_26":251,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":248,"_25":-5,"_26":249,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":246,"_25":-5,"_26":247,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":244,"_25":-5,"_26":245,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":242,"_25":-5,"_26":243,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":240,"_25":-5,"_26":241,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":238,"_25":-5,"_26":239,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":236,"_25":-5,"_26":237,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":234,"_25":-5,"_26":235,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":232,"_25":-5,"_26":233,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":230,"_25":-5,"_26":231,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":228,"_25":-5,"_26":229,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":226,"_25":-5,"_26":227,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":224,"_25":-5,"_26":225,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":222,"_25":-5,"_26":223,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":220,"_25":-5,"_26":221,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":218,"_25":-5,"_26":219,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":216,"_25":-5,"_26":217,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":214,"_25":-5,"_26":215,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":212,"_25":-5,"_26":213,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":210,"_25":-5,"_26":211,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":208,"_25":-5,"_26":209,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":206,"_25":-5,"_26":207,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":204,"_25":-5,"_26":205,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":202,"_25":-5,"_26":203,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":200,"_25":-5,"_26":201,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":198,"_25":-5,"_26":199,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":196,"_25":-5,"_26":197,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":194,"_25":-5,"_26":195,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":192,"_25":-5,"_26":193,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":190,"_25":-5,"_26":191,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":188,"_25":-5,"_26":189,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":186,"_25":-5,"_26":187,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":184,"_25":-5,"_26":185,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":182,"_25":-5,"_26":183,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":180,"_25":-5,"_26":181,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":178,"_25":-5,"_26":179,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":176,"_25":-5,"_26":177,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":174,"_25":-5,"_26":175,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":172,"_25":-5,"_26":173,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":170,"_25":-5,"_26":171,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":168,"_25":-5,"_26":169,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":166,"_25":-5,"_26":167,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":164,"_25":-5,"_26":165,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":162,"_25":-5,"_26":163,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":160,"_25":-5,"_26":161,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":158,"_25":-5,"_26":159,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":156,"_25":-5,"_26":157,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":154,"_25":-5,"_26":155,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":152,"_25":-5,"_26":153,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":150,"_25":-5,"_26":151,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":148,"_25":-5,"_26":149,"_28":29,"_30":-5,"_31":-5,"_32":-5},3,"One Last Favor","#one-last-favor","What’s Next?","#whats-next","Epilogue","#epilogue","4. Release the Latest Version of the Project","#4-release-the-latest-version-of-the-project","3. Import the Extracted Elements into the TweetButton.jsx File","#3-import-the-extracted-elements-into-the-tweetbuttonjsx-file","2. Split the Elements You Want to Extract into Their Separate Modules","#2-split-the-elements-you-want-to-extract-into-their-separate-modules","1. Identify Independent Elements","#1-identify-independent-elements","Modularizing JavaScript Codebase","#modularizing-javascript-codebase","Configure semantic-release to Automatically Publish the Package’s Release Notes","#configure-semantic-release-to-automatically-publish-the-packages-release-notes","Add the Preset Library to Your Release Workflow","#add-the-preset-library-to-your-release-workflow","Automating GitHub Releases","#automating-github-releases","Update an Existing Feature","#update-an-existing-feature","Add a New Feature","#add-a-new-feature","NPM Trusted Publishing Configuration","#npm-trusted-publishing-configuration","4. Notify Developers That the Package Uses Automated Version Management","#4-notify-developers-that-the-package-uses-automated-version-management","3. How to Overwrite semantic-release’s Default Configurations","#3-how-to-overwrite-semantic-releases-default-configurations","2. Define the Release GitHub Action Workflow","#2-define-the-release-github-action-workflow","1. Create a Release GitHub Action Workflow File","#1-create-a-release-github-action-workflow-file","Automating Version Management","#automating-version-management","Example 3: Updating to a Major Version","#example-3-updating-to-a-major-version","Example 2: Updating to a Minor Version","#example-2-updating-to-a-minor-version","Example 1: Updating to a Patch Version","#example-1-updating-to-a-patch-version","Updating Package’s Versions","#updating-packages-versions","6. Test the Package on Your Live Demo Website","#6-test-the-package-on-your-live-demo-website","5. Deploy Your Project to Vercel","#5-deploy-your-project-to-vercel","4. Sign In or Create an Account on the Vercel Website","#4-sign-in-or-create-an-account-on-the-vercel-website","3. Push Your Local Git Directory to the Remote Repo","#3-push-your-local-git-directory-to-the-remote-repo","2. Set up a GitHub Remote Repository for Your Next.js Test App","#2-set-up-a-github-remote-repository-for-your-nextjs-test-app","1. Stage and Commit Your Changes","#1-stage-and-commit-your-changes","Production Testing of the Published Package","#production-testing-of-the-published-package","3. Run Your Local Server","#3-run-your-local-server","2. Import the Package","#2-import-the-package","1. Install the Package","#1-install-the-package","Local Testing of the Published Package","#local-testing-of-the-published-package","12. Publish Your Package!","#12-publish-your-package","11. Confirm If Your Package’s Name Is Available","#11-confirm-if-your-packages-name-is-available","10. Log In to NPM via the Terminal","#10-log-in-to-npm-via-the-terminal","9. Sign In or Sign Up on the NPM Website","#9-sign-in-or-sign-up-on-the-npm-website","8. Push Your Local Git Directory to the Remote Repo","#8-push-your-local-git-directory-to-the-remote-repo","7. Stage and Commit Any Recent Changes","#7-stage-and-commit-any-recent-changes","6. Confirm the Files NPM Will Publish","#6-confirm-the-files-npm-will-publish","5. Specify the Files You Want to Publish to NPM","#5-specify-the-files-you-want-to-publish-to-npm","4. Stage and Commit Your Project’s Changes to Git","#4-stage-and-commit-your-projects-changes-to-git","3. Compile Any Pending Code","#3-compile-any-pending-code","2. Confirm That Your Package Have Passing Tests","#2-confirm-that-your-package-have-passing-tests","1. Search Engine Optimization (SEO)","#1-search-engine-optimization-seo","Publishing Package to NPM","#publishing-package-to-npm","Creating LICENSE","#creating-license","Creating README","#creating-readme","7. Unlink Your Package from the Global Folder","#7-unlink-your-package-from-the-global-folder","6. Unlink Your Package from the Test-App","#6-unlink-your-package-from-the-test-app","5. Use the Link-Installed Package in Your Test-App","#5-use-the-link-installed-package-in-your-test-app","4. Configure Turbopack to Resolve Symlinks","#4-configure-turbopack-to-resolve-symlinks","3. Install Your Package from Your System’s Global Folder to the Test-App","#3-install-your-package-from-your-systems-global-folder-to-the-test-app","2. Create a NextJS Demo Website for Testing Your Package","#2-create-a-nextjs-demo-website-for-testing-your-package","1. Link-Install Your Package Globally in Your System","#1-link-install-your-package-globally-in-your-system","Local Testing of Unpublished Package","#local-testing-of-unpublished-package","Defining Package’s Runtime Entry Points","#defining-packages-runtime-entry-points","Compiling React to JavaScript","#compiling-react-to-javascript","4. Run the Test","#4-run-the-test","3. Add the Stylesheet to the Entry File","#3-add-the-stylesheet-to-the-entry-file","2. Apply CSS Styles to Your Component","#2-apply-css-styles-to-your-component","1. Create the Stylesheet","#1-create-the-stylesheet","Styling React Components","#styling-react-components","3. Test the Commitlint GitHub Action Workflow","#3-test-the-commitlint-github-action-workflow","2. Define the Commitlint GitHub Action Workflow","#2-define-the-commitlint-github-action-workflow","1. Create a Commitlint GitHub Action Workflow File","#1-create-a-commitlint-github-action-workflow-file","Setting Up Commitlint GitHub Action","#setting-up-commitlint-github-action","Creating a Hook to Auto-Lint Commit Messages","#creating-a-hook-to-auto-lint-commit-messages","Setting Up Husky","#setting-up-husky","Enforcing the Conventional Commits Format","#enforcing-the-conventional-commits-format","Conventional Commits Message Syntax","#conventional-commits-message-syntax","Commit Message Configuration","#commit-message-configuration","10. Run the Test","#10-run-the-test","9. Configure Vitest’s Testing Environment","#9-configure-vitests-testing-environment","8. Configure Vite to Compile Your Code","#8-configure-vite-to-compile-your-code","7. Install the Code Compiler","#7-install-the-code-compiler","6. Configure the Entry File","#6-configure-the-entry-file","5. Develop Your React Component","#5-develop-your-react-component","4. Write Your Test Case","#4-write-your-test-case","3. Create Your Code Files","#3-create-your-code-files","2. Specify Vitest as Your Project’s Test Runner Tool","#2-specify-vitest-as-your-projects-test-runner-tool","1. Install the Testing Tools","#1-install-the-testing-tools","Testing React Component","#testing-react-component","10. Install React","#10-install-react","9. Push Your Local Git Directory to the Remote Repo","#9-push-your-local-git-directory-to-the-remote-repo","8. Configure a GitHub Remote Repository","#8-configure-a-github-remote-repository","7. Stage and Commit Your Project’s Changes to Git","#7-stage-and-commit-your-projects-changes-to-git","6. Specify the Files Git Should Ignore","#6-specify-the-files-git-should-ignore","5. Initialize a Git Repository","#5-initialize-a-git-repository","4. Configure the Project as an ES Module NPM Package","#4-configure-the-project-as-an-es-module-npm-package","3. Create a package.json File","#3-create-a-packagejson-file","2. Create a Project Directory","#2-create-a-project-directory","1. Set Up Your System","#1-set-up-your-system","Project Configuration","#project-configuration","Let’s Get Started!","#lets-get-started","Got Questions?","#got-questions","What You Should Know First","#what-you-should-know-first","Use the Right Tools","#use-the-right-tools","What You Will Build","#what-you-will-build","Why This Book Will Help You","#why-this-book-will-help-you","Welcome to the World of NPM Packages!","#welcome-to-the-world-of-npm-packages","Introduction","#introduction",{"_12":13,"_37":38,"_35":36,"_514":515,"_516":517,"_518":519,"_39":40,"_520":521,"_522":523},"parts",[466],"toc",[362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465],"isUnavailableOnline",false,"unavailableMessage",{"_22":23,"_12":352,"_25":-5,"_26":353,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":350,"_25":-5,"_26":351,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":348,"_25":-5,"_26":349,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":346,"_25":-5,"_26":347,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":344,"_25":-5,"_26":345,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":342,"_25":-5,"_26":343,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":340,"_25":-5,"_26":341,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":338,"_25":-5,"_26":339,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":336,"_25":-5,"_26":337,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":334,"_25":-5,"_26":335,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":332,"_25":-5,"_26":333,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":330,"_25":-5,"_26":331,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":328,"_25":-5,"_26":329,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":326,"_25":-5,"_26":327,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":324,"_25":-5,"_26":325,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":322,"_25":-5,"_26":323,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":320,"_25":-5,"_26":321,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":318,"_25":-5,"_26":319,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":316,"_25":-5,"_26":317,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":314,"_25":-5,"_26":315,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":312,"_25":-5,"_26":313,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":310,"_25":-5,"_26":311,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":308,"_25":-5,"_26":309,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":306,"_25":-5,"_26":307,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":304,"_25":-5,"_26":305,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":302,"_25":-5,"_26":303,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":300,"_25":-5,"_26":301,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":298,"_25":-5,"_26":299,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":296,"_25":-5,"_26":297,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":294,"_25":-5,"_26":295,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":292,"_25":-5,"_26":293,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":290,"_25":-5,"_26":291,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":288,"_25":-5,"_26":289,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":286,"_25":-5,"_26":287,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":284,"_25":-5,"_26":285,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":282,"_25":-5,"_26":283,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":280,"_25":-5,"_26":281,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":278,"_25":-5,"_26":279,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":276,"_25":-5,"_26":277,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":274,"_25":-5,"_26":275,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":272,"_25":-5,"_26":273,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":270,"_25":-5,"_26":271,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":268,"_25":-5,"_26":269,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":266,"_25":-5,"_26":267,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":264,"_25":-5,"_26":265,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":24,"_25":-5,"_26":27,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":262,"_25":-5,"_26":263,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":260,"_25":-5,"_26":261,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":258,"_25":-5,"_26":259,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":256,"_25":-5,"_26":257,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":254,"_25":-5,"_26":255,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":252,"_25":-5,"_26":253,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":250,"_25":-5,"_26":251,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":248,"_25":-5,"_26":249,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":246,"_25":-5,"_26":247,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":244,"_25":-5,"_26":245,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":242,"_25":-5,"_26":243,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":240,"_25":-5,"_26":241,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":238,"_25":-5,"_26":239,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":236,"_25":-5,"_26":237,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":234,"_25":-5,"_26":235,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":232,"_25":-5,"_26":233,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":230,"_25":-5,"_26":231,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":228,"_25":-5,"_26":229,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":226,"_25":-5,"_26":227,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":224,"_25":-5,"_26":225,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":222,"_25":-5,"_26":223,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":220,"_25":-5,"_26":221,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":218,"_25":-5,"_26":219,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":216,"_25":-5,"_26":217,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":214,"_25":-5,"_26":215,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":212,"_25":-5,"_26":213,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":210,"_25":-5,"_26":211,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":208,"_25":-5,"_26":209,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":206,"_25":-5,"_26":207,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":204,"_25":-5,"_26":205,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":202,"_25":-5,"_26":203,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":200,"_25":-5,"_26":201,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":198,"_25":-5,"_26":199,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":196,"_25":-5,"_26":197,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":194,"_25":-5,"_26":195,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":192,"_25":-5,"_26":193,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":190,"_25":-5,"_26":191,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":188,"_25":-5,"_26":189,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":186,"_25":-5,"_26":187,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":184,"_25":-5,"_26":185,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":182,"_25":-5,"_26":183,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":180,"_25":-5,"_26":181,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":178,"_25":-5,"_26":179,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":176,"_25":-5,"_26":177,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":174,"_25":-5,"_26":175,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":172,"_25":-5,"_26":173,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":170,"_25":-5,"_26":171,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":168,"_25":-5,"_26":169,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":166,"_25":-5,"_26":167,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":164,"_25":-5,"_26":165,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":162,"_25":-5,"_26":163,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":160,"_25":-5,"_26":161,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":158,"_25":-5,"_26":159,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":156,"_25":-5,"_26":157,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":154,"_25":-5,"_26":155,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":152,"_25":-5,"_26":153,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":150,"_25":-5,"_26":151,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":147,"_12":148,"_25":-5,"_26":149,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_12":13,"_25":467,"_28":468,"_469":470},"",0,"chapters",[471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491],{"_22":23,"_12":352,"_26":353,"_28":29,"_492":513,"_32":-5},{"_22":23,"_12":336,"_26":337,"_28":29,"_492":512,"_32":-5},{"_22":23,"_12":314,"_26":315,"_28":29,"_492":511,"_32":-5},{"_22":23,"_12":292,"_26":293,"_28":29,"_492":510,"_32":-5},{"_22":23,"_12":282,"_26":283,"_28":29,"_492":509,"_32":-5},{"_22":23,"_12":274,"_26":275,"_28":29,"_492":508,"_32":-5},{"_22":23,"_12":264,"_26":265,"_28":29,"_492":507,"_32":-5},{"_22":23,"_12":24,"_26":27,"_28":29,"_492":506,"_32":-5},{"_22":23,"_12":262,"_26":263,"_28":29,"_492":505,"_32":-5},{"_22":23,"_12":260,"_26":261,"_28":29,"_492":504,"_32":-5},{"_22":23,"_12":244,"_26":245,"_28":29,"_492":503,"_32":-5},{"_22":23,"_12":242,"_26":243,"_28":29,"_492":502,"_32":-5},{"_22":23,"_12":240,"_26":241,"_28":29,"_492":501,"_32":-5},{"_22":23,"_12":214,"_26":215,"_28":29,"_492":500,"_32":-5},{"_22":23,"_12":206,"_26":207,"_28":29,"_492":499,"_32":-5},{"_22":23,"_12":192,"_26":193,"_28":29,"_492":498,"_32":-5},{"_22":23,"_12":184,"_26":185,"_28":29,"_492":497,"_32":-5},{"_22":23,"_12":174,"_26":175,"_28":29,"_492":496,"_32":-5},{"_22":23,"_12":168,"_26":169,"_28":29,"_492":495,"_32":-5},{"_22":23,"_12":162,"_26":163,"_28":29,"_492":494,"_32":-5},{"_22":23,"_12":152,"_26":153,"_28":29,"_492":493,"_32":-5},"subsections",[464,465],[459,460,461,462],[456,457],[453,454],[448,449,450,451],[444,445,446],[437,438,439,440,441,442],[433,434,435],[420,421,422,423,424,425,426,427,428,429,430,431],[],[],[410,411,412,413,414,415,416],[],[],[],[402,403,404,405],[398,399,400],[393,394,395,396],[382,383,384,385,386,387,388,389,390,391],[371,372,373,374,375,376,377,378,379,380],[363,364,365,366,367,368,369],"coverFeatured",{"_533":535},"coverFeatured2x",{"_533":534},"authors",[524],"samplePdfUrl","https://s3.amazonaws.com/samples.leanpub.com/creating-npm-package-with-react-javascript-sample.pdf?x-amz-checksum-mode=ENABLED&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=0XBXHW3Q9GGV69BT7E82%2F20260525%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260525T134040Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=b8edb388ad501c8270986e6f8fa70f669c85ab1ce97ffb33226a7964322859dc","sampleEpubUrl","https://s3.amazonaws.com/samples.leanpub.com/creating-npm-package-with-react-javascript-sample.epub?x-amz-checksum-mode=ENABLED&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=0XBXHW3Q9GGV69BT7E82%2F20260525%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260525T134040Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=0a8c5d371c3008844930e5fde52b51e13910567d122bdb35751bd121fea6e9f6",{"_525":526,"_527":528,"_529":530},"id","Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6UHJvZHVjdEF1dGhvci81NTc3Mg","name","CodeSweetly","user",{"_531":532},"username","codesweetly","url","https://d2sofvawe08yqg.cloudfront.net/creating-npm-package-with-react-javascript/s_featured2x?1777511313&1777511313","https://d2sofvawe08yqg.cloudfront.net/creating-npm-package-with-react-javascript/s_featured?1777511313&1777511313","shoppingCartId","shoppingCart",{"_525":569,"_570":468,"_571":560,"_572":467,"_573":574,"_575":576,"_577":560},"locale","en","readerTheme","light","constants",{"_567":568},"publishers",{"_563":564,"_565":566},"learnerOrganizations",[],"needsLocaleCookieSync","announcements",{"_556":557,"_558":-5},"sentryEnvironment","production","sentryRelease","9a512b225740c67e5ee59fafdf0c83f526ae08a5","announcement_store",{"_559":560,"_561":562},"announcement_authors","flag",true,"text","

Kick off your book project in 3 hours! Live workshop on Zoom. You’ll leave with a real book project, progress on your first chapter, and a clear plan to keep going. Saturday, June 6, 2026. Learn more…

\n","companies",[],"universities",[],"paypalClientId","AX53Cwz8jR6rVVzzZiZNWWXl0dGagi-GZrjG-S3Ua14E5nrKMn7DxDQ730O4R8LusLPp49ALn6aRVaEy","no-cart","count","free","updatedAt","paymentGateway","STRIPE","cartItems",[],"loading"]

Compiling React to JavaScript

Table of Contents

Introduction

Welcome to the World of NPM Packages!

Why This Book Will Help You

What You Will Build

Use the Right Tools

What You Should Know First

Got Questions?

Let’s Get Started!

Project Configuration

1. Set Up Your System

2. Create a Project Directory

3. Create a package.json File

4. Configure the Project as an ES Module NPM Package

5. Initialize a Git Repository

6. Specify the Files Git Should Ignore

7. Stage and Commit Your Project’s Changes to Git

8. Configure a GitHub Remote Repository

9. Push Your Local Git Directory to the Remote Repo

10. Install React

Why Install React as a Package’s Dev-Dependency?

Testing React Component

1. Install the Testing Tools

2. Specify Vitest as Your Project’s Test Runner Tool

3. Create Your Code Files

4. Write Your Test Case

5. Develop Your React Component

6. Configure the Entry File

7. Install the Code Compiler

8. Configure Vite to Compile Your Code

9. Configure Vitest’s Testing Environment

10. Run the Test

Commit Message Configuration

Conventional Commits Message Syntax

Enforcing the Conventional Commits Format

Setting Up Husky

Creating a Hook to Auto-Lint Commit Messages

Setting Up Commitlint GitHub Action

1. Create a Commitlint GitHub Action Workflow File

2. Define the Commitlint GitHub Action Workflow

3. Test the Commitlint GitHub Action Workflow

Styling React Components

1. Create the Stylesheet

2. Apply CSS Styles to Your Component

3. Add the Stylesheet to the Entry File

4. Run the Test

Compiling React to JavaScript

Distinguishing Source Code from Distribution Code

Defining Package’s Runtime Entry Points

Local Testing of Unpublished Package

1. Link-Install Your Package Globally in Your System

2. Create a NextJS Demo Website for Testing Your Package

3. Install Your Package from Your System’s Global Folder to the Test-App

4. Configure Turbopack to Resolve Symlinks

5. Use the Link-Installed Package in Your Test-App

6. Unlink Your Package from the Test-App

7. Unlink Your Package from the Global Folder

Creating README

Creating LICENSE

Publishing Package to NPM

1. Search Engine Optimization (SEO)

Description

Keywords

Author

License

Homepage

2. Confirm That Your Package Have Passing Tests

3. Compile Any Pending Code

4. Stage and Commit Your Project’s Changes to Git

5. Specify the Files You Want to Publish to NPM

6. Confirm the Files NPM Will Publish

7. Stage and Commit Any Recent Changes

8. Push Your Local Git Directory to the Remote Repo

9. Sign In or Sign Up on the NPM Website

10. Log In to NPM via the Terminal

11. Confirm If Your Package’s Name Is Available

1. CLI command

2. URL search

What to do if your chosen package name is currently in use by someone else

3. Import the Extracted Elements into the `TweetButton.jsx` File