Whew! I am finishing up quite late. A byproduct of starting this dang coding challenge and announcing it at 6 pm. I'll try to get it done early tomorrow.
Here is the github link: https://github.com/jwhubert91/100daysofreact/tree/master/day-1-clock
Try for yourself:
https://100-react-projects-day-1-clock.netlify.app/
Summary
For the first project I created a simple clock that shows the user their localized time using the npm package Moment.js. Moment is technically deprecated though it's a part of so many JS projects and tutorials that I felt it would be good practice to use it, and compare it to using the native JS Date object. Overall I feel that the JS Date object is more intuitive but Moment is more extensible.
React Notes
This project used a simple directory structure with just 3 functional React components. It used the default create-react-app styling. If I were doing this in production I'd probably make time available to application-wide state and pass it down to the components through props.
Other Takeaways
- Everything always takes longer than you think it is going to, especially with coding.
- Styling, in particular, can take a while but is totally worth it even though it can seem like an unnecessary flourish at times.
- I'm left wondering whether we really need to use the
$ npx create-react-appcommand to create any ol' React project. I might want to create and upload my own barebones React starter to Github since create-react-app is so unnecessarily large for some simple web projects. A great mini-project for some future busy day. - Speaking of large files. What's the best architecture to quickly set up hosting for React projects? I used netlify for this one. In the future I'll want to try Heroku and eventually S3.
Day 1 is done! Time to Tweet this blog post and share it on Linkedin. Looking forward to tomorrow when hopefully I'll publish a todo app using React and sessionStorage.
P.S. - Here's my Twitter ;)
https://twitter.com/jwhubert91
Top comments (2)
Nice one!
I once used moment, too. But then switched to 'date-fns' when I heard how much moment increases bundle size. Don't know if this is still the case, but I really can recommend 'date-fns'
I'm excited to read about your next projects 👍
date-fns is recommended these days because of its size like you said, but Moment.js is still so widely used it's good to know it.