https://github.com/arwl2016/react-timer
Udemy course projects - Andrew Mead: Complete React - Timer App
https://github.com/arwl2016/react-timer
babel express karma mocha react react-router testing webpack
Last synced: 3 months ago
JSON representation
Udemy course projects - Andrew Mead: Complete React - Timer App
- Host: GitHub
- URL: https://github.com/arwl2016/react-timer
- Owner: ARWL2016
- Created: 2017-01-20T03:16:14.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-04T12:40:01.000Z (over 9 years ago)
- Last Synced: 2026-01-03T16:23:26.353Z (6 months ago)
- Topics: babel, express, karma, mocha, react, react-router, testing, webpack
- Language: JavaScript
- Size: 780 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Complete React Developer Course - Timer App
http://desolate-hollows-74739.herokuapp.com/#/countdown?_k=7cmalg
https://www.udemy.com/the-complete-react-web-app-developer-course/learn/v4/content
https://github.com/ARWL2016/react-weather
- Udemy
- Andrew Mead
- Section 8
**Technologies**
1. Express
2. React and React-Router
3. Foundation and Sass
4. Babel
5. Karma (6 modules)
6. Mocha
7. Webpack
**Notes**
- This app demonstrates a Foundation navbar
- Styles are written in modular form to match React components
- Webpack is key to configuring styles and scripts
- Testing is a key focus in this section
- The TimerControl component is strictly speaking redundant - the Control function can be used by removing the if else condition
**Component Structure**
/ Main
..c Navigation
..ir. Timer
../countdown={Countdown}
....c Clock
....c CountdownForm
**Countdown Functionality**
1. Countdown: countdownStatus initially set to 'stopped'
- Countdown renders - display component
- Countdown conditionally renders
2. collects value and calls onSetCountdown
3. handleSetCountdown sets state of count + countdownStatus to 'started'
- componentDidUpdate registers status change and starts calls startTimer()
- startTimer() updates the state each second
- renders the and the (conditionally) passing in the countdownStatus string and onStatusChange func as props
4. renders the Pause button (conditionally) and the Clear button - both with onStatusChange function attached
- User clicks Pause:
5. handleStatusChange() sets new countDownStatus to pause
- renders and with new countdownStatus