DEV Community

loading...

I Made My First Thing With React!

Jack Harner πŸš€
I'm Jack! I'm a Freelance Developer. I have experience with WordPress, Shopify, BigCommerce, React, Linux Admin, & More! Ask Me Anything!!
・1 min read

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?

Discussion (12)

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 πŸš€ Author

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 πŸš€ Author

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 πŸš€ Author

Thanks! I can't wait to learn more.

Collapse
Sloan, the sloth mascot
Comment deleted