Creating NPM Package with React TypeScript

Creating NPM Package with React TypeScript

CodeSweetly
This is a sample of the book's content.Buy on Leanpub

Table of Contents

Creating NPM Package with React TypeScript

  • Introduction
    • Welcome to NPM Package!
    • How This Book Can Help You
    • The Roadmap
    • Dependencies
    • Prerequisite
    • Questions and Comments
    • Let’s Get It Started!
  • Project Configuration
    • 1. Set Up Your System
    • 2. Create a Project Directory
    • 3. Create a package.json File
    • 4. Initialize a Git Repository
    • 5. Specify the Files Git Should Ignore
    • 6. Stage and Commit Your Project’s Changes to Git
    • 7. Configure a GitHub Remote Repository
    • 8. Push Your Local Git Directory to the Remote Repo
    • 9. Install React and TypeScript
    • 10. Configure the TypeScript Compiler
  • Testing React Component
    • 1. Install the Testing Tools
    • 2. Specify Jest as Your Project’s Test Runner Tool
    • 3. Configure Jest to Test TypeScript Code
    • 4. Configure Jest to Compile TypeScript Files
    • 5. Configure Jest’s Testing Environment
    • 6. Create Your Code Files
    • 7. Write Your Test Case
    • 8. Develop Your React Component
    • 9. 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. Load CSS Files into Jest’s JSDOM
    • 4. Run the Test
  • Compiling React to JavaScript
    • How to Compile Both ECMAScript and CommonJS Modules
  • Distinguishing Source and Distribution Code
  • Specify Items to Compile
  • Defining Package’s Entry Point
  • Specifying Package’s Declaration File
  • 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)
    • 2. Specify the Files You Want to Publish to NPM
    • 3. Confirm the Files NPM Will Publish
    • 4. Confirm That Your Package Have Passing Tests
    • 5. Compile Any Pending Code
    • 6. Stage and Commit Any Recent Changes
    • 7. Push Your Local Git Directory to the Remote Repo
    • 8. Sign In or Sign Up on the NPM Website
    • 9. Log In to NPM via the Terminal
    • 10. Confirm If Your Package’s Name Is Available
    • 11. Publish Your Package!
  • Local Testing of the Published Package
    • 1. Install the Package
    • 2. Import the Package
    • 3. Run Your Local Server
  • Production Testing of the Published Package
    • 1. Stage and Commit Your Changes
    • 2. Set up a GitHub Remote Repository for Your Next.js Test App
    • 3. Push Your Local Git Directory to the Remote Repo
    • 4. Sign In or Create an Account on the Vercel Website
    • 5. Deploy Your Project to Vercel
    • 6. Test the Package on Your Live Demo Website
  • Updating Package’s Versions
    • Example 1: Updating to a Patch Version
    • Example 2: Updating to a Minor Version
    • Example 3: Updating to a Major Version
  • Automating Version Management
    • 1. Create a Release GitHub Action Workflow File
    • 2. Define the Release GitHub Action Workflow
    • 3. How to Overwrite semantic-release’s Default Configurations
    • 4. Remove the dist Folder Before Building Only in the Development Environment
    • 5. Notify Developers That the Package Uses Automated Version Management
  • NPM Trusted Publishing Configuration
    • Add a New Feature
    • Update an Existing Feature
  • Automating GitHub Releases
    • Add the Preset Library to Your Release Workflow
    • Configure semantic-release to Automatically Publish the Package’s Release Notes
  • Modularizing TypeScript Codebase
    • 1. Identify Independent Elements
    • 2. Split the Elements You Want to Extract into Their Separate Modules
    • 3. Import the Extracted Elements into the TweetButton.tsx File
    • 4. Configure Jest to Strip the Extension from Import Statements
    • 5. Release the Latest Version of the Project
  • Epilogue
    • What’s Next?
    • One Last Favor
Creating NPM Package with React TypeScript/overview

Creating NPM Package with React TypeScript

course_overview

Build and publish your own React NPM Package with CodeSweetly's step-by-step guide. Start building and sharing your React creations today!

count_chapters
begin_reading
download
p_implied_book_part_name

Creating NPM Package with React TypeScript23 chapters

Begin ›
  1. Introduction

  2. Project Configuration

  3. Testing React Component

  4. Commit Message Configuration

  5. Setting Up Commitlint GitHub Action

  6. Styling React Components

  7. Compiling React to JavaScript

  8. Distinguishing Source and Distribution Code

  9. Specify Items to Compile

  10. Defining Package’s Entry Point

  11. Specifying Package’s Declaration File

  12. Local Testing of Unpublished Package

  13. Creating README

  14. Creating LICENSE

  15. Publishing Package to NPM

  16. Local Testing of the Published Package

  17. Production Testing of the Published Package

  18. Updating Package’s Versions

  19. Automating Version Management

  20. NPM Trusted Publishing Configuration

  21. Automating GitHub Releases

  22. Modularizing TypeScript Codebase

  23. Epilogue