WritingRSS Feed

Get Started with React by Building a Whac-A-Mole Game

Want to get started with React but struggling to find a good place to start? This article should have you covered. We'll focus on some of the main concepts of React and then we'll be building a game from scratch! We assume that you have a working knowledge of JavaScript — ah, and if you're here for the game, please scroll down.

react, css, whimsy, design~22min

Featured post image

Featured

• How to Make a Pure CSS 3D Package Toggle

  css, whimsy, animation

  ~11min

  CSS Tricks

• 3D CSS Flippy Snaps with React && GreenSock

  react, css, javascript, greensock

  ~11min

  Smashing Magazine

• Parallax Powered by CSS Custom Properties

  react, css, javascript, greensock

  ~12min

  CSS Tricks

• Print.css but not how you know it – Creating a 3D CSS Printer

  whimsy, css, javascript, design

  ~11min

  SitePoint

• Can We Create a "Resize Hack" With Container Queries?

  whimsy, css, design

  ~5min

  CSS Tricks

• Get Started with React by Building a Whac-A-Mole Game

  react, css, whimsy, design

  ~22min

  Smashing Magazine

• Going "Meta GSAP": The Quest for "Perfect" Infinite Scrolling

  greensock, css, javascript, design

  ~15min

  CSS Tricks

• Go Headless with Netlify CMS

  design, javascript, whimsy, css

  ~8min

• Squeaky Portraits: Having Fun with the CSS path() Function

  css, whimsy, design

  ~7min

  SitePoint

• Paint Your Github Profile with Serverless

  design, javascript, whimsy, css

  ~9min

• Exploring @property and its Animating Powers

  css, whimsy, design

  ~11min

  CSS Tricks

• Add A Little Whimsy to Your Forms

  design, javascript, whimsy, css

  ~4min

• How To: Cursor Tracking Parallax

  design, javascript, css

  ~5min

• Creating Directionally Lit 3D Buttons with CSS

  design, javascript, whimsy, css

  ~10min

  SitePoint

• A Guide to Clipping Paths

  design, css

  ~10min

• Make Your Elements Full With requestFullscreen

  design, javascript, css

  ~2min

• CSS Animation Superpowers with @property

  design, animation, css

  ~6min

• CSS Aspect Ratio

  design, html, css

  ~2min

• Get the Picture - Responsive Image Sizing && Formatting

  design, html, css

  ~5min

• CSS Cyberpunk 2077 Buttons - Taking your CSS to Night City

  css, design, animation

  ~12min

  SitePoint

• Playfulness In Code: Supercharge Your Learning by Having Fun

  thoughts, design, whimsy

  ~10min

  Smashing Magazine

• CSS in 3D: Learning to think in Cubes Instead of Boxes

  css, javascript, design

  ~10min

  CSS Tricks

• It's Good To Talk: Thoughts And Feelings On Creative Wellness

  coding, health

  ~6min

  Smashing Magazine

• CSS Animated Google Fonts

  css, animation, design

  ~3min

• Write For Yourself so That One Day You Might Write For Those You Look Up To

  thoughts, health

  ~5min

• Starting a Streaming Journey

  streaming, thoughts, health

  ~6min

  DEV

• Advice For Complex CSS Illustrations

  css, design, whimsy

  ~9min

  CSS Tricks

• React Hooks in 5 Minutes

  react, javascript

  ~5min

• React's Render Props in 3 Minutes

  react, javascript

  ~3min

• Pug in 5 Minutes

  javascript, node

  ~5min

• Create a Responsive CSS Motion Path? Sure We Can!

  css, javascript, animation

  ~7min

  CSS Tricks

• Animated Matryoshka Dolls in CSS

  design, whimsy, animation

  ~8min

  CSS Tricks

• React's Portals in 3 Minutes

  react, javascript

  ~3min

• JavaScript's Async + Await in 5 Minutes

  javascript

  ~5min

• Glitchy Text Reveal in 3 Minutes

  animation, design, css

  ~3min

• The Power (and Fun) of Scope with CSS Custom Properties

  css, animation, design

  ~7min

  CSS Tricks

• Enumeration Objects in JavaScript

  javascript, node

  ~5min

• Ghost Buttons with Directional Awareness in CSS

  css, design

  ~5min

  CSS Tricks

• How To: Looping Block Reveal Effect

  css, javascript, animation

  ~10min

• Getting Started With Styletron

  react, css, javascript

  ~5min

  Base Web

• Create a Password Generator with Uber's Base Web

  react, javascript, css

  ~3min

  Base Web

• React Higher Order Components in 3 Minutes

  react, javascript

  ~3min

• Styling in React

  react, css, javascript

  ~8min

• JavaScript's Page Visibility API

  javascript, design

  ~2min

• React's Safe Context API

  react, javascript, animation

  ~6min

• The "Off" Click

  javascript

  ~3min

• How To: True Masonry Layout

  css, javascript, design

  ~12min

• Another Webpack Intro

  javascript, node

  ~15min

• How To: Pure CSS Carousel

  css, design

  ~6min

• A Quick Guide for Switching to Gulp 4

  gulp, javascript, node

  ~3min

• How To: Update All NPM Packages in Your Project at Once

  node, javascript

  ~3min

• Guide to BEM

  css, design

  ~4min

• How To: Pure CSS Masonry Layouts

  css, design

  ~8min

• How To: Find Input Cursor Position with JavaScript

  javascript, css, react

  ~5min

• Implementing Touch Gestures with JavaScript

  javascript, design

  ~4min

• Using Transition Events in JavaScript

  javascript, css, animation

  ~3min

• Advanced Gulp

  gulp, javascript, node

  ~7min

• Pixels vs Rems

  css, design

  ~3min

• Throttling and Debouncing in JavaScript

  javascript

  ~4min

• Dealing with Mega Data in AngularJS

  angular, javascript

  ~3min