React Counter | Simple Counter with React Hooks

Simple Counter with Vanilla JavaScript:
   • Simple Increment and Decrement Counter | V...  

New to CSS Grid? Watch the full Crash Course here:    • CSS Grid Crash Course | Beginners Tutorial  

In this video I go over how to create this simple counter using React. I show you the full front end coding tutorial, where I create a React component and then write all of the styling and animation effects with CSS. I use Flexbox for the layout, and add hover and active states to improve the interaction. I also use conditional class statements with tertiary operators to change the styling of the counter depending on the value of the number.

Enjoying this tutorial? Subscribe to stay up to date with my latest content:    / @angeladesign737  
Codepen: https://codepen.io/angeladelise/pen/z...

In this video I show you:
0:00 - Intro
0:29 - Starting Code & Settings
1:11 - HTML Code
1:28 - React Code
4:45 - React Hook - useState
6:49 - onClick Event
8:40 - CSS Code
14:46 - Conditional Classes in React

Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...

--

Gear
Microphone - https://amzn.to/34bDTxH
Hard Drive - https://amzn.to/30m5E5M

--

Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog:   / angeladelise  

--

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!