Day 1 - Moment.js vs JS Date

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

1. Everything always takes longer than you think it is going to, especially with coding.
2. Styling, in particular, can take a while but is totally worth it even though it can seem like an unnecessary flourish at times.
3. I'm left wondering whether we really need to use the $ npx create-react-app command 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.
4. 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

Comments

[Christian Kozalla]

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 👍

[James Hubert]

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.