Creating NPM Package with ReactJS (The Course)
Course Info
This course includes 3 attempts.
Ready to level up your React development skills? Learn how to build, test, and publish your own NPM packages in a production-grade environment with CodeSweetly’s comprehensive course. Whether you aim to share reusable components, streamline development, or impress future employers, this course is your step-by-step guide to creating polished, publishable React libraries.
This hands-on course is packed with exercises and quizzes designed to reinforce each concept. You won’t just read or watch—you’ll build. By the end, you will be confident shipping your own packages to NPM and managing releases like a pro.
What You’ll Learn
Master every step in the React package creation process, including:
✅ Project Configuration: Set up a clean, scalable React project from scratch.
✅ Testing React Components: Implement tests to ensure your package is rock-solid.
✅ Commit Message Configuration: Standardize commits for better version tracking.
✅ Styling React Components: Add and manage styles within your package.
✅ Compiling React to JavaScript: Convert your code into distributable formats.
✅ Local Testing of Unpublished Package: Test before you publish.
✅ Creating README & LICENSE: Document and license your code professionally.
✅ Publishing Package to NPM: Push your library live for public use.
✅ Local & Production Testing of Published Package: Ensure quality post-publish.
✅ Updating Package’s Versions: Follow semantic versioning best practices.
✅ Automating Versioning, Changelog, & GitHub Releases: Streamline your workflow with CI/CD tools.
Why Take This Course?
💡 Perfect for React Developers ready to distribute their code.
🛠️ Practice-Focused: Each chapter includes quizzes to deepen understanding.
🚀 Career-Boosting Skills: Learn in-demand practices used by open-source maintainers and teams.
🧩 Reusable Knowledge: Apply what you learn to any ReactJS package project.
Start building professional-grade React libraries today!
Course Material
- Introduction
- Welcome to the World of NPM Packages!
- Why This Course 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. 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 as a dev-dependency
- Why Install React as a Package’s Dev-Dependency?
- Exercise 1
- Quiz 11 attempt allowed
- Testing React Component
- 1. Install the Testing Tools
- 2. Specify Jest as Your Project’s Test Runner Tool
- 3. Install the Code Compiler
- 4. Configure Babel to Compile Your Code
- 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
- Exercise 2
- Quiz 21 attempt allowed
- Commit Message Configuration
- Conventional Commits Messages Syntax
- Enforcing the Conventional Commits Format
- Setting up Husky
- Creating a Hook to Auto-Lint Commit Messages
- Exercise 3
- Quiz 31 attempt allowed
- Setting Up GitHub Action
- 1. Create a GitHub Action Workflow File
- 2. Define the GitHub Action Workflow
- 3. Test the GitHub Action Workflow
- Exercise 4
- Quiz 41 attempt allowed
- Styling React Components
- 1. Create the Stylesheet
- 2. Apply CSS Styles to Your Component
- 3. Loading CSS Files to Jest’s JSDOM
- 4. Run the Test
- Exercise 5
- Quiz 51 attempt allowed
- Compiling React to JavaScript
- Exercise 6
- Quiz 61 attempt allowed
- Distinguishing Source and Distribution Code
- Exercise 7
- Quiz 71 attempt allowed
- Defining Package’s Entry Point
- Quiz 81 attempt allowed
- 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. Use the Link-Installed Package in the Test-App
- 5. Unlink Your Package from the Test-App
- 6. Unlink Your Package from the Global Folder
- Exercise 8
- Quiz 91 attempt allowed
- Creating README
- Exercise 9
- Quiz 101 attempt allowed
- Creating LICENSE
- Exercise 10
- Quiz 111 attempt allowed
- 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 You 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!
- Exercise 11
- Quiz 121 attempt allowed
- Local Testing of the Published Package
- 1. Install the Package
- 2. Import the Package
- 3. Run Your Local Server
- Exercise 12
- Quiz 131 attempt allowed
- Production Testing of the Published Package
- 1. Stage and Commit Your Changes
- 2. Set Up a GitHub Remote Repository for Your NextJS Test-App
- 3. Push Your Local Git Directory to the Remote Repo
- 4. Sign In or Sign Up on the Vercel Website
- 5. Deploy Your Project to Vercel’s Server
- 6. Test the Package on the Live Demo Website
- Quiz 141 attempt allowed
- 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
- Exercise 13
- Quiz 151 attempt allowed
- Automating Version Management
- How to Release Your Package’s Latest Version
- How to Overwrite Release-It’s Default Configurations
- How Release-It Determines Your Package’s Latest Version
- How to Provide Release-It with a Recommended Version
- Exercise 14
- Quiz 161 attempt allowed
- Automating Changelog Management
- Quiz 171 attempt allowed
- Automating GitHub Releases
- 1. Get a GitHub Personal Access Token
- 2. Copy the Generated Token
- 3. Create a GitHub Environment Variable
- 4. Tell Release-It Your GitHub Token’s Name
- 5. Make the GitHub Secret Available Locally in Your Project
- 6. Prevent Git from Monitoring the Environment File
- 7. Install the Plugin for Loading the .env File
- 8. Load the .env File While Releasing Your Project’s Latest Version
- 9. Stage and Commit Your Changes
- Exercise 15
- Quiz 181 attempt allowed
- Epilogue
- What’s Next?
- One Last Favor
Instructors
Why should learning to be a software developer be so hard and dull? CodeSweetly exists specifically to help out.
CodeSweetly helps you become a confident software developer by simplifying technical concepts so you can focus on coding sweetly.
Community
This course has a private forum for learners who are taking this course.
The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
See full terms...
Earn $8 on a $10 Purchase, and $16 on a $20 Purchase
We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earnedover $14 millionwriting, publishing and selling on Leanpub.
Learn more about writing on Leanpub
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
