How to create a countdown timer in React JS using React hooks useState & useEffect v2
7.1 هزار بار بازدید -
2 سال پیش
-
In this tutorial, you will
In this tutorial, you will learn how to create a countdown timer in React js using React hooks like useState and useEffect. You will also install and use React Icons in order to create the Play, Pause and Stop buttons and of course the watch icon. Even more you will also learn how to install and use React Styled components to style the timer component.
A countdown timer is a visual representation of the time remaining until an event or deadline. It is often used in games, quizzes, auctions, and other time-limited activities.
🎱Source Code for this Video:
https://norbertbm.com/how-to-create-a...
-----------------------------------------------------------------------------
Build a Countdown Timer using React and React Hooks useState & useEffect:
Build a Countdown Timer using React a...
-----------------------------------------------------------------------------
👇 My Website & Courses: 👨🏫 :
https://norbertbm.com/web-development...
Podcast:
@weeklycodequickieswithnorb7284
-------------------------------------------------------------------------------------------------
Timestamps:
00:00 - Intro & Project overview
00:30 - Install react
01:01 - Countdown timer with play pause and stop functionality
02:57 - Setup react app
04:27 - Create a countdown timer component in React
05:30 - Add the React useState hook to the application
06:36 - Check if the timer is running
07:10 - Add the React useEffct hook to the application
07:42 - Condition the timer to run
10:20 - Create a timer component in React
10: 55 - Install react Icons
11:13 - Install React Styled Components using npm
12:14 - Design the Timer using React Icons and React Styled Components
18:29 - Pas the timer states using React props
20:39 - Handle state change in the timer
21:52 - Add a Start Pause and Stop Buttons to the countdown timer
22:46 - Using react icons for buttons
23:54 - Create a function to Start the Countdown Timer
25:12 - Create a function to Pause rt the Countdown Timer
26:03 - Create a function to Stop the Countdown Timer
27:37 - Create a action on end of time
29:30 - Set conditions to show the end screen
30:44 - Reset the countdown timer
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------
#countdowntimer #reacttutorial #norbertbmwebdevelopment
A countdown timer is a visual representation of the time remaining until an event or deadline. It is often used in games, quizzes, auctions, and other time-limited activities.
🎱Source Code for this Video:
https://norbertbm.com/how-to-create-a...
-----------------------------------------------------------------------------
Build a Countdown Timer using React and React Hooks useState & useEffect:
Build a Countdown Timer using React a...
-----------------------------------------------------------------------------
👇 My Website & Courses: 👨🏫 :
https://norbertbm.com/web-development...
Podcast:
@weeklycodequickieswithnorb7284
-------------------------------------------------------------------------------------------------
Timestamps:
00:00 - Intro & Project overview
00:30 - Install react
01:01 - Countdown timer with play pause and stop functionality
02:57 - Setup react app
04:27 - Create a countdown timer component in React
05:30 - Add the React useState hook to the application
06:36 - Check if the timer is running
07:10 - Add the React useEffct hook to the application
07:42 - Condition the timer to run
10:20 - Create a timer component in React
10: 55 - Install react Icons
11:13 - Install React Styled Components using npm
12:14 - Design the Timer using React Icons and React Styled Components
18:29 - Pas the timer states using React props
20:39 - Handle state change in the timer
21:52 - Add a Start Pause and Stop Buttons to the countdown timer
22:46 - Using react icons for buttons
23:54 - Create a function to Start the Countdown Timer
25:12 - Create a function to Pause rt the Countdown Timer
26:03 - Create a function to Stop the Countdown Timer
27:37 - Create a action on end of time
29:30 - Set conditions to show the end screen
30:44 - Reset the countdown timer
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------
#countdowntimer #reacttutorial #norbertbmwebdevelopment
2 سال پیش
در تاریخ 1401/10/13 منتشر شده
است.
7,118
بـار بازدید شده