React Counter | Simple Counter with React Hooks
Simple Counter with Vanilla JavaScript:
https://www.youtube.com/watch?v=yU0Eg7T3ulw
New to CSS Grid? Watch the full Crash Course here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs&t=214s
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: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
Codepen: https://codepen.io/angeladelise/pen/zYKpRqE
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: https://medium.com/@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!
https://www.youtube.com/watch?v=yU0Eg7T3ulw
New to CSS Grid? Watch the full Crash Course here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs&t=214s
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: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
Codepen: https://codepen.io/angeladelise/pen/zYKpRqE
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: https://medium.com/@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!