#147: Starting a React-Powered Comment Form

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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.