How to Build a React TypeScript Component Library and Publish on npm скачать в хорошем качестве

How to Build a React TypeScript Component Library and Publish on npm

Source code: https://github.com/howdevyou/react-co... In this video, I'll guide you through building and publishing your own React TypeScript Component Library from scratch. We’ll start with an introduction to npm (Node Package Manager) and NVM (Node Version Manager), exploring how npm is used to manage, publish, and download packages, and how NVM helps you switch between different Node.js versions. You’ll also learn about semantic versioning and how to understand version numbers to track changes in your packages. We’ll then set up the development environment using npm, where I'll show you how to create a simple npm package, install TypeScript and React, and understand the different types of dependencies, such as dev dependencies and peer dependencies. I’ll walk you through creating a custom TypeScript configuration file to define how your TypeScript code is compiled into JavaScript. Next, we'll create and test a React component as part of your library, where you'll learn how to set up Jest for testing your components and configure it to work seamlessly with TypeScript. I’ll demonstrate how to run tests in a JSDOM environment to ensure your React components are functioning as expected. We’ll also dive into the importance of conventional commit messages and how they help maintain a clear and understandable commit history in your project. You’ll learn how to enforce these conventions using tools like commitlint and Husky, ensuring that every commit in your project follows the best practices. As we move forward, I’ll show you how to build your React TypeScript Component Library for both ECMAScript and CommonJS modules, keeping your builds clean by excluding unnecessary files. I’ll guide you through testing your unpublished package locally using npm link, ensuring everything works perfectly before it goes live. Before we publish, we’ll make final adjustments, such as adding a license and cleaning up previous builds with the rimraf package. I’ll also explain how to define entry points in your package.json file, giving users the flexibility to choose between different module types. Finally, I’ll take you through the process of publishing your React TypeScript Component Library on npm. We’ll ensure your package name is available, run a dry-run of the publish command, and then officially publish your package for the world to use. I’ll also give you a quick demo of testing the package in a Next.js project to make sure everything is working smoothly. By the end of this video, you’ll have a fully functional React TypeScript Component Library ready to be shared with the developer community. If you find this video helpful, don't forget to like, share, and subscribe for more content on React, TypeScript, and web development. Timestamp - 00:00 Intro 00:38 NPM/NVM & Semantic Versioning 07:42 Environment Setup for React TypeScript Library 14:04 Creating and Testing React Component 25:15 Conventional Commit Messages & CommonJs and ECMAScription Builds 34:04 Testing module before publishing to NPM 43:37 Publishing Library to NPM