DEV Community

Jack Harner πŸš€
Jack Harner πŸš€

Posted on

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.

React Clock

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)

Collapse
 
cychainey profile image
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.

Collapse
 
jackharner profile image
Jack Harner πŸš€

Super helpful. Thanks for the resources!

Collapse
 
505aaron profile image
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...

Collapse
 
ben profile image
Ben Halpern

Congrats!

Collapse
 
jackharner profile image
Jack Harner πŸš€

Thanks!

Collapse
 
sjdz1892 profile image
Sajad Zarsanj

Congrats, i'm new to react too.

Collapse
 
domitriusclark profile image
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.

Collapse
 
rayediiaz profile image
RAY D.

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

Collapse
 
jackharner profile image
Jack Harner πŸš€

Thanks! I can't wait to learn more.

Collapse
 
Sloan, the sloth mascot
Comment deleted