Master Custom React Hooks with TypeScript
Welcome to the course "Creating a Custom React Hook npm Package Using React and TypeScript"! In this course, we will develop a custom React Hook that I published on NPM and which already has almost 150 stars on GitHub.
In this course, you will use TypeScript and various composition strategies to keep your code clean. You will also add many features that make the hook convenient for other developers to use when installing the package.
This course is designed for intermediate-level developers who already have some experience with React and TypeScript. Even if you are new to React or TypeScript, the lessons are created in a very clear and step-by-step manner, which will be easy to grasp.
The course is divided into four modules. In the first module, you will focus on creating all the necessary tools, setting up the build, and an example application to test your hook. In the second module, you will develop more advanced features, such as changing the document title in advanced ways and even changing the favicon. In the third module, you will perform optimization and improvement to create a truly modern React Hook package and publish it on npm. Finally, in the fourth module, you will publish an example application to serve as a live example of the hook's functionality, as well as a full-fledged documentation site.
Watch Online Master Custom React Hooks with TypeScript
# | Title | Duration |
---|---|---|
1 | Course Introduction | 01:06 |
2 | Environment Setup With nvm | 02:40 |
3 | Scaffolding a React Hook Library with npm init | 07:33 |
4 | Building a Skeleton create-react-app to Test the Hook | 04:53 |
5 | Building Title Looping Functionality with the useEffect Hook | 12:23 |
6 | Packaging react-use-please-stay as an npm Module using Rollup | 09:16 |
7 | Cleaning Up and Refactoring react-use-please-stay | 06:30 |
8 | Implementing a Cascading Letter Functionality | 07:56 |
9 | Implementing a Marquee Functionality | 07:45 |
10 | Implementing Favicon Modification Functionality | 08:24 |
11 | Add Interval Time as a Hook Parameter | 02:28 |
12 | Add Should Always Play as a Hook Parameter | 02:28 |
13 | Use Custom Types to Type the Hook Parameters | 11:37 |
14 | Adding a Development-only Warning Logger | 09:11 |
15 | Prevent Concurrent Usages of the Hook | 06:58 |
16 | Restore Original Values on Refocus and Unmount | 09:45 |
17 | Publish the Hook to npm | 05:40 |
18 | Prepare the Example App as a Public Example Page | 19:09 |
19 | Publish the Example App to GitHub Pages | 05:21 |
Similar courses to Master Custom React Hooks with TypeScript
![MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)](https://cdn.courseflix.net/courses/100x56/mern-stack-2022-build-ultimate-cms-wordpress-clone.jpg?d=1739917680776)
MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)udemy
![TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL](https://cdn.courseflix.net/courses/100x56/tinyhouse-a-fullstack-react-masterclass-with-typescript-and-graphql.jpg?d=1739917680776)
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQLfullstack.io
![Course: Large Scale Apps with Vue, Vite and TypeScript](https://cdn.courseflix.net/courses/100x56/course-large-scale-apps-with-vue-vite-and-typescript.jpg?d=1739917680776)
Course: Large Scale Apps with Vue, Vite and TypeScriptDamiano Fusco
![React Data Fetching: Beyond the Basics](https://cdn.courseflix.net/courses/100x56/react-data-fetching-beyond-the-basics.jpg?d=1739917680776)
React Data Fetching: Beyond the Basicsfullstack.io
![MERN React Node Next.js Multi User SEO Blogging Platform](https://cdn.courseflix.net/courses/100x56/mern-react-node-next-js-multi-user-seo-blogging-platform.jpg?d=1739917680776)
MERN React Node Next.js Multi User SEO Blogging Platformudemy
![Building Applications with React 17 and ASP.NET Core 6](https://cdn.courseflix.net/courses/100x56/building-applications-with-react-17-and-asp-net-core-6.jpg?d=1739917680776)
Building Applications with React 17 and ASP.NET Core 6udemy
![Modern React with Redux [2023 Update]](https://cdn.courseflix.net/courses/100x56/modern-react-with-redux-2023-update.jpg?d=1739917680776)
Modern React with Redux [2023 Update]udemyStephen Grider
![Epic React (Epic React Pro)](https://cdn.courseflix.net/courses/100x56/epic-react-epic-react-pro.jpg?d=1739917680776)
Epic React (Epic React Pro)Kent C. Dodds
![Data fetching with React Server Components](https://cdn.courseflix.net/courses/100x56/data-fetching-with-react-server-components.jpg?d=1739917680776)