I Made My First Thing With React!

I know it's not much, but I made a clock in React. Check it out: React Clock on CodePen. React has been one of those things on my list of "Should probably figure out, but haven't yet" for a while now. I figured I'd just dive in and see what I could make.

The biggest thing that I keep messing up with is using className instead of class

Things Learned

• Components
• Using/Updating State
• Props to pass info to components.

Questions

• getTime = () => {} I beleive this is called an arrow function, right? What is the point of it and how is it supposed to be used?
• For this clock example, within React, what would be the best way to store a users preference for 12 vs 24 hour time? I assume just storing the preference in a cookie? Is there an easy "React-ful" way to do this?

Comments

[Cy Chainey]

Congrats,

Yep, the naming convention can take awhile to get used to emmet is a bit of a lifesaver for that.

It's an arrow function, although it just looks like syntactic sugar, it's the handling of this that makes it different from a standard function. If you look through the react docs you'll see that they write a standard function and then bind the functions this on to the component.

this.handleClick = this.handleClick.bind(this);

Using a function expression with an arrow function sets it's this to the component without the need to use bind(). There's much more to it than that lexical scope, implicit return etc. But this is a bit of a rabbit hole so I kept it relevant to your code. If you want a more in depth overview of how they work and when to use them check out the mdn docs.

Persisting data would require some kind of backend db. For something simple though localStorage works really well. I often use it when I'm prototyping something as it can operate as a fake backend to allow a change of UI (login successful etc). A good tut with reasoning can be found here. robinwieruch.de/local-storage-react/

Hope that was helpful, and congrats again.

[Jack Harner 🚀]

Super helpful. Thanks for the resources!

[Aaron Cordova]

Nice job, look into requestAnimationFrame to perform the clock update. There is even an open source React component to handle it for you github.com/jamesseanwright/react-a...

[Ben Halpern]

Congrats!

[Jack Harner 🚀]

Thanks!

[Sajad Zarsanj]

Congrats, i'm new to react too.

[Domitrius]

Congrats! Saw some great answers but wanted to let you know I’m always available for React help!

Starting a stream around it soon on Twitch! I’ll have to write up a post for it.

[RAY D.]

Congrats! Now, it's time to keep going.

[Jack Harner 🚀]

Thanks! I can't wait to learn more.