Chapter 11. Project: Timer component


This chapter covers

  • Understanding the project structure and scaffolding
  • Building the app’s architecture

Studies have shown that meditation is great for health (calming) and productivity (focus).[1] Who doesn’t want to be healthier and more productive, especially with minimal monetary investment?

1See “Research on Meditation,” Wikipedia,; “Meditation: In Depth,” National Institutes of Health,; “Harvard Neuroscientist: Meditation Not Only Reduces Stress, Here’s How It Changes Your Brain,” The Washington Post, May 26, 2015,; and “Benefits of Meditation,” Yoga Journal,

Gurus recommend starting with as little as 5 minutes of meditation and progressing to 10 minutes and then 15 minutes over the span of a few weeks. The target is 30–60 minutes of meditation per day, but some people notice improvements with as little as 10 minutes per day. I can attest to that: after meditating 10 minutes per day every day for 3 years, I am more focused, and it has also helped me in other areas.

But how do you know when you’ve reached your daily meditation goal? You need a timer! So in this chapter, you’ll put your React and HTML5 skills to the test and create a web timer (see figure 11.1). To make it easy for testing purposes, this timer will only run for 5, 10, or 15 seconds.

11.1. Project structure and scaffolding

11.2. App architecture

11.3. The TimerWrapper component

11.4. The Timer component

11.5. The Button component

11.6. Getting it running

11.7. Homework

11.8. Summary