Back to Browse

How to Build Pomodoro Timer in React | React Tutorial

9.2K views
Feb 21, 2021
11:34

Tutorial on how to build an infinite Pomodoro timer in React. Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g. 5 minutes) and then you repeat this cycle. In classic Pomodoro you would work for 4 cycles total and then take a longer break, but in this simplified version we are going to build a time tracker that repeats infinitely. See the full project in action on SandBox: https://codesandbox.io/s/pomodoro-361jf Find code from this video in my Github repo: https://github.com/alekspopovic/pomodoro Find text version of this tutorial on my website: https://aleksandarpopovic.com/Infinite-Pomodoro-App-in-React/ Music in the video is from StreamBeats collection by Harris Heller. Blog: https://aleksandarpopovic.com/blog/ Github: https://github.com/alekspopovic/ Twitter: https://twitter.com/alekswritescode/ Instagram: https://www.instagram.com/aleks.popovic/ Chapters: 0:00​ Intro 0:24 Setting up JSX 01:37 Setting up CSS 03:11 Setting up useState 04:50 Prepending single digit values with a zero 06:17 Timer 08:58 Switching to a break 10:17 Testing it out 10:51 Additional features and ideas 11:18 Outro

Download

0 formats

No download links available.

How to Build Pomodoro Timer in React | React Tutorial | NatokHD