Simple react.js project / a step by step tutorial how to create pomodoro timer with react.js Buy me a coffee: buymeacoffee.c... Source code: github.com/dej... Demo: reactjs-pomodo...
This is an excellent tutorial. I did get stuck at one point. I was getting an error with initialValue:false inside the useState brackets in App.js (around 14:10 on the video). The source code you provided showed me that simply putting false inside works correctly. Thank you for the great tutorial!
great tutorial, the IDE gave me some headache sometimes though haha. at around 42:45 i wondered why " const percentage = Math.round(x:secondsLeft / totalSeconds) * 100" wasn't working. I had to take out the "x:" of course
@@gadoosher If I understood it correctly, we need to use references with the .current because every second our tick() function is called, the setInterval would keep ticking from the initial 45 min (in seconds) every cycle instead of counting one second down from the time frame before it. Ex: 45:00 -->tick(-1 second) --> 44:59 but resets to setinterval of 45:00 rinse and repeat vs 45:00 -->tick(-1second) save 44:59 as secondsLeftRef then... ⌄---------------------------------------------------------------------^ 44:59 -->tick(-1second) save 44:58 as secondsLeftRef so on and so forth
Thank you for the video! Somehow I keep getting this error message: "Module not found: Error: Can't resolve 'react-slider' in '/Users/.../my-app/src'" - do you know how to solve this? I already checked the path and the module is in the given path so I don't know what else it could be
Beginner here, someone please correct me if wrong. "props" allow the React components to communicate with each other, so the data can flow from a parent component to its child component(s). I understood it better when I saw someone use the example of having a HeroBanner component for a website with multiple pages. If you pass the text you want to display on the banner as a prop, you can use the HeroBanner component on every page and still have the ability to change the text to suit each page (About Us, FAQ, Services, etc.). I hope that kinda helps!
![Lp. Сердце Вселенной #1 НАЧАЛО ПУТЕШЕСТВИЯ [Новый сезон] • Майнкрафт](http://i.ytimg.com/vi/380Q7gLWGvk/mqdefault.jpg)
![[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒](/img/n.gif)
This is an excellent tutorial. I did get stuck at one point. I was getting an error with initialValue:false inside the useState brackets in App.js (around 14:10 on the video). The source code you provided showed me that simply putting false inside works correctly. Thank you for the great tutorial!
i noticed it too. I think in the newest react you dont have to use 'initialState' again.
congrats for the vídeo. i use everyday a pomodoro timer. Now, i have my personal hehehe God bless you!
Great video, great explanation and great code but fell asleep ;)
You have a voice that puts me to sleep
So thank you for this material and good nap😅
I think it's not about my voice. You just need more coffee when programming 😉
Very Helpful Bro, Lots of love, from India
Glad to hear that!
Lots of love from Stockholm, Sweden
great tutorial, the IDE gave me some headache sometimes though haha. at around 42:45 i wondered why " const percentage = Math.round(x:secondsLeft / totalSeconds) * 100" wasn't working. I had to take out the "x:" of course
Great tut. Just finished it. Nice little one day project. Thanks so much
Very helpful, thank you so much
This was a very helpful video. Loved it
`NaN` is an invalid value for the `right` css style property. I got this error, how to fix it?
Excellent video, I have learned a lot 🙌
Glad to hear that! 🙂
thank you for the video
how to add sound when timer goes off ?
Please could you explain to me why state variables will not work in setIntervale and why using references instead ? 37:52
Did you ever figure this out? Asking for a confused friend lmao : )
@@gadoosher If I understood it correctly, we need to use references with the .current because every second our tick() function is called, the setInterval would keep ticking from the initial 45 min (in seconds) every cycle instead of counting one second down from the time frame before it.
Ex: 45:00 -->tick(-1 second) --> 44:59 but resets to setinterval of 45:00 rinse and repeat
vs 45:00 -->tick(-1second) save 44:59 as secondsLeftRef then...
⌄---------------------------------------------------------------------^
44:59 -->tick(-1second) save 44:58 as secondsLeftRef so on and so forth
@@cherloves2code thank you so much for the reply!! That makes a ton of sense 🙏🏼
Great tuto well done
Thank you!
good
Great video!
what extension are you using that shows "initialState: " in useState and so on ?
It’s not an extension. Its built in into the IDE (webstorm)
@@CodingWithDawid OK! Thx!
hey, i tried, with hours, but i didn't, can you help me?
Thank you for the video! Somehow I keep getting this error message: "Module not found: Error: Can't resolve 'react-slider' in '/Users/.../my-app/src'" - do you know how to solve this? I already checked the path and the module is in the given path so I don't know what else it could be
How does your import line look like?
You must download react-slider. ( npm add react-slider )
I noticed that if I don't pass the props to the button components than it won't work. Can anyone tell me why that is?
I am also curious about this. I just came to the comments hoping to find an answer.
Beginner here, someone please correct me if wrong.
"props" allow the React components to communicate with each other, so the data can flow from a parent component to its child component(s). I understood it better when I saw someone use the example of having a HeroBanner component for a website with multiple pages. If you pass the text you want to display on the banner as a prop, you can use the HeroBanner component on every page and still have the ability to change the text to suit each page (About Us, FAQ, Services, etc.). I hope that kinda helps!
is it possible to do it without react? i use vs code.
Yes. You can do this with vanilla js
you can use react in vs code
what font is that? So clean 😍😍
you mean in the app (in the browser) or in my editor?
@@CodingWithDawid My bad, yes, in the editor. It's so clean and easy to read
it's a free, open source font "JetBrains Mono"
www.jetbrains.com/lp/mono/
sorry for the late response
👍
8:05 !!!
Can you provide source code?
Sure, Code: github.com/dejwid/react-pomodoro-timer
Demo: reactjs-pomodoro-timer.netlify.app/
Please explain what you are typing, otherwise we can't grab what's going on over the screen😞
I will try to explain more in the future
Can you check my latest videos and see if i am still doing this mistake by not explaining enough? Thanks for your input