Skip to main content

Master Custom React Hooks with TypeScript

2h 21m 3s
English
Paid

Course description

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 19 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Master Custom React Hooks with TypeScript

0:00
/
#1: Course Introduction

All Course Lessons (19)

#Lesson TitleDurationAccess
1
Course Introduction Demo
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

Unlock unlimited learning

Get instant access to all 18 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Sources: udemy
Full Stack introduction to HATEOAS. In this course, you will learn the core concepts of HATEOAS as well as how to leverage this on a ReactJS Application. HATEOAS stands for: Hyp...
5 hours 51 minutes 37 seconds
MERN Stack - React Node from Scratch Building Social Network

MERN Stack - React Node from Scratch Building Social Network

Sources: udemy
Welcome to Become a FullStack / MERN Stack JavaScript Developer from Scratch with React, Node JS and MongoDB. In this course you will Learn React with Node JS f
20 hours 49 minutes 20 seconds
The Modern React 18 Bootcamp - A Complete Developer Guide

The Modern React 18 Bootcamp - A Complete Developer Guide

Sources: udemy
In this course we will take you from a React 18 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly
20 hours 35 minutes 57 seconds
TypeScript Simplified

TypeScript Simplified

Sources: webdevsimplified.com
Everything you need to learn TypeScript and build any project you can dream of in 47 easy to digest videos which amount to just under 5 hours of video content. Every single vide...
10 hours 23 minutes 56 seconds
Responsive LLM Applications with Server-Sent Events

Responsive LLM Applications with Server-Sent Events

Sources: fullstack.io
Large Language Models (LLMs) are transforming entire industries, but their integration into user interfaces with real-time data streaming...
1 hour 18 minutes 18 seconds