Web Animation Workshops in Spring

Web Animation Workshops has started up again for Spring, we're headed for San Francisco, Chicago, and Paris this year, some dates still to be announced. Val Head and I team up to bring you two packed days full of content and exercises so that when you leave the class, you not only understand the techniques of how to animate in different tech stacks/environments but why. Here's is some of the content we cover:


CSS Modules and React

In this final post of our series on CSS Modules, I’ll be taking a look at how to make a static React site with the thanks of Webpack. This static site will have two templates: a homepage and an about page with a couple of React components to explain how it works in practice.


Leveling Up with React: Redux

This tutorial is the final of a three-part series by Brad Westfall. We'll learn how to manage state across an entire application efficiently and in a way that can scale without dangerous complexity. We've come so far in our React journey, it's worth making it across the finish line here and getting the full bang-for-our-buck out of this development approach.


#147: Starting a React-Powered Comment Form

In this pairing screencast, Sarah Drasner joins me and guides me through some of my very first learnings of React. We tackle some "real world" style functionality: a comment form.

This turned out to be a pretty useful bit of UI to work with, as it required a lot of things rather fundamental to React (or at least, it seems to me). For example, a master "App" that deals with the state (our big "state" thing is the comments themselves) and components that deal with rendering the view (for example, the comment form is a component and each comment is a component).

Then we got into lots of littler React thingies, but also huge things to understand in React-land, like:

  • props - a way to pass data between components. They looks like HTML attributes when you send them, and arrive as an object in the form of this.props.
  • refs - how you snag data out of the form element we created.
  • keys - a way to uniquely identify a component when it's repeated. We're repeating comments here (there can be multiple comments), so if we were to have functionality that could change any of them, having a key is what makes React efficient (it can just replace that single comment instead of all of them).

Plus a ton more!

Here's the demo we worked on:

See the Pen Starting a React-Powered Comment Form by Chris Coyier (@chriscoyier) on CodePen.

How do you level up your React learning beyond this? Start here.

Creating an SVG Icon System with React

I recently went to Michael Jackson and Ryan Florence’s ReactJS Training. I was really excited to attend, partially because I had so many questions about SVG and React. There are a lot of bits about working with React and SVG, and especially manipulating it, that aren’t quite supported yet. One of the major gaps for me was the <use></use> element, as most SVG icon systems are built with <use></use>.

I asked Michael if he thought better support might be coming for some of these features, but he showed me a much better way of working with it, circumventing this method entirely. We'll go over this technique so that you can get started writing scalable SVG Icon Systems in React, as well as some tricks I'd propose could work nicely, too.