I Made My First Thing With React!

#react #learndev #showdev

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?

Top comments (10)

Cy Chainey • Nov 10 '18

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 🚀 • Nov 11 '18

Super helpful. Thanks for the resources!

Aaron Cordova • Nov 11 '18

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...