Creating NPM Package with ReactJS

Introduction

1. Welcome to the World of NPM Packages!
2. Why This Book Will Help You
3. What You Will Build
4. Use the Right Tools
5. What You Should Know First
6. Got Questions?
7. Let’s Get Started!

Project Configuration

1. 1. Set Up Your System
2. 2. Create a Project Directory
3. 3. Create a package.json File
4. 4. Configure the Project as an ES Module NPM Package
5. 5. Initialize a Git Repository
6. 6. Specify the Files Git Should Ignore
7. 7. Stage and Commit Your Project’s Changes to Git
8. 8. Configure a GitHub Remote Repository
9. 9. Push Your Local Git Directory to the Remote Repo
10. 10. Install React

Testing React Component

1. 1. Install the Testing Tools
2. 2. Specify Vitest as Your Project’s Test Runner Tool
3. 3. Create Your Code Files
4. 4. Write Your Test Case
5. 5. Develop Your React Component
6. 6. Configure the Entry File
7. 7. Install the Code Compiler
8. 8. Configure Vite to Compile Your Code
9. 9. Configure Vitest’s Testing Environment
10. 10. Run the Test

Commit Message Configuration

1. Conventional Commits Message Syntax
2. Enforcing the Conventional Commits Format
3. Setting Up Husky
4. Creating a Hook to Auto-Lint Commit Messages

Setting Up Commitlint GitHub Action

1. 1. Create a Commitlint GitHub Action Workflow File
2. 2. Define the Commitlint GitHub Action Workflow
3. 3. Test the Commitlint GitHub Action Workflow

Styling React Components

1. 1. Create the Stylesheet
2. 2. Apply CSS Styles to Your Component
3. 3. Add the Stylesheet to the Entry File
4. 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. 1. Link-Install Your Package Globally in Your System
2. 2. Create a NextJS Demo Website for Testing Your Package
3. 3. Install Your Package from Your System’s Global Folder to the Test-App
4. 4. Configure Turbopack to Resolve Symlinks
5. 5. Use the Link-Installed Package in Your Test-App
6. 6. Unlink Your Package from the Test-App
7. 7. Unlink Your Package from the Global Folder

Creating README

Creating LICENSE

Publishing Package to NPM

1. 1. Search Engine Optimization (SEO)
2. 2. Confirm That Your Package Have Passing Tests
3. 3. Compile Any Pending Code
4. 4. Stage and Commit Your Project’s Changes to Git
5. 5. Specify the Files You Want to Publish to NPM
6. 6. Confirm the Files NPM Will Publish
7. 7. Stage and Commit Any Recent Changes
8. 8. Push Your Local Git Directory to the Remote Repo
9. 9. Sign In or Sign Up on the NPM Website
10. 10. Log In to NPM via the Terminal
11. 11. Confirm If Your Package’s Name Is Available
12. 12. Publish Your Package!

Local Testing of the Published Package

1. 1. Install the Package
2. 2. Import the Package
3. 3. Run Your Local Server

Production Testing of the Published Package

1. 1. Stage and Commit Your Changes
2. 2. Set up a GitHub Remote Repository for Your Next.js Test App
3. 3. Push Your Local Git Directory to the Remote Repo
4. 4. Sign In or Create an Account on the Vercel Website
5. 5. Deploy Your Project to Vercel
6. 6. Test the Package on Your Live Demo Website

Updating Package’s Versions

1. Example 1: Updating to a Patch Version
2. Example 2: Updating to a Minor Version
3. Example 3: Updating to a Major Version

Automating Version Management

1. 1. Create a Release GitHub Action Workflow File
2. 2. Define the Release GitHub Action Workflow
3. 3. How to Overwrite semantic-release’s Default Configurations
4. 4. Notify Developers That the Package Uses Automated Version Management

NPM Trusted Publishing Configuration

1. Add a New Feature
2. Update an Existing Feature

Automating GitHub Releases

1. Add the Preset Library to Your Release Workflow
2. Configure semantic-release to Automatically Publish the Package’s Release Notes

Modularizing JavaScript Codebase

1. 1. Identify Independent Elements
2. 2. Split the Elements You Want to Extract into Their Separate Modules
3. 3. Import the Extracted Elements into the TweetButton.jsx File
4. 4. Release the Latest Version of the Project

Epilogue

1. What’s Next?
2. One Last Favor